npm - sourcemonkey - Versions diffs - 0.0.0-stage → 0.5.0 - Mend

sourcemonkey 0.0.0-stage → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (367) hide show

package/LICENSE +21 -0
package/README.md +87 -2
package/dist/bytes.js +37 -0
package/dist/channel-placeholder.js +5 -0
package/dist/collection-scan.js +17 -0
package/dist/collections.html +353 -0
package/dist/compare.html +358 -0
package/dist/composed-source.js +205 -0
package/dist/connect-prompt.html +47 -0
package/dist/debug/icons.html +211 -0
package/dist/debug/storage.html +163 -0
package/dist/debug-log.js +75 -0
package/dist/diagnostic-location.js +64 -0
package/dist/eval-hook.js +308 -0
package/dist/extension/background.js +5263 -0
package/dist/extension/channel.js +133 -0
package/dist/extension/code-links.js +187 -0
package/dist/extension/code-tabs.js +460 -0
package/dist/extension/collection-dialog.js +619 -0
package/dist/extension/collection-display.js +322 -0
package/dist/extension/collections.js +2905 -0
package/dist/extension/compare.js +867 -0
package/dist/extension/concurrency.js +186 -0
package/dist/extension/connect-grants.js +109 -0
package/dist/extension/connect-prompt-page.js +70 -0
package/dist/extension/connect-prompt.js +266 -0
package/dist/extension/copy-button.js +63 -0
package/dist/extension/copy-dialog.js +502 -0
package/dist/extension/copy-preference.js +66 -0
package/dist/extension/debug/icons.js +203 -0
package/dist/extension/debug/storage.js +365 -0
package/dist/extension/deep-link.js +77 -0
package/dist/extension/delete-dialog.js +432 -0
package/dist/extension/delete-icon.js +40 -0
package/dist/extension/details-tooltips.js +66 -0
package/dist/extension/directories.js +679 -0
package/dist/extension/export-backup.js +407 -0
package/dist/extension/export-dialog.js +142 -0
package/dist/extension/file-access.js +74 -0
package/dist/extension/file-changes.js +346 -0
package/dist/extension/frame-info.js +85 -0
package/dist/extension/github-provider.js +336 -0
package/dist/extension/glyph.js +84 -0
package/dist/extension/gm-bindings.js +601 -0
package/dist/extension/gm-download.js +419 -0
package/dist/extension/gm-menu.js +228 -0
package/dist/extension/gm-notification.js +141 -0
package/dist/extension/gm-originator-map.js +23 -0
package/dist/extension/gm-tab-data.js +121 -0
package/dist/extension/gm-tab.js +160 -0
package/dist/extension/gm-url-change.js +111 -0
package/dist/extension/gm-url-scheme.js +27 -0
package/dist/extension/gm-values.js +176 -0
package/dist/extension/gm-window-control.js +104 -0
package/dist/extension/gm-xhr-headers.js +333 -0
package/dist/extension/gm-xhr.js +584 -0
package/dist/extension/injector.js +3145 -0
package/dist/extension/install-capture.js +277 -0
package/dist/extension/line-diff.js +233 -0
package/dist/extension/local-copy.js +560 -0
package/dist/extension/local-delete.js +276 -0
package/dist/extension/location-kinds.js +108 -0
package/dist/extension/log-format.js +158 -0
package/dist/extension/managed-changes.js +361 -0
package/dist/extension/managed-items.js +57 -0
package/dist/extension/match-index.js +375 -0
package/dist/extension/missing-scripts.js +66 -0
package/dist/extension/more-menu.js +109 -0
package/dist/extension/move-dialog.js +197 -0
package/dist/extension/offscreen.js +37 -0
package/dist/extension/options.js +504 -0
package/dist/extension/page-heading.js +170 -0
package/dist/extension/page-links.js +199 -0
package/dist/extension/parse-check-client.js +70 -0
package/dist/extension/parse-check.js +161 -0
package/dist/extension/parse-sandbox-host.js +172 -0
package/dist/extension/parse-sandbox.js +175 -0
package/dist/extension/popup-commands-open.js +41 -0
package/dist/extension/popup-view.js +387 -0
package/dist/extension/popup.js +703 -0
package/dist/extension/prism-userscript.js +53 -0
package/dist/extension/refresh-error.js +136 -0
package/dist/extension/refresh-targets.js +160 -0
package/dist/extension/related-versions.js +1144 -0
package/dist/extension/resize-observer-loop.js +19 -0
package/dist/extension/row-cache.js +387 -0
package/dist/extension/script-blobs.js +413 -0
package/dist/extension/script-details.js +658 -0
package/dist/extension/script-enablement.js +285 -0
package/dist/extension/script-identity.js +310 -0
package/dist/extension/script-keys.js +54 -0
package/dist/extension/script-log-id.js +155 -0
package/dist/extension/script-log.js +290 -0
package/dist/extension/script-rejection.js +104 -0
package/dist/extension/script-sites.js +158 -0
package/dist/extension/script-store.js +3507 -0
package/dist/extension/script-updater.js +991 -0
package/dist/extension/script-url-hash.js +61 -0
package/dist/extension/select-all.js +37 -0
package/dist/extension/select-open-guard.js +90 -0
package/dist/extension/site-icon.js +1261 -0
package/dist/extension/sm-dev-link.js +302 -0
package/dist/extension/solo-click.js +58 -0
package/dist/extension/sticky-numbers.js +188 -0
package/dist/extension/storage-breakdown.js +253 -0
package/dist/extension/storage-scan.js +86 -0
package/dist/extension/storage-usage.js +194 -0
package/dist/extension/structural-keys.js +29 -0
package/dist/extension/sw-teardown.js +36 -0
package/dist/extension/tab-status.js +403 -0
package/dist/extension/toolbar-summary.js +105 -0
package/dist/extension/user-scripts-access.js +43 -0
package/dist/extension/userscript.js +3672 -0
package/dist/extension/value-store.js +204 -0
package/dist/extension/version-probe-fetch.js +68 -0
package/dist/extension/worker-client.js +109 -0
package/dist/extension/worker-ops.js +171 -0
package/dist/extension/zip-writer.js +24 -0
package/dist/external-files.js +878 -0
package/dist/file-loader.js +436 -0
package/dist/file-locations.js +439 -0
package/dist/generated-wrappers.js +5 -0
package/dist/github-auth.js +148 -0
package/dist/github-urls.js +46 -0
package/dist/gm-api-catalog.js +217 -0
package/dist/gm-connect.js +273 -0
package/dist/gm-xhr-types.js +5 -0
package/dist/http-read.js +142 -0
package/dist/icons/icon-128.png +0 -0
package/dist/icons/icon-16.png +0 -0
package/dist/icons/icon-48.png +0 -0
package/dist/local-file-overrides.js +558 -0
package/dist/manifest.json +38 -0
package/dist/markup-response.js +126 -0
package/dist/match-targets.js +305 -0
package/dist/menu-captions.js +22 -0
package/dist/offscreen.html +39 -0
package/dist/options.html +197 -0
package/dist/parse-check-protocol.js +51 -0
package/dist/parse-location.js +171 -0
package/dist/parse-sandbox.html +56 -0
package/dist/phase-timing.js +155 -0
package/dist/popup.html +197 -0
package/dist/public-suffixes.js +6957 -0
package/dist/run-context.js +31 -0
package/dist/runtime-messages.js +34 -0
package/dist/sandboxed-page.js +35 -0
package/dist/script-build.js +787 -0
package/dist/script-display.js +383 -0
package/dist/script-icon.js +43 -0
package/dist/script-links.js +204 -0
package/dist/script-source-url.js +214 -0
package/dist/script-world.js +65 -0
package/dist/sm-dev-protocol.js +84 -0
package/dist/source-map.js +177 -0
package/dist/stack-link.js +138 -0
package/dist/styles.css +825 -0
package/dist/unsafe-window-use.js +229 -0
package/dist/url-match.js +734 -0
package/dist/userscript-header.js +248 -0
package/dist/userscript.html +1165 -0
package/dist/vendor/fflate.LICENSE +21 -0
package/dist/vendor/fflate.js +2692 -0
package/dist/vendor/prism/prism-line-numbers.css +1 -0
package/dist/vendor/prism/prism-line-numbers.js +1 -0
package/dist/vendor/prism/prism.css +1 -0
package/dist/vendor/prism/prism.js +1946 -0
package/dist/version-compare.js +141 -0
package/dist/version-probe.js +120 -0
package/lib/build-info.json +1 -0
package/lib/bytes.d.ts +3 -0
package/lib/bytes.js +37 -0
package/lib/channel-placeholder.d.ts +1 -0
package/lib/channel-placeholder.js +5 -0
package/lib/collection-scan.d.ts +8 -0
package/lib/collection-scan.js +17 -0
package/lib/composed-source.d.ts +28 -0
package/lib/composed-source.js +205 -0
package/lib/debug-log.d.ts +9 -0
package/lib/debug-log.js +75 -0
package/lib/diagnostic-location.d.ts +8 -0
package/lib/diagnostic-location.js +64 -0
package/lib/eval-hook.d.ts +34 -0
package/lib/eval-hook.js +308 -0
package/lib/external-files.d.ts +111 -0
package/lib/external-files.js +878 -0
package/lib/file-loader.d.ts +48 -0
package/lib/file-loader.js +436 -0
package/lib/file-locations.d.ts +44 -0
package/lib/file-locations.js +439 -0
package/lib/generated-wrappers.d.ts +11 -0
package/lib/generated-wrappers.js +5 -0
package/lib/github-auth.d.ts +12 -0
package/lib/github-auth.js +148 -0
package/lib/github-urls.d.ts +1 -0
package/lib/github-urls.js +46 -0
package/lib/gm-api-catalog.d.ts +24 -0
package/lib/gm-api-catalog.js +217 -0
package/lib/gm-connect.d.ts +34 -0
package/lib/gm-connect.js +273 -0
package/lib/gm-xhr-types.d.ts +68 -0
package/lib/gm-xhr-types.js +5 -0
package/lib/harness/browser-extensions.d.ts +73 -0
package/lib/harness/browser-extensions.js +285 -0
package/lib/harness/browser-lang.d.ts +20 -0
package/lib/harness/browser-lang.js +86 -0
package/lib/harness/browser-launch.d.ts +14 -0
package/lib/harness/browser-launch.js +184 -0
package/lib/harness/checks.d.ts +110 -0
package/lib/harness/checks.js +321 -0
package/lib/harness/cli.d.ts +2 -0
package/lib/harness/cli.js +2259 -0
package/lib/harness/command-args.d.ts +91 -0
package/lib/harness/command-args.js +369 -0
package/lib/harness/command-lines.d.ts +80 -0
package/lib/harness/command-lines.js +180 -0
package/lib/harness/command-list.d.ts +206 -0
package/lib/harness/command-list.js +1475 -0
package/lib/harness/console-commands.d.ts +463 -0
package/lib/harness/console-commands.js +3216 -0
package/lib/harness/download-watch.d.ts +21 -0
package/lib/harness/download-watch.js +156 -0
package/lib/harness/extension-backend.d.ts +41 -0
package/lib/harness/extension-backend.js +100 -0
package/lib/harness/extension-host.d.ts +112 -0
package/lib/harness/extension-host.js +552 -0
package/lib/harness/extension-launch.d.ts +67 -0
package/lib/harness/extension-launch.js +285 -0
package/lib/harness/extension-link.d.ts +315 -0
package/lib/harness/extension-link.js +607 -0
package/lib/harness/external-manager.d.ts +146 -0
package/lib/harness/external-manager.js +414 -0
package/lib/harness/fixture.d.ts +165 -0
package/lib/harness/fixture.js +461 -0
package/lib/harness/frame-sessions.d.ts +71 -0
package/lib/harness/frame-sessions.js +248 -0
package/lib/harness/frames.d.ts +68 -0
package/lib/harness/frames.js +216 -0
package/lib/harness/help-format.d.ts +17 -0
package/lib/harness/help-format.js +127 -0
package/lib/harness/host.d.ts +352 -0
package/lib/harness/host.js +423 -0
package/lib/harness/index.d.ts +8 -0
package/lib/harness/index.js +10 -0
package/lib/harness/input-file.d.ts +18 -0
package/lib/harness/input-file.js +61 -0
package/lib/harness/json-output.d.ts +565 -0
package/lib/harness/json-output.js +71 -0
package/lib/harness/manager-actions.d.ts +21 -0
package/lib/harness/manager-actions.js +129 -0
package/lib/harness/manager-commands.d.ts +142 -0
package/lib/harness/manager-commands.js +1196 -0
package/lib/harness/manager-fetch.d.ts +33 -0
package/lib/harness/manager-fetch.js +239 -0
package/lib/harness/managers.d.ts +24 -0
package/lib/harness/managers.js +27 -0
package/lib/harness/output-style.d.ts +125 -0
package/lib/harness/output-style.js +322 -0
package/lib/harness/page-commands.d.ts +134 -0
package/lib/harness/page-commands.js +1141 -0
package/lib/harness/page-output.d.ts +67 -0
package/lib/harness/page-output.js +139 -0
package/lib/harness/page-watch.d.ts +171 -0
package/lib/harness/page-watch.js +607 -0
package/lib/harness/parse-check-node.d.ts +3 -0
package/lib/harness/parse-check-node.js +132 -0
package/lib/harness/path-args.d.ts +22 -0
package/lib/harness/path-args.js +148 -0
package/lib/harness/playwright-chromium.d.ts +16 -0
package/lib/harness/playwright-chromium.js +86 -0
package/lib/harness/prepare.d.ts +168 -0
package/lib/harness/prepare.js +364 -0
package/lib/harness/prompt-editor.d.ts +17 -0
package/lib/harness/prompt-editor.js +354 -0
package/lib/harness/prompt-history.d.ts +13 -0
package/lib/harness/prompt-history.js +89 -0
package/lib/harness/rebuild-advice.d.ts +6 -0
package/lib/harness/rebuild-advice.js +39 -0
package/lib/harness/run-log.d.ts +47 -0
package/lib/harness/run-log.js +140 -0
package/lib/harness/run-logs.d.ts +132 -0
package/lib/harness/run-logs.js +241 -0
package/lib/harness/run.d.ts +194 -0
package/lib/harness/run.js +1973 -0
package/lib/harness/runs.d.ts +229 -0
package/lib/harness/runs.js +726 -0
package/lib/harness/save-html.d.ts +39 -0
package/lib/harness/save-html.js +89 -0
package/lib/harness/saved-pages.d.ts +120 -0
package/lib/harness/saved-pages.js +275 -0
package/lib/harness/script-mark.d.ts +17 -0
package/lib/harness/script-mark.js +56 -0
package/lib/harness/snapshot.d.ts +143 -0
package/lib/harness/snapshot.js +474 -0
package/lib/harness/stuck-tabs.d.ts +19 -0
package/lib/harness/stuck-tabs.js +131 -0
package/lib/harness/tab-refs.d.ts +20 -0
package/lib/harness/tab-refs.js +80 -0
package/lib/harness/tampermonkey.d.ts +71 -0
package/lib/harness/tampermonkey.js +356 -0
package/lib/harness/tm-ids.d.ts +18 -0
package/lib/harness/tm-ids.js +88 -0
package/lib/harness/violentmonkey.d.ts +34 -0
package/lib/harness/violentmonkey.js +162 -0
package/lib/harness/wait.d.ts +77 -0
package/lib/harness/wait.js +458 -0
package/lib/http-read.d.ts +30 -0
package/lib/http-read.js +142 -0
package/lib/local-file-overrides.d.ts +35 -0
package/lib/local-file-overrides.js +558 -0
package/lib/manifest.json +38 -0
package/lib/markup-response.d.ts +11 -0
package/lib/markup-response.js +126 -0
package/lib/match-targets.d.ts +18 -0
package/lib/match-targets.js +305 -0
package/lib/menu-captions.d.ts +1 -0
package/lib/menu-captions.js +22 -0
package/lib/parse-check-protocol.d.ts +27 -0
package/lib/parse-check-protocol.js +51 -0
package/lib/parse-location.d.ts +12 -0
package/lib/parse-location.js +171 -0
package/lib/phase-timing.d.ts +12 -0
package/lib/phase-timing.js +155 -0
package/lib/public-suffixes.d.ts +1 -0
package/lib/public-suffixes.js +6957 -0
package/lib/run-context.d.ts +2 -0
package/lib/run-context.js +31 -0
package/lib/runtime-messages.d.ts +10 -0
package/lib/runtime-messages.js +34 -0
package/lib/sandboxed-page.d.ts +5 -0
package/lib/sandboxed-page.js +35 -0
package/lib/script-build.d.ts +111 -0
package/lib/script-build.js +787 -0
package/lib/script-display.d.ts +51 -0
package/lib/script-display.js +383 -0
package/lib/script-icon.d.ts +16 -0
package/lib/script-icon.js +43 -0
package/lib/script-links.d.ts +24 -0
package/lib/script-links.js +204 -0
package/lib/script-source-url.d.ts +8 -0
package/lib/script-source-url.js +214 -0
package/lib/script-world.d.ts +6 -0
package/lib/script-world.js +65 -0
package/lib/sm-dev-protocol.d.ts +251 -0
package/lib/sm-dev-protocol.js +84 -0
package/lib/source-map.d.ts +32 -0
package/lib/source-map.js +177 -0
package/lib/stack-link.d.ts +15 -0
package/lib/stack-link.js +138 -0
package/lib/unsafe-window-use.d.ts +1 -0
package/lib/unsafe-window-use.js +229 -0
package/lib/url-match.d.ts +40 -0
package/lib/url-match.js +734 -0
package/lib/userscript-header.d.ts +33 -0
package/lib/userscript-header.js +248 -0
package/lib/version-compare.d.ts +6 -0
package/lib/version-compare.js +141 -0
package/lib/version-probe.d.ts +17 -0
package/lib/version-probe.js +120 -0
package/package.json +55 -3
package/skills/SourceMonkey-dev/SKILL.md +868 -0
package/skills/SourceMonkey-dev/references/cdp.md +293 -0
package/skills/SourceMonkey-dev/references/commands.md +297 -0
package/skills/SourceMonkey-dev/references/other-managers.md +63 -0
package/skills/SourceMonkey-dev/references/specs.md +46 -0
package/skills/SourceMonkey-friction/SKILL.md +103 -0
package/skills/SourceMonkey-friction/references/template.md +59 -0

