tjs-lang 0.7.7 → 0.7.8

package/demo/src/imports.ts

@@ -1,16 +1,29 @@
 /**
- * Playground Import Resolver — TFS Edition
+ * Playground Import Resolver
  *
- * Rewrites bare import specifiers to /tfs/ URLs.
- * The TFS service worker handles CDN resolution and caching.
+ * Rewrites bare import specifiers to /tfs/<spec> URLs. The TFS service
+ * worker (demo/src/tfs-worker.js) intercepts those, proxies to esm.sh,
+ * and rewrites esm.sh's relative paths to absolute esm.sh URLs.
  *
  * Flow:
- *   import { x } from 'tosijs@1.3.11'
- *   → rewritten to: import { x } from '/tfs/tosijs@1.3.11'
- *   → service worker intercepts /tfs/tosijs@1.3.11
- *   → fetches from jsdelivr CDN, caches, returns ESM
+ *   import { x } from 'tosijs'
+ *   → import { x } from '/tfs/tosijs'
+ *   → SW intercepts, fetches https://esm.sh/tosijs
+ *   → SW rewrites response to use absolute esm.sh URLs for sub-modules
+ *   → browser fetches sub-modules directly from esm.sh (cross-origin,
+ *     bypasses this SW), enabling peer-dep dedup
  *
- * No import maps needed.
+ * The /tfs/ indirection — instead of writing esm.sh URLs directly into
+ * user code — exists so the SW can:
+ *   - cache responses across page loads
+ *   - intercept future virtual-module paths (/vmod/...) for IDE features
+ *   - swap the CDN backend without changing emitted code
+ *
+ * For this to work, the playground iframe must be SAME-ORIGIN with the
+ * page (so the SW controls it). See tjs-playground.ts: the iframe loads
+ * from /iframe/<sessionId>, which the SW serves from a postMessage-fed
+ * in-memory store. blob: URLs do NOT work — Chrome SWs don't intercept
+ * fetches from sandboxed blob iframes.
  */
 
 /**
@@ -33,19 +46,16 @@ export function extractImports(source: string): string[] {
 }
 
 /**
- * Rewrite bare import specifiers to absolute /tfs/ URLs.
- * Uses location.origin so it works in blob iframes.
- * Skips relative (./) and absolute (/) paths.
+ * Rewrite bare import specifiers to /tfs/<spec> URLs.
+ * Skips relative (./), absolute (/), and already-absolute http(s):// paths.
  *
  * Before: import { tosi } from 'tosijs'
- * After:  import { tosi } from 'http://localhost:8699/tfs/tosijs'
+ * After:  import { tosi } from '/tfs/tosijs'
  */
 export function rewriteImports(source: string): string {
-  const origin = typeof location !== 'undefined' ? location.origin : ''
   return source.replace(
     /((?:import|export)\s+(?:[\w\s{},*]+\s+from\s+)?)(['"])([^'"]+)\2/g,
     (match, prefix, quote, specifier) => {
-      // Skip relative and absolute paths — only rewrite bare specifiers
       if (
         specifier.startsWith('.') ||
         specifier.startsWith('/') ||
@@ -54,7 +64,7 @@ export function rewriteImports(source: string): string {
       ) {
         return match
       }
-      return `${prefix}${quote}${origin}/tfs/${specifier}${quote}`
+      return `${prefix}${quote}/tfs/${specifier}${quote}`
     }
   )
 }
@@ -85,3 +95,38 @@ export async function registerTFS(): Promise<boolean> {
     return false
   }
 }
+
+/**
+ * Register an iframe's HTML with the SW under a session ID, then resolve
+ * once the SW confirms registration. The caller can then set the iframe's
+ * src to `/iframe/<sessionId>` and the SW will serve the registered HTML.
+ *
+ * Resolves to false if the SW isn't active (caller should fall back to
+ * blob: URL — the iframe will work but won't have SW interception).
+ */
+export async function registerIframeContent(
+  sessionId: string,
+  html: string
+): Promise<boolean> {
+  const sw = navigator.serviceWorker?.controller
+  if (!sw) return false
+
+  return new Promise<boolean>((resolve) => {
+    const channel = new MessageChannel()
+    let settled = false
+    const settle = (ok: boolean) => {
+      if (settled) return
+      settled = true
+      channel.port1.close()
+      resolve(ok)
+    }
+    channel.port1.onmessage = (e) => {
+      settle(e.data?.type === 'iframe-registered')
+    }
+    // Safety: if the SW never replies, don't hang the playground forever
+    setTimeout(() => settle(false), 500)
+    sw.postMessage({ type: 'register-iframe', sessionId, html }, [
+      channel.port2,
+    ])
+  })
+}

package/demo/src/playground-shared.ts

@@ -272,16 +272,17 @@ export function renderTestResults(
   const passed = tests.filter((t: any) => t.passed).length
   const failed = tests.filter((t: any) => !t.passed).length
 
-  // Set gutter markers for ALL tests (pass and fail)
-  const testsWithLines = tests.filter((t: any) => t.line)
-  if (testsWithLines.length > 0) {
+  // Mark only FAILED tests in the editor. Passing tests appear in the
+  // results panel and don't need an underline — `severity: 'info'` was
+  // rendering as a grey squiggle on every passing test's line, which is
+  // visual noise.
+  const failedWithLines = tests.filter((t: any) => t.line && !t.passed)
+  if (failedWithLines.length > 0) {
     editor.setMarkers(
-      testsWithLines.map((t: any) => ({
+      failedWithLines.map((t: any) => ({
         line: t.line,
-        message: t.passed
-          ? `✓ ${t.description}`
-          : `✗ ${t.description}: ${t.error || 'failed'}`,
-        severity: t.passed ? ('info' as const) : ('error' as const),
+        message: `✗ ${t.description}: ${t.error || 'failed'}`,
+        severity: 'error' as const,
       }))
     )
   } else {

package/demo/src/tfs-worker.js

@@ -1,163 +1,231 @@
 /**
  * TFS — TJS File System Service Worker
  *
- * Intercepts /tfs/ requests and resolves them to CDN modules.
- * Handles caching, version resolution, and ESM serving.
+ * Acts as a tiny in-browser server for the playground iframe:
  *
- * URL format: /tfs/package@version/subpath
- *   /tfs/tosijs@1.3.11          → jsdelivr CDN
- *   /tfs/tosijs@latest           → jsdelivr CDN (latest)
- *   /tfs/lodash-es@4.17.21      → jsdelivr CDN
- *   /tfs/@scope/pkg@1.0.0       → jsdelivr CDN (scoped)
+ *   /iframe/<sessionId>   → playground HTML registered via postMessage
+ *   /tfs/<spec>           → CDN module (JSDelivr by default, esm.sh for
+ *                           packages that need peer-dep dedup like React)
  *
- * If no version specified, defaults to @latest.
+ * The iframe is loaded from a same-origin /iframe/<id> URL (instead of
+ * a blob: URL) so the SW controls it. Every fetch from inside the iframe
+ * — module imports, future virtual-module reads, future fetch() mocks —
+ * goes through this SW.
+ *
+ * URL format for /tfs/:
+ *   /tfs/tosijs                  → JSDelivr `/+esm`
+ *   /tfs/lodash-es/debounce      → JSDelivr `/+esm`
+ *   /tfs/react                   → esm.sh (peer-dep dedup with react-dom)
+ *   /tfs/react-dom/client        → esm.sh
+ *   /tfs/@scope/pkg@1.0.0        → JSDelivr `/+esm`
+ *   /tfs/__status                → cache stats
+ *   /tfs/__clear                 → drop the cache
  */
 
-const CACHE_NAME = 'tfs-v1'
-const CDN_BASE = 'https://cdn.jsdelivr.net/npm'
+const SW_VERSION = 'tfs-v4-mixed-cdn'
+const CACHE_NAME = SW_VERSION
+
+// Default CDN. JSDelivr's `/+esm` returns a self-contained Rollup-bundled
+// ESM module — works cleanly for ESM-native packages (tosijs, lodash-es)
+// AND CJS packages (most things). Bundles dependencies inline.
+const JSDELIVR = 'https://cdn.jsdelivr.net/npm'
+
+// esm.sh override for packages with tricky peer-dependency requirements.
+// React + react-dom can't both bundle React inline (the dispatcher state
+// is module-scoped — two copies → useState() crashes with null). esm.sh
+// builds these with `external: react` so the user's `import 'react'`
+// and react-dom's internal react reference resolve to the SAME URL.
+//
+// Caveat: esm.sh wraps SOME ESM-native packages as CJS-with-default-only,
+// breaking named imports. Tested: tosijs is broken, lodash-es is broken.
+// Only use it where the peer-dep dedup matters more than named imports.
+const ESM_SH = 'https://esm.sh'
+const ESM_SH_PACKAGES = new Set(['react', 'react-dom'])
+
+// Explicit per-import CDN hints (first path segment in the spec).
+// Lets users force a specific CDN when default routing picks the wrong one.
+//
+//   import x from 'jsdelivr/tosijs@1.6'        → JSDelivr
+//   import x from 'esmsh/react@18'             → esm.sh
+//   import x from 'unpkg/preact'               → UNPKG
+//   import x from 'github/user/repo@main/file' → esm.sh's /gh/ route
+//
+// Hint name `esm` would conflict with the popular `esm` npm package, so we
+// use `esmsh`. `jsdelivr`, `unpkg`, `github` are not taken as bare top-level
+// npm packages.
+const CDN_HINTS = {
+  jsdelivr: (rest) => `${JSDELIVR}/${rest}/+esm`,
+  esmsh: (rest) => `${ESM_SH}/${rest}`,
+  unpkg: (rest) => `https://unpkg.com/${rest}?module`,
+  github: (rest) => `${ESM_SH}/gh/${rest}`,
+}
+
+// In-memory store of iframe HTML by session ID. Populated via postMessage
+// from the playground when running code; consumed when the iframe fetches
+// /iframe/<sessionId>. Lost on SW restart, which is fine — the playground
+// re-registers each run.
+const iframeContents = new Map()
 
 self.addEventListener('install', () => {
+  console.log(`[TFS] installing ${SW_VERSION}`)
   self.skipWaiting()
 })
 
 self.addEventListener('activate', (event) => {
-  event.waitUntil(clients.claim())
+  console.log(`[TFS] activating ${SW_VERSION}`)
+  event.waitUntil(
+    (async () => {
+      // Drop caches from previous SW versions
+      const keys = await caches.keys()
+      await Promise.all(
+        keys.filter((k) => k !== CACHE_NAME).map((k) => caches.delete(k))
+      )
+      await clients.claim()
+    })()
+  )
 })
 
-/**
- * Parse a TFS path into package name, version, and subpath.
- *
- * Examples:
- *   tosijs@1.3.11         → { name: 'tosijs', version: '1.3.11', subpath: '' }
- *   tosijs                → { name: 'tosijs', version: 'latest', subpath: '' }
- *   tosijs@1.3.11/utils   → { name: 'tosijs', version: '1.3.11', subpath: '/utils' }
- *   @scope/pkg@1.0.0      → { name: '@scope/pkg', version: '1.0.0', subpath: '' }
- *   @scope/pkg@1.0.0/sub  → { name: '@scope/pkg', version: '1.0.0', subpath: '/sub' }
- */
-function parseTfsPath(path) {
-  // Scoped packages: @scope/name@version/subpath
-  if (path.startsWith('@')) {
-    const match = path.match(/^(@[^/]+\/[^/@]+)(?:@([^/]+))?(\/.*)?$/)
-    if (match) {
-      return {
-        name: match[1],
-        version: match[2] || 'latest',
-        subpath: match[3] || '',
-      }
-    }
-  }
+// Receive iframe HTML registrations from the playground.
+// Replies on event.ports[0] (if provided) so the playground can await
+// the registration before setting iframe.src.
+self.addEventListener('message', (event) => {
+  const data = event.data
+  if (!data || typeof data !== 'object') return
 
-  // Regular packages: name@version/subpath
-  const match = path.match(/^([^/@]+)(?:@([^/]+))?(\/.*)?$/)
-  if (match) {
-    return {
-      name: match[1],
-      version: match[2] || 'latest',
-      subpath: match[3] || '',
+  if (data.type === 'register-iframe') {
+    iframeContents.set(data.sessionId, data.html)
+    if (event.ports && event.ports[0]) {
+      event.ports[0].postMessage({ type: 'iframe-registered' })
     }
+  } else if (data.type === 'unregister-iframe') {
+    iframeContents.delete(data.sessionId)
   }
-
-  return null
-}
-
-/**
- * Resolve the ESM entry point for a package.
- * Fetches package.json and checks exports → module → main.
- */
-async function resolveEntryPoint(name, version) {
-  const pkgUrl = `${CDN_BASE}/${name}@${version}/package.json`
-  const res = await fetch(pkgUrl)
-  if (!res.ok) return null
-
-  const pkg = await res.json()
-
-  // Check exports field first (modern ESM)
-  // exports can be { ".": { import: "..." } } or { import: "..." } directly
-  if (pkg.exports) {
-    const dot = pkg.exports['.'] ?? pkg.exports
-    if (typeof dot === 'string') return dot
-    if (dot?.import)
-      return typeof dot.import === 'string' ? dot.import : dot.import.default
-    if (dot?.default) return dot.default
-  }
-
-  // module field (bundler convention)
-  if (pkg.module) return pkg.module
-
-  // main field (fallback)
-  if (pkg.main) return pkg.main
-
-  // Default
-  return '/index.js'
-}
+})
 
 self.addEventListener('fetch', (event) => {
   const url = new URL(event.request.url)
 
-  // Only intercept /tfs/ requests
-  if (!url.pathname.startsWith('/tfs/')) return
-
-  const tfsPath = url.pathname.slice(5) // strip '/tfs/'
-  if (!tfsPath) return
-
-  // Special: /tfs/__status
-  if (tfsPath === '__status') {
-    event.respondWith(
-      caches.open(CACHE_NAME).then(async (cache) => {
-        const keys = await cache.keys()
-        return new Response(
-          JSON.stringify({
-            version: CACHE_NAME,
-            cached: keys.map((k) => new URL(k.url).pathname),
-          }),
-          { headers: { 'Content-Type': 'application/json' } }
-        )
-      })
-    )
+  // /iframe/<sessionId> — serve the registered HTML
+  if (url.pathname.startsWith('/iframe/')) {
+    const sessionId = url.pathname.slice('/iframe/'.length)
+    event.respondWith(serveIframeRequest(sessionId))
     return
   }
 
-  // Special: /tfs/__clear
-  if (tfsPath === '__clear') {
-    event.respondWith(
-      caches
-        .delete(CACHE_NAME)
-        .then(() => new Response('cache cleared', { status: 200 }))
-    )
-    return
-  }
+  // /tfs/<spec> — proxy to esm.sh
+  if (url.pathname.startsWith('/tfs/')) {
+    const tfsPath = url.pathname.slice(5)
+    if (!tfsPath) return
 
-  const parsed = parseTfsPath(tfsPath)
-  if (!parsed) {
-    event.respondWith(new Response('invalid tfs path', { status: 400 }))
+    if (tfsPath === '__status') {
+      event.respondWith(serveStatus())
+      return
+    }
+    if (tfsPath === '__clear') {
+      event.respondWith(serveClear())
+      return
+    }
+
+    const parsed = parseTfsPath(tfsPath)
+    if (!parsed) {
+      event.respondWith(new Response('invalid tfs path', { status: 400 }))
+      return
+    }
+    event.respondWith(serveTfsRequest(parsed))
     return
   }
 
-  event.respondWith(serveTfsRequest(parsed, event.request))
+  // Anything else: let it pass through to the network
 })
 
-async function serveTfsRequest({ name, version, subpath }, request) {
+function serveIframeRequest(sessionId) {
+  const html = iframeContents.get(sessionId)
+  if (!html) {
+    return new Response(
+      `iframe content not found for session ${sessionId} — playground may not have registered yet`,
+      { status: 404, headers: { 'Content-Type': 'text/plain' } }
+    )
+  }
+  return new Response(html, {
+    status: 200,
+    headers: {
+      'Content-Type': 'text/html',
+      // No-cache: each playground run registers fresh content
+      'Cache-Control': 'no-store',
+    },
+  })
+}
+
+async function serveStatus() {
   const cache = await caches.open(CACHE_NAME)
+  const keys = await cache.keys()
+  return new Response(
+    JSON.stringify({
+      version: CACHE_NAME,
+      cdn: { default: JSDELIVR, esmSh: [...ESM_SH_PACKAGES] },
+      cached: keys.map((k) => new URL(k.url).pathname),
+      iframeSessions: [...iframeContents.keys()],
+    }),
+    { headers: { 'Content-Type': 'application/json' } }
+  )
+}
 
-  // Resolve entry point if no subpath
-  if (!subpath) {
-    const entry = await resolveEntryPoint(name, version)
-    if (!entry) {
-      return new Response(`package not found: ${name}@${version}`, {
-        status: 404,
-      })
-    }
-    subpath = entry.startsWith('/')
-      ? entry
-      : entry.startsWith('./')
-      ? entry.slice(1)
-      : `/${entry}`
+async function serveClear() {
+  await caches.delete(CACHE_NAME)
+  return new Response('cache cleared', { status: 200 })
+}
+
+/**
+ * Build the CDN URL for a parsed TFS path. JSDelivr `/+esm` by default;
+ * esm.sh for packages in ESM_SH_PACKAGES.
+ *
+ *   react           → https://esm.sh/react
+ *   react-dom/client → https://esm.sh/react-dom/client
+ *   tosijs          → https://cdn.jsdelivr.net/npm/tosijs@latest/+esm
+ *   tosijs@1.6.1    → https://cdn.jsdelivr.net/npm/tosijs@1.6.1/+esm
+ *   lodash-es/get   → https://cdn.jsdelivr.net/npm/lodash-es@latest/get/+esm
+ */
+function buildCdnUrl(name, version, subpath) {
+  // Explicit hint: `<cdn>/<rest>` where <cdn> is a known CDN name
+  if (CDN_HINTS[name] && subpath) {
+    // subpath starts with `/` — strip it. The version slot is unused for
+    // hinted specifiers since the inner spec carries its own version.
+    return CDN_HINTS[name](subpath.slice(1))
+  }
+  // Allowlist override (peer-dep packages must use esm.sh)
+  if (ESM_SH_PACKAGES.has(name)) {
+    const versionPart = version ? `@${version}` : ''
+    return `${ESM_SH}/${name}${versionPart}${subpath}`
+  }
+  // Default: JSDelivr `/+esm`
+  const versionPart = version ? `@${version}` : '@latest'
+  return `${JSDELIVR}/${name}${versionPart}${subpath}/+esm`
+}
+
+/**
+ * Parse a TFS path into package name, version, and subpath.
+ *
+ *   tosijs@1.3.11         → { name: 'tosijs', version: '1.3.11', subpath: '' }
+ *   tosijs                → { name: 'tosijs', version: '', subpath: '' }
+ *   tosijs@1.3.11/utils   → { name: 'tosijs', version: '1.3.11', subpath: '/utils' }
+ *   @scope/pkg@1.0.0      → { name: '@scope/pkg', version: '1.0.0', subpath: '' }
+ *   @scope/pkg@1.0.0/sub  → { name: '@scope/pkg', version: '1.0.0', subpath: '/sub' }
+ */
+function parseTfsPath(path) {
+  if (path.startsWith('@')) {
+    const m = path.match(/^(@[^/]+\/[^/@]+)(?:@([^/]+))?(\/.*)?$/)
+    if (m) return { name: m[1], version: m[2] || '', subpath: m[3] || '' }
   }
+  const m = path.match(/^([^/@]+)(?:@([^/]+))?(\/.*)?$/)
+  if (m) return { name: m[1], version: m[2] || '', subpath: m[3] || '' }
+  return null
+}
 
-  const cdnUrl = `${CDN_BASE}/${name}@${version}${subpath}`
+async function serveTfsRequest({ name, version, subpath }) {
+  const cache = await caches.open(CACHE_NAME)
+  const cdnUrl = buildCdnUrl(name, version, subpath)
   const cacheKey = new Request(cdnUrl)
 
-  // Check cache
   const cached = await cache.match(cacheKey)
   if (cached) {
     return new Response(cached.body, {
@@ -170,7 +238,6 @@ async function serveTfsRequest({ name, version, subpath }, request) {
     })
   }
 
-  // Fetch from CDN
   try {
     const response = await fetch(cdnUrl)
     if (!response.ok) {
@@ -178,29 +245,20 @@ async function serveTfsRequest({ name, version, subpath }, request) {
     }
 
     let body = await response.text()
-    const origin = new URL(request.url).origin
-    const pkgBase = `${CDN_BASE}/${name}@${version}`
-
-    // Rewrite imports in fetched module:
-    // - Bare specifiers → /tfs/ URLs (transitive deps, single copy)
-    // - Relative imports → absolute CDN URLs (sibling files within package)
-    body = body.replace(
-      /((?:import|export)\s+(?:[\w\s{},*]+\s+from\s+)?)(['"])([^'"]+)\2/g,
-      (match, prefix, quote, spec) => {
-        if (spec.startsWith('http://') || spec.startsWith('https://'))
-          return match
-        if (spec.startsWith('./') || spec.startsWith('../')) {
-          const dir = subpath.replace(/\/[^/]*$/, '')
-          // Add .js extension if missing (CDN requires it)
-          const specWithExt = /\.\w+$/.test(spec) ? spec : `${spec}.js`
-          const resolved = new URL(specWithExt, `${pkgBase}${dir}/`).href
-          return `${prefix}${quote}${resolved}${quote}`
-        }
-        if (spec.startsWith('/')) return match
-        // Bare specifier → route through /tfs/ for dedup
-        return `${prefix}${quote}${origin}/tfs/${spec}${quote}`
-      }
-    )
+
+    // esm.sh's response uses esm.sh-relative paths (`/react@VERSION/...`).
+    // Loaded from the playground origin those would resolve back to us
+    // instead of esm.sh. Rewrite to absolute esm.sh URLs so the browser
+    // fetches them directly AND dedupes cross-package peer-dep references
+    // (react ↔ react-dom). JSDelivr `/+esm` responses are self-contained
+    // and don't have any `/...` paths, so this is a no-op for them.
+    if (cdnUrl.startsWith(ESM_SH)) {
+      body = body.replace(
+        /((?:import|export)\s+(?:[\w\s{},*]+\s+from\s+)?)(['"])(\/[^'"]+)\2/g,
+        (_match, prefix, quote, path) =>
+          `${prefix}${quote}${ESM_SH}${path}${quote}`
+      )
+    }
 
     await cache.put(
       cacheKey,

package/demo/src/tjs-playground.ts

@@ -25,7 +25,11 @@ import {
 import { codeMirror, CodeMirror } from '../../editors/codemirror/component'
 import { tjs, generateDTS, type TJSTranspileOptions } from '../../src/lang'
 import { generateDocsMarkdown } from './docs-utils'
-import { rewriteImports, extractImports } from './imports'
+import {
+  rewriteImports,
+  extractImports,
+  registerIframeContent,
+} from './imports'
 import {
   buildIframeDoc,
   createIframeMessageHandler,
@@ -1259,8 +1263,8 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
       const cssContent = this.parts.cssEditor.value
       const jsCode = this.lastTranspileResult.code
 
-      // Rewrite bare import specifiers to /tfs/ URLs
-      // The TFS service worker handles CDN resolution and caching
+      // Rewrite bare import specifiers to absolute JSDelivr /+esm URLs
+      // (sandboxed blob iframes can't reliably use the SW)
       const rewrittenCode = rewriteImports(jsCode)
 
       // Extract import statements — they must be at the top of the module
@@ -1304,18 +1308,38 @@ export class TJSPlayground extends Component<TJSPlaygroundParts> {
       })
       window.addEventListener('message', messageHandler)
 
-      // Set iframe content using blob URL instead of srcdoc
-      // This allows import maps to work with external URLs
+      // Load the iframe from a same-origin URL the TFS service worker
+      // serves. This makes the iframe SW-controlled, so its module imports
+      // (and future virtual-module reads) go through the SW. blob: URLs
+      // can't do this — Chrome SWs don't intercept fetches from sandboxed
+      // blob iframes.
       const iframe = this.parts.previewFrame
-      const blob = new Blob([iframeDoc], { type: 'text/html' })
-      const blobUrl = URL.createObjectURL(blob)
 
-      // Clean up previous blob URL if any
+      // Clean up previous blob URL if any (legacy fallback path)
       if (iframe.dataset.blobUrl) {
         URL.revokeObjectURL(iframe.dataset.blobUrl)
+        delete iframe.dataset.blobUrl
+      }
+
+      const sessionId = `tjs-${Date.now()}-${Math.random()
+        .toString(36)
+        .slice(2)}`
+      const registered = await registerIframeContent(sessionId, iframeDoc)
+
+      if (registered) {
+        iframe.src = `/iframe/${sessionId}`
+      } else {
+        // SW unavailable — fall back to blob: (no SW interception, but
+        // CDN imports still work via the absolute URLs in the rewritten
+        // /tfs/ paths once the SW is back).
+        console.warn(
+          '[playground] SW unavailable, falling back to blob: iframe'
+        )
+        const blob = new Blob([iframeDoc], { type: 'text/html' })
+        const blobUrl = URL.createObjectURL(blob)
+        iframe.dataset.blobUrl = blobUrl
+        iframe.src = blobUrl
       }
-      iframe.dataset.blobUrl = blobUrl
-      iframe.src = blobUrl
 
       // Wait a bit for execution, then clean up listener
       setTimeout(() => {