From 1ec5e80a73a69316cdb5506b4945c5f988ed40f0 Mon Sep 17 00:00:00 2001
From: mwiegand <martin.wiegand@seibert.group>
Date: Sat, 16 May 2026 19:00:48 +0200
Subject: [PATCH] plan(textarea-editor): use curl-based vendoring
 (subagent-executable)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The original Task 1 instructed a human to click through prismjs.com's
configurator UI — a step a subagent can't perform. Replace with direct
curl from jsdelivr for both Prism components (core + clike + bash
concatenated) and CodeJar, plus a sed-based ESM-export strip and a
window-global shim. Updates the vendor README template accordingly.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../plans/2026-05-16-textarea-code-editor.md  | 88 +++++++++++++------
 1 file changed, 62 insertions(+), 26 deletions(-)

diff --git a/docs/superpowers/plans/2026-05-16-textarea-code-editor.md b/docs/superpowers/plans/2026-05-16-textarea-code-editor.md
index 967cf18..dbaa644 100644
--- a/docs/superpowers/plans/2026-05-16-textarea-code-editor.md
+++ b/docs/superpowers/plans/2026-05-16-textarea-code-editor.md
@@ -51,40 +51,75 @@
 - Create: `l4d2web/l4d2web/static/vendor/codejar.js`
 - Create: `l4d2web/l4d2web/static/vendor/README.md`
 
-- [ ] **Step 1: Build the Prism custom bundle**
+- [ ] **Step 1: Assemble the Prism bundle via curl**
 
-Open `https://prismjs.com/download.html#themes=prism&languages=clike+bash` in a browser. Set theme = "Default". Tick languages: `clike` (Bash depends on it), `bash`. Leave all plugins unchecked. Click "Download JS" and "Download CSS". Save them as `l4d2web/l4d2web/static/vendor/prism.js` and `l4d2web/l4d2web/static/vendor/prism.css`.
-
-Verify the version string:
-
-```bash
-head -1 l4d2web/l4d2web/static/vendor/prism.js | grep -oE 'v[0-9.]+'
-```
-
-Expected: a version like `v1.29.0`. Note it for the README.
-
-- [ ] **Step 2: Download CodeJar**
+Prism ships per-component files at `cdn.jsdelivr.net/npm/prismjs@1.29.0/`. We concatenate three components — `core` (required), `clike` (bash depends on it), `bash` — into a single self-contained `prism.js`. Theme CSS is grabbed separately.
 
 ```bash
 mkdir -p l4d2web/l4d2web/static/vendor
-curl -fsSL -o l4d2web/l4d2web/static/vendor/codejar.js \
-  https://raw.githubusercontent.com/antonmedv/codejar/v4.0.0/codejar.js
+VER=1.29.0
+BASE=https://cdn.jsdelivr.net/npm/prismjs@${VER}
+
+# Concatenate core + clike + bash into one file, in the required load order.
+{
+  echo "/* Prism v${VER} — core + clike + bash, assembled from ${BASE}/components/ */"
+  curl -fsSL "${BASE}/components/prism-core.min.js"
+  echo  # newline separator between components
+  curl -fsSL "${BASE}/components/prism-clike.min.js"
+  echo
+  curl -fsSL "${BASE}/components/prism-bash.min.js"
+} > l4d2web/l4d2web/static/vendor/prism.js
+
+# Theme CSS (the default "prism" theme).
+curl -fsSL -o l4d2web/l4d2web/static/vendor/prism.css \
+  "${BASE}/themes/prism.min.css"
 ```
 