package/dist/userscript.html ADDED Viewed

@@ -0,0 +1,1165 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>SourceMonkey | Userscript</title>
+    <link rel="stylesheet" href="vendor/prism/prism.css" />
+    <link rel="stylesheet" href="vendor/prism/prism-line-numbers.css" />
+    <link rel="stylesheet" href="styles.css" />
+    <!-- Ahead of the Prism scripts and userscript.js on purpose: this
+         one paints the header bar's heading, and it has to run before
+         the browser's first paint rather than after the viewer's whole
+         module graph has loaded. Deferred like every module, so the <h1>
+         it writes into is already parsed. See src/extension/page-heading.ts. -->
+    <script src="extension/page-heading.js" type="module"></script>
+    <style>
+      /* The body is at least the viewport and grows past it only when
+         the code box's minimum height (`--code-box-min`) no longer
+         fits under the details panel — then the page scrolls, padding
+         and all. `height: 100%` instead would fix the body at the
+         viewport and let that overflow spill out of it. */
+      html { height: 100%; margin: 0; }
+      body {
+        min-height: 100%;
+        margin: 0;
+        font: 14px system-ui, sans-serif;
+        color: #222;
+        display: flex;
+        flex-direction: column;
+        box-sizing: border-box;
+      }
+      /* The page under the header bar. The body's flex column moves
+         down one level so the code box can still take the leftover
+         height: `min-height: 0` is what lets this column shrink below
+         its content, which is what makes the box scroll rather than
+         push the page taller. Full-bleed — the viewer has no
+         `--page-width` column, so its padding is the only inset. */
+      .page-main {
+        flex: 1 1 auto;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
+        /* 16px, matching `.page-header`'s side padding, so the heading
+           starts directly above the page's own first line. `1em` here
+           is 14px and put the two two pixels apart. */
+        padding: 16px;
+        box-sizing: border-box;
+      }
+      /* No focus ring, ever. The `tabindex` in the body exists only so
+         in-page navigation can park focus here for a screen reader to
+         announce the new script from — the heading is not a control and
+         is not tabbable, so a ring around it reads as a text field.
+         `:focus-visible` is not the discriminator it looks like: Chrome
+         counts a programmatic focus as visible when the focus it
+         replaced came from the keyboard, so the ring appeared for some
+         clicks and not others. */
+      h1:focus { outline: none; }
+      /* No hanging indent here, unlike the collections page's name cell:
+         the favicon is no longer the first thing on the line (the
+         "SourceMonkey | " / "SourceMonkey | Install | " prefix is), so
+         there is no single x-position for continuation lines to align
+         to. */
+      /* Size, weight and colour come from `.page-header h1`
+         (styles.css) — every page's heading is the same one. Only the
+         wrap behaviour is the viewer's own, because only here is the
+         heading a filename. */
+      h1 {
+        /* Slash-aware wrap: prefer spaces / slashes (with `<wbr>`
+           markers inserted by appendWithSlashBreaks), then anywhere
+           inside a word only when nothing else fits. */
+        overflow-wrap: anywhere;
+        word-break: normal;
+      }
+      /* The heading's favicon slot (`h1 .site-icon`) is shared with the
+         compare page — see styles.css. */
+      /* The icons inside the slot (`.site-icon-inner`, the globe, the
+         <img>) are styled once for every page in styles.css. */
+      /* Controls row: everything that acts on the script itself —
+         the enable toggle, Local copy…, the delete trash can, Refresh.
+         The filename, size, and status moved into the details panel
+         below where the dl gives them aligned label/value columns. */
+      .meta-row {
+        display: flex;
+        align-items: center;
+        /* One gap for the whole row, matching the one inside
+           `.meta-actions`: the controls are peers, so a wider gap on one
+           side of the trash can than the other reads as a mistake. */
+        gap: 0.5em;
+        margin: 0 0 0.5em;
+        font-size: 0.95em;
+      }
+      .meta-row[hidden] { display: none; }
+      .meta-status { font-weight: 600; }
+      .status-ok { color: #166534; }
+      .status-invalid, .status-rejected, .status-error { color: #b00; }
+      .status-warning, .status-outdated { color: #b67200; }
+      .status-refresh-failed { color: #c2410c; }
+      /* Status row is a link to the Log tab — keep it looking like
+         status text (not a default blue underline). */
+      .meta-status[href] { text-decoration: none; color: inherit; cursor: pointer; }
+      .meta-status[href]:hover { text-decoration: underline; }
+      /* Horizontal padding only: an `.icon-btn` brings its own, and
+         this rule outranks it on specificity — without the `:not()`
+         the row's Refresh comes out wider than the trash can beside
+         it. Height, surface and hover are shared (styles.css). */
+      .meta-row button:not(.icon-btn) { padding: 0 0.7em; }
+      .meta-row .toggle { display: inline-flex; align-items: center; gap: 0.3em; cursor: pointer; margin-left: auto; }
+      /* The script's own actions, between the Enabled box and Refresh.
+         Nothing here styles the buttons: every button in this row —
+         Local copy…, the trash can, Refresh — takes the one shared
+         surface and height from styles.css. This used to `revert` the
+         trash can's border and background to the browser's own, back
+         when the shared style gave it no chrome at all; once the
+         shared style became the chrome, that revert was what made this
+         one button look unlike everything beside it. */
+      .meta-row .meta-actions {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+      }
+      .meta-row .toggle input[type="checkbox"] { cursor: pointer; margin: 0; }
+      .meta-row .toggle.toggle-disabled { cursor: not-allowed; opacity: 0.5; }
+      .meta-row .toggle.toggle-disabled input[type="checkbox"] { cursor: not-allowed; }
+      .message { margin: 0 0 0.5em; }
+      .message.error { color: #b00; }
+      .message.refresh-failed { color: #c2410c; }
+      .message:empty { display: none; }
+      /* Preview-mode install callout, banner, and action row. With
+         nothing installed, the callout IS the page's question — "Install
+         into [collection]" — so it gets the box; when copies exist the
+         banner takes that spot, in one box with the table that carries
+         the choice. The row under either holds Cancel / View raw
+         source. */
+      .install-callout {
+        display: flex;
+        align-items: center;
+        gap: 0.5em;
+        flex-wrap: wrap;
+        /* Same green as the versions panel: both are about
+           where a copy of this script lives. */
+        border: 1px solid #b9d4b1;
+        background: #dbecd6;
+        border-radius: 6px;
+        padding: 10px 14px;
+        margin: 0 0 10px;
+      }
+      .install-callout[hidden] { display: none; }
+      /* Unbolded on purpose, and so with no weight of its own: the
+         label is the connector in "Install into <collection>", not a
+         heading over the row — the button ahead of it is the verb, and
+         a bold word between the two controls breaks the sentence. */
+      .install-callout label[hidden] { display: none; }
+      /* A collection name can be longer than the callout. The row wraps
+         first (`flex-wrap` above) and the dropdown then shrinks rather
+         than running past the edge; Chrome sizes the OPEN list to its
+         widest option, so the full name is still readable there. */
+      .install-callout select { flex: 0 1 auto; min-width: 0; }
+      /* Horizontal only: height and the disabled state are shared
+         (styles.css). */
+      .install-callout button { padding: 0 0.9em; }
+      .install-callout .primary { font-weight: 600; }
+      .actions { display: flex; gap: 0.5em; align-items: center; margin: 0 0 0.7em; }
+      .actions[hidden] { display: none; }
+      .actions button { padding: 0 0.9em; }
+      .actions button:disabled { cursor: not-allowed; opacity: 0.5; }
+      .actions .primary { font-weight: 600; }
+      .actions .spacer { margin-left: auto; }
+      /* The banner box is in styles.css (shared with the collections page,
+         which is also where the file-access banner comes from). Only
+         the viewer's own colour variant lives here — the amber default
+         is a warning, and "already installed" is not. */
+      /* Matches the versions panel — this banner is about which of
+         those copies to act on, so the two share a ground before the
+         `merged` rule below makes them literally one box. */
+      .banner.installed { border-color: #b9d4b1; background: #dbecd6; }
+      /* One line, not the block-level heading `.banner strong` gives
+         every other banner: this one is a sentence with its follow-up
+         in the same breath, and the table under it is what needs the
+         vertical room. */
+      .banner.installed strong { display: inline; margin-bottom: 0; }
+      /* …and when both are on screen they are literally one box: the
+         wrapper takes the green card and the two children give up
+         their own borders, so "This script is already installed" and
+         the table of copies read as one statement rather than two
+         stacked cards in the same colour. Only the preview's installed
+         case sets `merged` (renderInstalledBanner); a warning banner
+         raised alongside keeps its own amber box inside. */
+      #status-box.merged {
+        border: 1px solid #b9d4b1;
+        background: #dbecd6;
+        border-radius: 6px;
+        padding: 10px 14px;
+        margin: 0 0 10px;
+      }
+      #status-box.merged .banner.installed {
+        border: 0;
+        background: none;
+        padding: 0;
+        margin: 0;
+        border-radius: 0;
+      }
+      /* The blank line between the banner's one line and the first row
+         of the table is this margin — a preview's panel draws no
+         heading of its own, so nothing else separates them. */
+      #status-box.merged #other-versions {
+        border: 0;
+        background: none;
+        padding: 0;
+        margin: 14px 0 0;
+      }
+      /* `@keyframes sm-spin` is in styles.css, shared with the dialog
+         spinner and the glyph buttons' spin state. */
+      .busy-spinner { display: inline-block; width: 12px; height: 12px; margin-left: -0.2em; border: 2px solid #ccc; border-top-color: #555; border-radius: 50%; animation: sm-spin 0.7s linear infinite; box-sizing: border-box; }
+      /* The "loaded from local disk" chip, worn by a code tab whose
+         body came off local disk rather than from the URL its
+         declaration names. Loud enough to notice without hovering,
+         which is the whole reason that fact isn't left to the
+         tooltip. */
+      .tab-mark {
+        white-space: nowrap;
+        padding: 0 0.4em;
+        border-radius: 3px;
+        background: #d97706;
+        color: #fff;
+        font-size: 10px;
+        font-weight: 600;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+      /* Details panel: the header fields worth surfacing (when a
+         metadata block is present) plus the resolved Collection /
+         Location / Size / Status rows. Cleared via :empty when there's
+         no script. */
+      #header-summary {
+        margin: 0 0 11px;
+        padding: 8px 11px;
+        border: 1px solid #ddd;
+        border-radius: 4px;
+        background: #f5f7fa;
+      }
+      #header-summary:empty { display: none; }
+      #header-summary dl {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        column-gap: 0.8em;
+        row-gap: 0.25em;
+        margin: 0;
+      }
+      #header-summary dt {
+        font-weight: 600;
+        color: #555;
+      }
+      #header-summary dd {
+        margin: 0;
+        /* Slash-aware wrap for any long URL/path that lands in a
+           dd value (Location, Match, Exclude patterns, …). */
+        overflow-wrap: anywhere;
+        word-break: normal;
+      }
+      /* An upstream copy that's ahead of the one we run — same amber as
+         the OUTDATED status this row is the detail behind. Only the
+         "newer" direction is highlighted; running ahead of the published
+         version is normal for a local edit. */
+      #header-summary dd.version-newer {
+        color: #b67200;
+        font-weight: 600;
+      }
+      #header-summary ul {
+        margin: 0;
+        padding-left: 1.1em;
+      }
+      /* The "(N more)" / "(show fewer)" bullet that folds a long list
+         (see `bulletList` in script-details.ts). A button styled as
+         text: muted like the row labels so it reads as an aside, not an
+         item, with an underline on hover to say it's clickable. */
+      .list-fold { list-style: none; }
+      .list-fold-toggle {
+        all: unset;
+        cursor: pointer;
+        color: #555;
+        font: inherit;
+      }
+      .list-fold-toggle:hover { text-decoration: underline; }
+      .list-fold-toggle:focus-visible { outline: 2px solid #4a90e2; outline-offset: 1px; }
+      /* Network access: the "Declared / Undeclared in @connect:" line
+         above each of its lists, muted like the row labels. */
+      .list-heading { color: #555; }
+      /* Network access: a prompt answer and its Reset button
+         (`addConnect` in script-details.ts). A short button, so the row
+         keeps the height of its neighbours. */
+      .connect-answer { display: inline-flex; align-items: center; gap: 0.25em; }
+      .connect-answer button { height: 20px; padding: 0 7px; margin-left: 0.4em; font-size: 0.9em; }
+      /* Match and Network access rows: each value is led by its
+         site's favicon (a globe when it names no site), between the
+         bullet and the URL. The slot is a flex item so a wrapping pattern's
+         continuation lines don't tuck under the icon. */
+      .pattern-cell {
+        display: inline-flex;
+        align-items: baseline;
+        gap: 0.4em;
+        max-width: 100%;
+      }
+      /* The text is the flex item that shrinks; without this a long
+         pattern would push the cell wider instead of wrapping. */
+      .pattern-cell > :not(.pattern-icon) { min-width: 0; }
+      .pattern-icon {
+        display: inline-flex;
+        width: 16px;
+        height: 16px;
+        flex: 0 0 auto;
+        /* Centred on the line rather than sat on the baseline, which
+           left the square hanging low beside the pattern text. */
+        align-self: center;
+      }
+      /* Location row: path text + a square copy-icon button to its
+         right. min-width:0 lets long paths shrink and wrap rather
+         than blow out the grid column. */
+      .filename-cell {
+        display: flex;
+        align-items: center;
+        gap: 0.4em;
+        min-width: 0;
+      }
+      .filename-text {
+        /* Slash-aware wrap; see h1 above. */
+        overflow-wrap: anywhere;
+        word-break: normal;
+        min-width: 0;
+      }
+      /* Local overrides row: one entry per overridden `@require` /
+         `@resource`. Same flex shape as the Location cell — it's the
+         same kind of value (a path plus its copy button). */
+      .local-override-cell {
+        display: flex;
+        align-items: center;
+        gap: 0.4em;
+        min-width: 0;
+      }
+      /* The `@require` / `@resource` tag that says which kind of
+         declaration this entry stood in for. Muted and monospace: it's
+         a label on the path beside it, not the value. */
+      .local-override-kind {
+        flex: none;
+        color: #777;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        font-size: 11px;
+      }
+      .local-override-path {
+        /* Slash-aware wrap; see h1 above. */
+        overflow-wrap: anywhere;
+        word-break: normal;
+        min-width: 0;
+      }
+      /* Anchors in the details panel (Match patterns, Location)
+         read as plain text by default; underline only on hover so
+         the rows stay calm. The bubble is excluded so its `color:#fff`
+         survives — its hover affordance is the opacity dip below. */
+      #header-summary dd a:not(.collection-type-bubble) { color: inherit; text-decoration: none; }
+      #header-summary dd a:not(.collection-type-bubble):hover { text-decoration: underline; }
+      /* Anchors inside the highlighted code block. Inherit Prism's
+         token color (comment-grey, string-green, etc.) so the code
+         box keeps reading as code; only the hover underline signals
+         clickability. */
+      pre.code-box a.code-link { color: inherit; text-decoration: none; }
+      pre.code-box a.code-link:hover { text-decoration: underline; }
+      /* `.log-id-cell` deliberately has no rules: the log ID reads as
+         regular text like every other value in the panel. It's a
+         filename, not code, and it was the only monospace row. The
+         class stays as a hook for finding the cell. Wrapping comes from
+         the `dd`'s own slash-aware rule. */
+      /* ---- "Other versions" panel (src/extension/related-versions.ts) ----
+         Sits at the top of the page, under the title and above the
+         controls row: which copy you are looking at comes before
+         anything that acts on it. Same card shape as #header-summary
+         further down, but a green ground rather than that panel's
+         grey — this is the one that carries live controls, so it has
+         to read as a different kind of thing at a glance. Empty when
+         nothing relates, and hidden by the :empty rule rather than a
+         `hidden` attribute the renderer would have to manage. */
+      #other-versions {
+        margin: 0 0 11px;
+        padding: 8px 11px;
+        border: 1px solid #b9d4b1;
+        border-radius: 4px;
+        background: #dbecd6;
+      }
+      #other-versions:empty { display: none; }
+      /* Heading line: the title, and the fold control pushed to the
+         far corner. The gap below belongs to the line rather than to
+         the <h2>, so a folded panel is exactly one line tall with no
+         trailing space under it. */
+      .versions-head {
+        display: flex;
+        align-items: baseline;
+        justify-content: space-between;
+        gap: 8px;
+        margin: 0 0 8px;
+      }
+      .versions-head.collapsed { margin: 0; }
+      /* …except when a failure line follows the folded heading: the two
+         are the whole panel then, and they still need a gap. */
+      .versions-head.collapsed + .versions-message { margin-top: 8px; }
+      #other-versions h2 {
+        font-size: 1.1em;
+        font-weight: 650;
+        color: #333;
+        line-height: 18px;
+        margin: 0;
+      }
+      /* A bare triangle, quiet until pointed at: it sits above the
+         panel's own controls and must not compete with them. Padded out
+         to a real target — it is the panel's only fold affordance, and
+         the glyph itself is a few pixels wide. */
+      .versions-collapse {
+        flex: none;
+        /* Its own height: this is a small inline affordance inside the
+           panel heading, not a control in a row of buttons, so the
+           shared button height would make it loom over the heading. */
+        height: 18px;
+        border: 0;
+        border-radius: 3px;
+        background: none;
+        padding: 0 6px;
+        font-size: 12px;
+        line-height: 18px;
+        color: #4a6a44;
+        cursor: pointer;
+      }
+      .versions-collapse:hover { background: #cbe3c5; color: #223; }
+      /* Pressed is a shade past hover, the same direction of travel
+         as every other button in the extension (styles.css). */
+      .versions-collapse:active { background: #b8d6b1; color: #223; }
+      /* A bare glyph has no shape of its own to show focus with — and
+         this is the control the fold hands focus back to. */
+      .versions-collapse:focus-visible { outline: 2px solid #4a90e2; outline-offset: 1px; }
+      .versions-section-heading {
+        font-size: 1em;
+        font-weight: 600;
+        color: #444;
+        line-height: 16px;
+        margin: 13px 0 4px;
+      }
+      .versions-section-heading:first-of-type { margin-top: 0; }
+      /* The parenthesized gloss names which match produced the rows
+         below. It belongs to the heading, so it lives inside the
+         <h3> — but at body weight, or the two sections would read as
+         equally emphatic. */
+      .versions-heading-gloss {
+        font-weight: 400;
+        color: #777;
+        font-size: 12px;
+      }
+      /* A heading row that is there for a screen reader and not for the
+         eye — the install-offer section's, whose labels the section
+         above it has already shown (see `makeTable`). Taken out of
+         flow rather than `display: none`, which drops it from the
+         accessibility tree along with the page. */
+      .versions-table thead.visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+      /* `fixed` + the <colgroup> the renderer emits is what keeps the
+         two sections' columns aligned with each other: without it each
+         <table> sizes its own columns from its own content and the
+         panel reads as two unrelated grids. */
+      /* Whole-px vertical metrics in this panel, and `separate` borders
+         rather than `collapse` (a collapsed border is split half into each
+         adjacent cell, landing rows on half pixels) — see
+         docs/architecture.md, "Extension-page styling". */
+      .versions-table {
+        width: 100%;
+        border-collapse: separate;
+        border-spacing: 0;
+        table-layout: fixed;
+      }
+      /* Status, Version, Content, and the actions column are sized to
+         their own widest content by `fitColumns` (related-versions.ts),
+         which writes the custom properties below onto the panel. The
+         fallbacks are what the first paint uses and what a measurement
+         of a hidden panel falls back to: wide enough for REFRESH
+         FAILED and a date-shaped @version. Everything left over goes to
+         Location, which is the column that can always use it. */
+      .versions-table col.col-enabled  { width: 2.2em; }
+      .versions-table col.col-collection { width: 26%; }
+      .versions-table col.col-status   { width: var(--w-col-status, 8em); }
+      .versions-table col.col-version  { width: var(--w-col-version, 7em); }
+      .versions-table col.col-compare  { width: var(--w-col-compare, 7em); }
+      .versions-table col.col-actions  { width: var(--w-col-actions, 6em); }
+      .versions-table col.col-remove   { width: 2.4em; }
+      /* Same #444 as the section heading above the table: the panel's
+         two kinds of heading are both headings, and at 11px uppercase
+         a lighter grey reads as faded rather than as secondary. */
+      .versions-table th {
+        text-align: left;
+        font-size: 11px;
+        font-weight: 600;
+        color: #444;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+        padding: 0 6px 2px 0;
+        border-bottom: 1px solid #b9d4b1;
+      }
+      .versions-table td {
+        padding: 5px 7px 5px 0;
+        line-height: 16px;
+        vertical-align: top;
+        border-bottom: 1px solid #c9e0c2;
+      }
+      .versions-table tr:last-child td { border-bottom-color: transparent; }
+      .versions-table .col-actions {
+        text-align: right;
+        padding-right: 0;
+        white-space: nowrap;
+      }
+      .versions-table th.col-actions button { font-size: 12px; }
+      /* Type styling for the body cells is scoped to `td`, here and in
+         the Location rule below. A column class sits on the `th` too,
+         and `.versions-table .col-x` outranks `.versions-table th`, so
+         an unscoped `color` / `font-size` here leaks into that
+         column's heading — which is how COLLECTION, LOCATION, STATUS
+         and VERSION ended up drawn in three combinations of size and
+         grey. The heading row is one row and reads as one. */
+      .versions-table td.col-version {
+        color: #555;
+        font-variant-numeric: tabular-nums;
+        overflow-wrap: anywhere;
+      }
+      /* A wider right gutter than the other columns get: these two are
+         measured to their content, so without it the widest status
+         would sit hard against the version beside it. On the `th` as
+         well, so heading and values share an edge, and inside the
+         measured width, so the gutter survives the fit. */
+      .versions-table .col-status,
+      .versions-table .col-version,
+      .versions-table .col-compare { padding-right: 1.1em; }
+      /* Status reuses the `status-*` colours the controls row and the
+         collections page already use, so one verdict is one colour
+         everywhere, and styles its link as status text — see
+         docs/script-identity.md for why the colour, not the underline,
+         is what has to carry. */
+      .versions-table td.col-status { font-size: 12px; }
+      .versions-table .col-status a {
+        font-weight: 600;
+        text-decoration: none;
+        white-space: nowrap;
+      }
+      .versions-table .col-status a:hover { text-decoration: underline; }
+      /* Compare is a verdict like Status and dressed like one. Green is
+         Status's own OK. DIFFERENT is blue, not the `modified` chip's
+         teal: on this panel's green card teal and green are near twins
+         down a column, and the two words have to be told apart at a
+         glance. BASE (NEW on a preview) marks the row the rest are
+         compared against and carries no colour — it is a label, not a
+         verdict. */
+      .versions-table td.col-compare { font-size: 12px; white-space: nowrap; }
+      /* Flush left, all of it: the heading, the words, and the DIFF
+         button's EDGE — not its label — start on the column's line. */
+      .versions-table td.col-compare span { font-weight: 600; }
+      .versions-table .content-same { color: #166534; }
+      .versions-table .content-different { color: #1d4ed8; }
+      /* DIFF: the verdict as a button, since it opens the compare page.
+         The shared button surface (styles.css), in DIFFERENT's blue and
+         the column's weight, sized like the row's other buttons. */
+      .versions-table button.content-diff {
+        padding: 0 0.6em;
+        font-size: 12px;
+        font-weight: 600;
+        color: #1d4ed8;
+      }
+      .versions-table .content-base { color: #555; }
+      /* Slash-aware wrap; see the h1 rule above. `min-width: 0` lets
+         a long URL shrink its column rather than widening the table. */
+      .versions-table .col-collection,
+      .versions-table .col-location {
+        overflow-wrap: anywhere;
+        word-break: normal;
+        min-width: 0;
+      }
+      .versions-table td.col-location { font-size: 12px; color: #555; }
+      .versions-collection-name {
+        color: inherit;
+        text-decoration: none;
+        font-weight: 500;
+      }
+      .versions-collection-name:hover { text-decoration: underline; }
+      .versions-table .col-location a { color: inherit; text-decoration: none; }
+      .versions-table .col-location a:hover { text-decoration: underline; }
+      /* A deeper tint of the panel's own green, not the blue used
+         elsewhere for "current" — on this ground a blue row would read
+         as a different kind of highlight rather than as emphasis. */
+      .versions-table tr.is-current { background: #c3e0ba; }
+      /* Rows that select their copy when clicked anywhere that isn't a
+         control (installed mode only — see `versionRow`). The hover
+         tint stops short of the current row's, so "the row under the
+         pointer" and "the row you are on" stay distinguishable while
+         the pointer is over one of them. */
+      .versions-table tr.is-navigable { cursor: pointer; }
+      .versions-table tr.is-navigable:hover { background: #d3e8cb; }
+      /* The rows are the tab stops the Location links used to be, so
+         they need a ring of their own — the current row included: it
+         takes focus after a selection and on the Up/Down walk, even
+         though activating it does nothing. Inset, because an outline
+         drawn outside a table row is clipped by the row above it. */
+      .versions-table tr.is-navigable:focus-visible,
+      .versions-table tr.is-current:focus-visible {
+        outline: 2px solid #4a7f3d;
+        outline-offset: -2px;
+      }
+      .versions-current-marker { color: #666; }
+      .versions-this-page { font-weight: 700; color: #333; }
+      .versions-table tr.is-offer .versions-offer-text {
+        color: #888;
+        font-style: italic;
+      }
+      /* The install-offer row's controls, in the one cell that spans
+         everything left of Location (see `installRow`). One line —
+         "Install into <collection>" — reading the way the header
+         callout does, with the button next to the dropdown that
+         decides what it will do rather than out at the table's right
+         edge. The disabled-button explanation sits under the line. */
+      .versions-table td.col-install { padding-right: 10px; }
+      /* Button, connector and dropdown on one line. `min-width: 0` on
+         the select is what lets it give way to them instead of
+         overflowing the cell — a flex item's default floor is its
+         content width, and a long collection name is wider than two
+         columns. Chrome sizes the open list to its widest option, so
+         a name truncated here is still readable in the list. */
+      .install-offer-pick {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+      }
+      .install-offer-pick select { flex: 1 1 auto; min-width: 0; }
+      /* The recommended action in a preview that already has copies:
+         update one of them rather than install another. Set here
+         because the shared `.primary` bolding is scoped to the callout
+         and the action row. */
+      .versions-table td.col-actions button.primary { font-weight: 600; }
+      /* Not bold, for the same reason the header's Install isn't once
+         copies are listed (`showInstallCallout`): this row offers
+         ANOTHER copy alongside versions the user could update instead,
+         so it is an alternative, not the recommended move. The
+         emphasis is on the rows' Update buttons. */
+      .versions-table td.col-install button {
+        flex: none;
+        font: inherit;
+        padding: 0.35em 0.9em;
+        cursor: pointer;
+      }
+      /* Greyed by explicit colours, not by `opacity` — on this panel's
+         green ground a translucent button takes the green on and stops
+         reading as a disabled control at all. */
+      .versions-table td.col-install button:disabled {
+        cursor: not-allowed;
+        background: #ececec;
+        border-color: #c2c2c2;
+        color: #999;
+      }
+      /* Why Install is off: its own line under the sentence above, not
+         spliced into the middle of it. Empty — and so invisible —
+         otherwise. */
+      .install-offer-note {
+        margin-top: 5px;
+        font-size: 12px;
+        color: #666;
+        font-style: italic;
+      }
+      .versions-table .toggle {
+        display: inline-flex;
+        align-items: center;
+        cursor: pointer;
+      }
+      .versions-table .toggle input[type="checkbox"] { cursor: pointer; margin: 0; }
+      /* Same treatment as the controls-row toggle when the parent
+         collection is off: the box can't be clicked, so it must not look
+         clickable. */
+      .versions-table .toggle.toggle-disabled { cursor: not-allowed; opacity: 0.5; }
+      .versions-table .toggle.toggle-disabled input[type="checkbox"] { cursor: not-allowed; }
+      /* Trash can, in its own column hard against the table's right
+         edge. The button itself is `.icon-btn` in styles.css — the same
+         control as the refetch arrow beside it, which is what the two
+         looked like two different widgets before. Disabled (a script
+         inside a collection) keeps the button on screen, since the
+         column would otherwise look ragged with no clue why. */
+      .versions-table .col-remove {
+        text-align: right;
+        padding-right: 0;
+        white-space: nowrap;
+      }
+      /* A disabled row button (a script inside a collection, which the
+         collection's own removal takes) stays a button — dimmed, but
+         still a box with a border. Dropping the border left a bare
+         glyph floating on the panel's green, which read as an icon
+         rather than a control that happens to be unavailable. The
+         dimming is `.icon-btn:disabled` in styles.css. */
+      /* The panel reports its own action failures here rather than in
+         the page's `#message` bar — see related-versions.ts. */
+      .versions-message {
+        margin: 0 0 0.5em;
+        color: #b3261e;
+        font-size: 12px;
+      }
+      /* Narrow windows shed the Version column rather than letting
+         every cell wrap to an unreadable ribbon. It is the least
+         load-bearing: nothing acts on it, and the copies it
+         distinguishes are still distinguished by collection and location.
+         It stays in the DOM (hidden, not dropped) so nothing has to
+         re-render on resize.
+         Zeroing the <col> width alongside `display: none` on the
+         cells is what actually reclaims the space: under
+         `table-layout: fixed` the colgroup, not the cells, is what
+         sets column width.
+         Status does not shed either: it is the column that says
+         whether a copy is actually working, and its link is the only
+         route to that copy's log from here.
+         Location does NOT shed, though it used to. Its link is the
+         only way to reach another copy's page now that a preview with
+         several targets drops its header Open button in favour of this
+         table — hiding it would leave a narrow window with no route to
+         a copy at all. Wrapping a long path is the lesser cost. */
+      @media (max-width: 640px) {
+        .versions-table col.col-version { width: 0; }
+        .versions-table .col-version { display: none; }
+      }
+      /* Collection row layout. Grid layout so a long display name wraps
+         inside the middle column instead of dropping back to the row's
+         left edge. The bubble's own styling (color, padding, hover) is
+         in styles.css, the cross-page shared stylesheet. */
+      /* `minmax(0, max-content)` on the name, not `1fr`: a name that
+         fits keeps its natural width, so the Move button sits right
+         after it instead of being flung to the margin. A name too long
+         for the row fills the track, wraps inside it, and the button
+         ends up at the right edge — which is where it belongs once
+         there is no "right after the name" to sit at. */
+      .collection-cell {
+        display: grid;
+        grid-template-columns: max-content minmax(0, max-content) max-content;
+        column-gap: 0.5em;
+        align-items: baseline;
+        min-width: 0;
+      }
+      /* Move control: the Collection row's own button, in a column of
+         its own so a wrapping name never drags it down onto the last
+         wrapped line.
+         Its height is no longer its own business: every button takes
+         the shared height (styles.css), which is what keeps it level
+         with the versions table's row buttons now that those hold a
+         glyph. Only the padding is here. */
+      .collection-move { padding: 0 0.7em; }
+      /* `.copy-btn` (the square copy-to-clipboard button) is in
+         styles.css: the delete dialog uses it on every page. */
+      /* Tab strip above the code box: one tab per source file (main
+         script + each @require). Always rendered. The strip sits
+         entirely above the code box (no overlap, no negative margin
+         tricks) so the layout is robust against the body's flex
+         column constraints. */
+      /* The tab strip itself (`.tabs`, `.tab`) is shared with the
+         compare page — see styles.css. Only the chip's placement in a
+         tab is this page's own. */
+      /* Positioning only — the chip's own look is above. */
+      .tab-mark { margin-left: 0.5em; vertical-align: 1px; }
+      /* The code box fills the rest of the viewport and scrolls. The
+         padding/border give it a textbox-like look; tabindex makes it
+         keyboard-focusable so it scrolls with arrow keys. The
+         top-left rounding is dropped so the active tab meets the box
+         cleanly along that edge. margin-top:-1px lets the active tab's
+         transparent bottom border merge with the code box's top
+         border so the active tab visually "opens into" the box.
+         A tall details panel (a script with dozens of @match lines) would
+         otherwise squeeze the box to nothing. `--code-box-min` keeps a
+         useful number of lines visible and lets the PAGE scroll instead
+         — the one case where the viewer accepts a page-level scroll bar.
+         20 lines at Prism's line-height (1.5, set on the <code> by
+         vendor/prism/prism.css, so not ours to pin here) and this box's
+         13px font, plus its padding and border: the box is border-box
+         so the minimum is its outer height, and the Log pane below
+         shares it so switching tabs doesn't reflow. */
+      .page-main { --code-box-min: calc(20 * 1.5 * 13px + 2 * 0.8 * 13px + 2px); }
+      pre.code-box {
+        /* Basis 0: the box's own content must never size the page —
+           it scrolls inside the box. Its floor is the minimum below. */
+        flex: 1 1 0;
+        min-height: var(--code-box-min);
+        box-sizing: border-box;
+        margin: -1px 0 0;
+        overflow: auto;
+        border: 1px solid #ccc;
+        border-radius: 0 4px 4px 4px;
+        padding: 0.8em;
+        background: #fafafa;
+        font: 13px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      }
+      pre.code-box:focus { outline: 2px solid #4a90e2; outline-offset: -2px; }
+      /* Tinted band behind the `// ==UserScript== … // ==/UserScript==`
+         block. `display: block` lets the band span every header line;
+         the negative left/right margin (paired with matching padding)
+         extends the band out to the code-box's padding edges so it
+         reads as a full-width strip rather than a floating rectangle.
+         The grey paint lives on a ::before with z-index: -1 (rather
+         than `background:` on the span) so the line-highlight
+         overlay can sit at the same z-index and, by document order,
+         paint over the grey when a header line is highlighted. */
+      pre.code-box .token.userscript-header {
+        display: block;
+        position: relative;
+        margin: 0 -0.8em;
+        padding: 0 0.8em;
+      }
+      pre.code-box .token.userscript-header::before {
+        content: '';
+        position: absolute;
+        inset: 0;
+        background: #f0f0f0;
+        z-index: -1;
+      }
+      /* Log pane mirrors the code box's outer dimensions so swapping
+         between a code tab and the Log tab doesn't reflow the page.
+         Same border/margin trick as .code-box so the active Log tab's
+         bottom border merges with the pane's top border. */
+      .log-pane {
+        flex: 1 1 0;
+        min-height: var(--code-box-min);
+        box-sizing: border-box;
+        margin: -1px 0 0;
+        overflow: auto;
+        border: 1px solid #ccc;
+        border-radius: 0 4px 4px 4px;
+        background: #fafafa;
+      }
+      .log-pane[hidden] { display: none; }
+      .log-pane:focus { outline: 2px solid #4a90e2; outline-offset: -2px; }
+      .log-pane table {
+        width: 100%;
+        border-collapse: collapse;
+        font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+      }
+      .log-pane th, .log-pane td {
+        padding: 0.35em 0.6em;
+        text-align: left;
+        vertical-align: top;
+        border-bottom: 1px solid #eee;
+      }
+      .log-pane th {
+        background: #f0f0f0;
+        font-weight: 600;
+        color: #555;
+        position: sticky;
+        top: 0;
+        z-index: 1;
+      }
+      .log-pane td.log-ts { white-space: nowrap; color: #555; }
+      .log-pane td.log-source { white-space: nowrap; color: #555; }
+      .log-pane td.log-msg { white-space: pre-wrap; word-break: break-word; }
+      .log-pane td.log-level { white-space: nowrap; }
+      .log-pane .log-level-badge {
+        display: inline-block;
+        padding: 0 0.45em;
+        border-radius: 3px;
+        font-weight: 600;
+        font-size: 11px;
+        text-transform: uppercase;
+        letter-spacing: 0.04em;
+      }
+      .log-pane .log-level-info    { background: #e7eef7; color: #345; }
+      .log-pane .log-level-warning { background: #fdf1c5; color: #6b4f00; }
+      .log-pane .log-level-error   { background: #fbe2e2; color: #8a1d1d; }
+      /* State-carrying entries (see `LogEntry.state`): the same hues the
+         Status badge uses for that state, on a badge background. */
+      .log-pane .log-state-ok             { background: #dcfce7; color: #166534; }
+      .log-pane .log-state-invalid,
+      .log-pane .log-state-rejected       { background: #fbe2e2; color: #8a1d1d; }
+      .log-pane .log-state-outdated       { background: #fdf1c5; color: #6b4f00; }
+      .log-pane .log-state-refresh-failed { background: #ffedd5; color: #c2410c; }
+      .log-empty {
+        padding: 1em;
+        color: #777;
+        font: 13px system-ui, sans-serif;
+      }
+      .log-toolbar {
+        display: flex;
+        justify-content: flex-end;
+        gap: 0.4em;
+        padding: 0.4em 0.6em;
+        border-bottom: 1px solid #eee;
+        position: sticky;
+        top: 0;
+        background: #fafafa;
+        z-index: 2;
+      }
+      .log-toolbar button {
+        font: inherit;
+        padding: 0.2em 0.7em;
+        cursor: pointer;
+      }
+      /* Save/Copy are disabled while the log is empty — there is
+         nothing to hand out but a header row. */
+      .log-toolbar button:disabled {
+        cursor: default;
+        opacity: 0.5;
+      }
+      /* Clickable `sourcemonkey://…:L:C` refs inside log messages.
+         The log table renders with a monospace font, so a regular
+         blue underline reads clearly without disrupting the column. */
+      .log-pane .log-stack-link {
+        color: #1d4ed8;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+      .log-pane .log-stack-link:hover { color: #2563eb; }
+      /* The `(in <file>, line N, column M)` part of a diagnostic we
+         derived ourselves — a header problem, a bad `@require`, a
+         syntax error. Appears in three places with three different
+         surrounding colours (the red `.message` bar, an amber banner,
+         a Log row), so it inherits the surrounding weight and marks
+         itself only with an underline and the monospace face the file
+         name deserves. `color: inherit` keeps the red error bar red
+         rather than half red and half blue. */
+      .diagnostic-link {
+        color: inherit;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+        text-decoration: underline;
+        cursor: pointer;
+      }
+      .diagnostic-link:hover { text-decoration-thickness: 2px; }
+      /* The line-numbers plugin makes <code> position: relative but
+         leaves it inline; without an explicit display:block the
+         absolute .line-flash overlay below sizes to the line box
+         instead of the full code area. `z-index: 0` turns <code>
+         into a stacking context so the highlight overlay can sit
+         BEHIND the text via z-index: -1 without escaping <code>. */
+      pre.code-box.line-numbers > code { display: block; z-index: 0; }
+      /* Highlight overlay used by the log-message link click handler
+         and the clickable line-number gutter. Sits BEHIND the
+         syntax-highlighted text so the line stays maximally
+         readable. Persists until the user highlights a different
+         line or switches to a different tab (tab swap replaces
+         <code>'s textContent and the overlay with it). */
+      .line-flash {
+        position: absolute;
+        /* Extend by 0.8em on each side so the highlight covers the
+           full visual extent of any line — including the userscript
+           header band, which uses `margin: 0 -0.8em` to reach the
+           code-box's padding edges. */
+        left: -0.8em;
+        right: -0.8em;
+        pointer-events: none;
+        background: #fff3a6;
+        z-index: -1;
+      }
+      /* Vertical accent bar inside .line-flash. Rendered only when
+         the highlight came from a stack ref that carried a column;
+         inline `left:` is set to (col - 1) * char width so the bar
+         points at the reported character position. */
+      .line-flash-col-bar {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: #f5b500;
+        pointer-events: none;
+      }
+      /* Make the line-numbers gutter behave like a clickable strip:
+         each line number highlights its row when clicked. The plugin
+         renders the numbers via `::before` on the span, so we set
+         pointer-events: auto on the span (default is `none` on the
+         parent rows) and add a hover affordance. */
+      .line-numbers .line-numbers-rows.clickable {
+        pointer-events: auto;
+      }
+      .line-numbers .line-numbers-rows.clickable > span {
+        cursor: pointer;
+      }
+      .line-numbers .line-numbers-rows.clickable > span:hover::before {
+        color: #1d4ed8;
+        font-weight: 600;
+      }
+    </style>
+  </head>
+  <body>
+    <!-- Shared glyph sprite: the one copy of every inline SVG glyph in the
+     extension. scripts/build.mjs inlines it into each page wherever the
+     page writes an `#include glyph-sprite` marker comment. (Spelling
+     that marker out here would be nice, but its own closing `--` plus
+     `>` would end THIS comment and spill the rest onto the page.)
+     One source of truth: the markup used to be copy-pasted into each
+     page's HTML, which is how two pages end up with glyphs that have
+     quietly drifted apart.
+     Each symbol is defined once per page and referenced by a `use`
+     element, so a hundred rows share one copy of the path data instead
+     of inlining it per row.
+       #sm-globe      favicon placeholder until a site icon loads, and
+                      the permanent icon for a script with no resolvable
+                      origin (src/extension/site-icon.ts; styling on
+                      `.site-icon-globe`).
+       #sm-trash      remove SourceMonkey's record of a script.
+       #sm-trash-file delete the script FILE from disk — the same can,
+                      badged with a disk. Both painted by
+                      src/extension/delete-icon.ts, which explains the pair.
+                      The can is drawn ~19% smaller than #sm-trash — its
+                      own inner scale(.9) inside the normalizing
+                      wrapper's scale(.9) — so the badge has a corner to
+                      sit in without swallowing the can. Deliberate: the two appear in the same
+                      column in the "Other versions" panel, and the
+                      badged one has to stay a can at 15px.
+       #sm-copy       the viewer's "copy this to the clipboard" button,
+       #sm-check      and the checkmark it flashes on success
+                      (src/extension/copy-button.ts).
+       #sm-refresh    refetch a collection, a script, or one row of the
+                      "Other versions" table. Its busy state is this
+                      same arc spinning (`.btn-glyph.spinning`), so the
+                      button never changes shape mid-refresh.
+       #sm-gear       open a collection's rename / options dialog.
+       #sm-open       open a location in a new tab (the collection
+                      dialog's button beside its location box).
+       #sm-swap       the compare page's "swap the two sides" button:
+                      two arrows, one each way, the same width so their
+                      ends line up.
+     Colour comes from `currentColor`, so a button's own `color` (and
+     its hover) drives the glyph.
+     OPTICAL SIZING — read before editing a path or a stroke width.
+     Identical 16px boxes do not make icons look the same size; the ink
+     inside them has to match too. As drawn, these ranged from 18 to
+     23.3 units of 24, and the gear read ~22% larger than the arrow. So
+     a glyph that needed resizing is wrapped in
+       <g transform="translate(12 12) scale(k) translate(-12 -12)">
+     and its `stroke-width` is DIVIDED by the same k. Consequences:
+     - The number in the file is not the number that renders. Every
+       glyph here strokes at 1.75 units once its wrapper is applied
+       (1.9/... , 1.95/.9, 1.667*1.05, 1.825*.959). Change a stroke
+       width and you break that unless you change k with it.
+     - #sm-refresh translates by -13, not -12: Feather's rotate-cw is
+       drawn a unit right of centre, and this puts it back. It is not
+       a typo.
+     - #sm-copy and #sm-check are deliberately outside this: they
+       stroke at 2.0 in the 14px copy button. That button sits beside
+       the 1.75 set only in the collection dialog, next to #sm-open,
+       where the smaller box evens out the heavier stroke. -->
+<svg width="0" height="0" style="position:absolute" aria-hidden="true">
+<symbol id="sm-globe" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"></circle><path d="M2 12h20"></path><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"></path></symbol>
+<symbol id="sm-trash" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6h17"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path><path d="M10 10.5v7"></path><path d="M14 10.5v7"></path></symbol>
+<symbol id="sm-trash-file" viewBox="0 0 24 24"><g transform="translate(12 12) scale(.9) translate(-12 -12)"><mask id="sm-trash-file-cut" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24"><rect width="24" height="24" fill="#fff"></rect><circle cx="19.6" cy="19.6" r="5.2" fill="#000"></circle></mask><g mask="url(#sm-trash-file-cut)" transform="translate(-.7 -1.5) scale(.9)" fill="none" stroke="currentColor" stroke-width="2.167" stroke-linecap="round" stroke-linejoin="round"><path d="M3.5 6h17"></path><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M9 6V4a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2"></path><path d="M10 10.5v7"></path><path d="M14 10.5v7"></path></g><g transform="translate(14.53 14.36) scale(.422)" fill="none" stroke="currentColor" stroke-width="4.611" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"></ellipse><path d="M3 5v14c0 1.66 4.03 3 9 3s9-1.34 9-3V5"></path></g></g></symbol>
+<symbol id="sm-copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></symbol>
+<symbol id="sm-check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></symbol>
+<symbol id="sm-refresh" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.667" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(12 12) scale(1.05) translate(-13 -12)"><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path><polyline points="23 4 23 10 17 10"></polyline></g></symbol>
+<symbol id="sm-swap" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M3 7.5h18"></path><path d="M16.5 3l4.5 4.5-4.5 4.5"></path><path d="M21 16.5H3"></path><path d="M7.5 12L3 16.5 7.5 21"></path></symbol>
+<symbol id="sm-gear" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.825" stroke-linecap="round" stroke-linejoin="round"><g transform="translate(12 12) scale(.959) translate(-12 -12)"><circle cx="12" cy="12" r="3.1"></circle><path d="M19.4 14.6a1.6 1.6 0 0 0 .32 1.77l.06.06a1.95 1.95 0 1 1-2.76 2.76l-.06-.06a1.6 1.6 0 0 0-1.77-.32 1.6 1.6 0 0 0-.97 1.47V21a1.95 1.95 0 1 1-3.9 0v-.1a1.6 1.6 0 0 0-1.05-1.47 1.6 1.6 0 0 0-1.77.32l-.06.06a1.95 1.95 0 1 1-2.76-2.76l.06-.06a1.6 1.6 0 0 0 .32-1.77 1.6 1.6 0 0 0-1.47-.97H3a1.95 1.95 0 1 1 0-3.9h.1a1.6 1.6 0 0 0 1.47-1.05 1.6 1.6 0 0 0-.32-1.77l-.06-.06a1.95 1.95 0 1 1 2.76-2.76l.06.06a1.6 1.6 0 0 0 1.77.32H9a1.6 1.6 0 0 0 .97-1.47V3a1.95 1.95 0 1 1 3.9 0v.1a1.6 1.6 0 0 0 .97 1.47 1.6 1.6 0 0 0 1.77-.32l.06-.06a1.95 1.95 0 1 1 2.76 2.76l-.06.06a1.6 1.6 0 0 0-.32 1.77V9a1.6 1.6 0 0 0 1.47.97H21a1.95 1.95 0 1 1 0 3.9h-.1a1.6 1.6 0 0 0-1.47.97z"></path></g></symbol>
+<symbol id="sm-open" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><path d="M10 14L21 3"></path></symbol>
+</svg>
+    <header class="page-header">
+      <div class="page-header-inner">
+        <a class="page-home page-icon-link" href="collections.html" target="_blank"
+           rel="noopener" tabindex="-1" aria-hidden="true">
+          <img class="page-icon" src="icons/icon-48.png" alt="" />
+        </a>
+        <!-- `tabindex="-1"` so in-page navigation between copies can move
+             focus here: the heading, the details, and the code all change
+             with no document load for a screen reader to announce. Not
+             reachable by Tab, and it draws no focus ring (see the h1 rule
+             in the stylesheet above). -->
+        <!-- The brand run ships in the markup, so the bar reads
+             "SourceMonkey |" from the document's own first paint rather
+             than after any script has run. Exactly what
+             `headingPrefixEl(INSTALLED_HEADING)` builds (src/extension/page-heading.ts),
+             so when the heading is rendered for real this part of it does
+             not move: the installed page repaints the same link and
+             separator, and the install page appends its "Install |"
+             after them.
+             The product name is a link home to the collections page.
+             It carries a real href and `target` so a click before
+             `userscript.js` has run still opens a new tab; once the
+             page's delegated handler is installed (installHomeLinkHandler,
+             src/extension/page-links.ts) the click goes to the NAMED collections
+             tab instead. -->
+        <h1 id="filename" tabindex="-1"><a class="heading-prefix brand page-home" href="collections.html"
+             target="_blank" rel="noopener" title="Open the collections page">SourceMonkey</a><span class="heading-prefix brand"> | </span></h1>
+      </div>
+    </header>
+    <div class="page-main">
+    <!-- Banner + versions panel, directly under the title and ABOVE the
+         controls row: which copies of this script exist is the first
+         thing either mode has to answer, and every control below acts
+         on the one copy this page is showing. In the preview's
+         "already installed" case the two are merged into one box (the
+         `merged` class) — see `renderInstalledBanner`. -->
+    <div id="status-box">
+      <!-- In preview mode (`?preview=<url>`) the banner says what this
+           file is relative to what's installed, and the action row asks
+           the install / update question; the action row stays hidden for
+           an installed script, which uses the controls row below. The
+           banner slot is shared with the file-access banner, which either
+           mode can raise when a local read fails. -->
+      <div id="banner-slot"></div>
+      <div id="other-versions"></div>
+    </div>
+    <div id="meta-row" class="meta-row" hidden>
+      <label id="enable-label" class="toggle" title="Enable this script">
+        <input id="enable-checkbox" type="checkbox" />
+        <span>Enabled</span>
+      </label>
+      <!-- Local copy… and the delete trash can, filled per render
+           (`makeScriptActions`). Empty until the first one, and the
+           row it is in stays hidden until then. -->
+      <span id="meta-actions" class="meta-actions"></span>
+      <!-- Icon-only; the glyph is painted by src/extension/userscript.ts
+           (setGlyphButton), which is safe to leave empty here
+           because #meta-row ships `hidden` and is only revealed
+           once the script has loaded. -->
+      <button id="refresh-btn" type="button"></button>
+    </div>
+    <!-- Install stays hidden until the fetch has landed and we know
+         whether this file is installable and not already installed,
+         so it is never clickable without a handler behind it. The
+         dropdown is filled per preview (see `showInstallCallout`); it
+         is absent for a location with no single-file spelling, where
+         Install adds a whole collection instead. -->
+    <div id="install-callout" class="install-callout" hidden>
+      <button id="install-btn" class="primary" type="button">Install</button>
+      <label id="install-target-label" for="install-target">into</label>
+      <span id="install-target-slot"></span>
+    </div>
+    <div id="preview-actions" class="actions" hidden>
+      <button id="open-btn" type="button" hidden>Open installed script</button>
+      <button id="continue-btn" class="primary" type="button" hidden
+              title="Open this location in the browser, without previewing it">Continue to page</button>
+      <button id="cancel-btn" type="button">Cancel</button>
+      <button id="view-source-btn" class="spacer" type="button" title="Open the unprocessed file in a new tab">View raw source</button>
+    </div>
+    <p id="message" class="message"></p>
+    <div id="header-summary"></div>
+    <div id="tabs" class="tabs" role="tablist" hidden></div>
+    <pre id="code-pane" class="code-box line-numbers" tabindex="0"><code id="content" class="language-javascript"></code></pre>
+    <div id="log-pane" class="log-pane" tabindex="0" role="tabpanel" hidden></div>
+    </div>
+    <!-- `defer`, not blocking: a synchronous script here stalls parsing,
+         and everything deferred — page-heading.js included — has to wait
+         for parsing to finish. That put the header bar's name a couple
+         of frames behind the page's first paint. Deferred scripts still
+         run in document order, so Prism is still defined before
+         userscript.js evaluates.
+         `data-manual` stands Prism's own automatic highlightAll() pass
+         down. Nothing wanted it — code-tabs.ts highlights the code box
+         itself, once it has code to highlight — and deferring changed
+         WHEN that pass fires (readyState is no longer `loading`, so
+         Prism schedules it on a frame instead of DOMContentLoaded). A
+         pass that rebuilt the block from its textContent would drop the
+         <a> elements code-links.ts puts in. -->
+    <script src="vendor/prism/prism.js" data-manual defer></script>
+    <script src="vendor/prism/prism-line-numbers.js" defer></script>
+    <script src="extension/userscript.js" type="module"></script>
+  </body>
+</html>