-Inspect the first few lines to confirm it's a CodeJar source file with the expected `export function CodeJar(...)` signature. Then convert it to a script that exposes `CodeJar` on `window` (the UMD form CodeJar ships is ESM; we need a `<script>`-loadable form):
+Verify:
 
 ```bash
-# Append a small global-export shim
+ls -la l4d2web/l4d2web/static/vendor/prism.{js,css}
+grep -c 'Prism.languages.bash' l4d2web/l4d2web/static/vendor/prism.js
+```
+
+Expected: `prism.js` around 15–25 KB; `prism.css` around 1–3 KB. Grep count ≥1 (confirming the bash grammar got included).
+
+- [ ] **Step 2: Download CodeJar from unpkg**
+
+CodeJar publishes a browser-ready bundle to npm. unpkg/jsdelivr serve it directly:
+
+```bash
+VER=4.0.0
+curl -fsSL -o l4d2web/l4d2web/static/vendor/codejar.js \
+  "https://cdn.jsdelivr.net/npm/codejar@${VER}/codejar.js"
+```
+
+Inspect the first 5 lines to confirm it's a valid JS module:
+
+```bash
+head -5 l4d2web/l4d2web/static/vendor/codejar.js
+```
+
+If the file uses ES module `export` syntax (`export function CodeJar` or `export { CodeJar }`), strip the export keyword and append a global shim so `<script>` tags can load it directly:
+
+```bash
+# Strip ESM exports, then expose CodeJar on window.
+sed -i.bak \
+  -e 's/^export function /function /' \
+  -e 's/^export { CodeJar }.*$//' \
+  -e 's/^export { CodeJar as default }.*$//' \
+  l4d2web/l4d2web/static/vendor/codejar.js
+rm -f l4d2web/l4d2web/static/vendor/codejar.js.bak
+
 cat >> l4d2web/l4d2web/static/vendor/codejar.js <<'EOF'
 
 // Browser global shim: surface CodeJar on window so non-module
-// <script> tags can call it. The export above is preserved for
-// consumers that import the file as an ES module.
+// <script> tags can call it.
 window.CodeJar = CodeJar;
 EOF
 ```
 
-If the downloaded file uses ES `export` syntax that browsers refuse outside of `type="module"`, replace `export function CodeJar` with `function CodeJar` before the shim. Verify by opening the file and reading the first 5 lines.
+If the CDN serves a UMD/IIFE bundle that already exposes `window.CodeJar`, the sed lines are no-ops and the final `window.CodeJar = CodeJar` will fail. In that case, open the file with `head -20` to confirm CodeJar is already on window, and either remove the shim or wrap it in a `typeof CodeJar !== 'undefined'` check. **If unsure, BLOCK and report what the file actually contains so the controller can advise.**
 
 - [ ] **Step 3: Record SHA256s and source URLs in README.md**
 
@@ -99,16 +134,17 @@ verbatim from the upstream releases below. The strict CSP
 
 | File | Upstream | Version | SHA256 |
 |---|---|---|---|
-| `prism.js` | https://prismjs.com/download.html (theme=prism, languages=clike,bash) | v1.29.0 | `<sha>` |
-| `prism.css` | https://prismjs.com/download.html (theme=prism) | v1.29.0 | `<sha>` |
-| `codejar.js` | https://github.com/antonmedv/codejar (release v4.0.0) + browser-global shim | v4.0.0 | `<sha>` |
+| `prism.js` | jsdelivr concat: prism-core.min.js + prism-clike.min.js + prism-bash.min.js | v1.29.0 | `<sha>` |
+| `prism.css` | https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css | v1.29.0 | `<sha>` |
+| `codejar.js` | https://cdn.jsdelivr.net/npm/codejar@4.0.0/codejar.js + ESM-strip + browser-global shim | v4.0.0 | `<sha>` |
 
 ## Regenerating
 
-- **Prism:** Use the same configurator URL, tick the same languages,
-  re-download both files, drop in place.
-- **CodeJar:** `curl` the raw release file as in this plan's Task 1
-  Step 2, then re-append the `window.CodeJar = CodeJar` shim.
+- **Prism:** Re-run the three-component concat in Task 1 Step 1 of
+  `docs/superpowers/plans/2026-05-16-textarea-code-editor.md` with
+  an updated `VER`, then re-download the theme CSS.
+- **CodeJar:** Re-download from jsdelivr per the same plan's Task 1
+  Step 2, strip ESM exports, re-append the `window.CodeJar` shim.
 
 Bump the version + SHA columns in this table after any update.
 ```