create-bridgething 0.12.0 → 0.14.0

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "create-bridgething",
-  "version": "0.12.0",
+  "version": "0.14.0",
   "type": "module",
-  "description": "Scaffold a new bridgething webapp (React + Vite + Tailwind v4)",
+  "description": "Scaffold a bridgething app source: webapps for the Spotify Car Thing, published as a catalog.v1 on GitHub Pages.",
   "license": "MIT",
   "author": "Joey Eamigh <55670930+JoeyEamigh@users.noreply.github.com> (https://github.com/JoeyEamigh)",
   "homepage": "https://bridgething.com",
@@ -14,7 +14,14 @@
   "bugs": {
     "url": "https://github.com/JoeyEamigh/bridgething/issues"
   },
-  "keywords": ["bridgething", "spotify", "car-thing", "superbird", "create", "scaffold"],
+  "keywords": [
+    "bridgething",
+    "spotify",
+    "car-thing",
+    "superbird",
+    "create",
+    "scaffold"
+  ],
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +31,9 @@
   },
   "files": [
     "dist",
+    "template-versions.json",
     "template",
+    "template-source",
     "template-extension",
     "template-launcher",
     "template-overlay"
@@ -37,13 +46,27 @@
     "test": "bun test"
   },
   "devDependencies": {
-    "@bridgething/extension": "0.12.0",
+    "@bridgething/client": "0.14.0",
+    "@bridgething/extension": "0.14.0",
     "@msgpack/msgpack": "^3.1.3",
+    "@preact/preset-vite": "^2.10.6",
+    "@tailwindcss/vite": "^4.3.3",
     "@types/bun": "^1.4.0",
     "@types/node": "^26.1.1",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
     "@types/uuid": "^11.0.0",
+    "@vitejs/plugin-react": "^6.1.2",
     "esbuild": "^0.28.2",
-    "tsdown": "^0.21.10"
+    "fflate": "^0.8.3",
+    "happy-dom": "^21.0.3",
+    "preact": "^11.0.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
+    "tailwindcss": "^4.3.3",
+    "tsdown": "^0.21.10",
+    "vite": "^8.3.4",
+    "vite-plugin-singlefile": "^2.3.4"
   },
   "peerDependencies": {
     "typescript": "^6.0.3"

package/template/_claude/skills/bridgething/SKILL.md

@@ -6,7 +6,8 @@ description: Build, run, and ship a bridgething webapp for the Spotify Car Thing
 # Building a bridgething webapp
 
 - Calling the daemon, from now-playing to networking, plus every surface the SDK
-  ships: [reference/sdk.md](reference/sdk.md)
+  ships, the companion settings page, its config form, and files the user picks:
+  [reference/sdk.md](reference/sdk.md)
 - Running the app, screenshotting the 800x480 screen, and pressing the physical
   controls locally and over CDP on the device:
   [reference/develop.md](reference/develop.md)

package/template/_claude/skills/bridgething/reference/develop.md

@@ -13,6 +13,11 @@ than fixtures. `SUPERBIRD_HOST=bridgething-<serial>.local` targets another
 device, and `BRIDGETHING_DAEMON_URL=ws://host:8891` targets a daemon anywhere
 else.
 
+Blob urls from `client.blob` (`/.bridgething/blob/...`) go through the dev
+server to that same daemon. The daemon serves blobs for its active webapp only,
+so they load once this app is the active one on the device. `bun run dev:device`
+and `bun run push` both make it active.
+
 ## Show it on the Car Thing with hot reload
 
 ```bash
@@ -55,6 +60,7 @@ await page.keyboard.press('1'); // preset 1  (also '2' '3' '4')
 await page.keyboard.press('m'); // Mode button
 await page.keyboard.press('Escape'); // Back button
 await page.mouse.wheel(120, 0); // rotary wheel: HORIZONTAL scroll (deltaX)
+await page.keyboard.press('Enter'); // wheel click
 // touch: page.tap('selector')  or  page.mouse.click(x, y)
 ```
 
@@ -64,23 +70,24 @@ Loop: edit code, let vite hot-reload, screenshot, adjust. Keep the viewport at
 ## Your own browser and DevTools
 
 Open `http://localhost:5173/`, then set a custom device of 800 x 480 in DevTools'
-device toolbar. Type `1` through `4`, `m`, and `Escape`, and hold shift while
-scrolling for the rotary's horizontal wheel.
+device toolbar. Type `1` through `4`, `m`, `Escape`, and `Enter` for the wheel click, and hold
+shift while scrolling for the rotary's horizontal wheel.
 
 ## Drive the real device over CDP
 
 CDP input goes into the page, so the launcher gesture and browser-nav side
 effects stay out of the way.
 
-Get the app on the kiosk first with `bun run dev:device` or `bun run push`. CDP
-is served at `bridgething.local:9222`, reachable over USB:
+Get the app on the kiosk first with `bun run dev:device` or `bun run push`.
+Chromium listens on loopback, but the image proxies it, so CDP answers on
+`bridgething.local:9222` over USB:
 
 ```bash
 curl -s http://bridgething.local:9222/json/version >/dev/null && echo cdp-up
 ```
 
-Use the `webSocketDebuggerUrl` exactly as returned. It comes back as an IP rather
-than the hostname you asked for, and that address is the correct one.
+Use the `webSocketDebuggerUrl` exactly as returned. It comes back as an IP
+rather than the hostname you asked for, and that address is the correct one.
 
 Playwright's `connectOverCDP` never finishes the websocket upgrade against the
 device's embedded chromium, so drive it with a raw CDP websocket. Connect to the
@@ -130,11 +137,13 @@ const key = (type: string, k: string, code: string, vk: number) =>
     type,
     key: k,
     code,
-    text: k.length === 1 ? k : '',
+    text: k === 'Enter' ? '\r' : k.length === 1 ? k : '',
     windowsVirtualKeyCode: vk,
   });
 await key('keyDown', '3', 'Digit3', 51); // preset 3
 await key('keyUp', '3', 'Digit3', 51);
+await key('keyDown', 'Enter', 'Enter', 13); // wheel click
+await key('keyUp', 'Enter', 'Enter', 13);
 
 // rotary wheel = horizontal scroll:
 await send('Input.dispatchMouseEvent', {
@@ -159,4 +168,5 @@ actual screen on the device.
 | Mode (M)     | `keydown` key `"m"`                   | `KeyM` / 77                |
 | Back         | `keydown` key `"Escape"`              | `Escape` / 27              |
 | Rotary wheel | `wheel` with `deltaX` (horizontal)    | mouseWheel `deltaX`        |
+| Wheel click  | `keydown` key `"Enter"`               | `Enter` / 13               |
 | Touch        | pointer / touch events                | `Input.dispatchTouchEvent` |

package/template/_claude/skills/bridgething/reference/sdk.md

@@ -68,6 +68,7 @@ client.player.stateGet().then(r => r.ok && setState(r.response.state)); // prime
 // playback.state: 'stopped' | 'paused' | 'playing'; playback.positionMs; playback.shuffle
 
 client.player.play({ uri: 'spotify:track:...' });
+client.player.play({ uri: 'https://stream.example/live.mp3' }); // any http(s) media url plays on the phone
 client.player.pause();
 client.player.resume();
 client.player.skipNext();
@@ -81,6 +82,14 @@ client.player.setRepeat({ mode: 'all' }); // 'off' | 'all' | 'one'
 seek. For a smooth progress bar, extrapolate the playhead between snapshots from
 `playback.state` and `playback.positionMs`.
 
+An `http`/`https` uri is a raw media stream (internet radio, a podcast episode,
+an HLS playlist) played by the phone's native player. Its snapshot carries the
+stream's live metadata: ICY titles land in `track.title`, station artwork in
+`track.artworkId`, and `playback.setElapsedTimeAvailable` is true only for
+finite media that can seek. Live streams have no duration. A stream that fails
+arrives on `player.onErrorEvent` as `playFailed`, and the stream stops when the
+last Car Thing disconnects.
+
 `client.asset`. Player state carries opaque asset ids:
 
 ```ts
@@ -109,12 +118,302 @@ const r = await client.config.get({ key: 'units' });
 const all = await client.config.list();
 ```
 
-The settings page under `settings/` reads and writes them through
-`@bridgething/client/settings`, a `postMessage` bridge. It runs on the phone with
-real internet, but loads from a `file://` origin and the webview enforces CORS on
-fetch and XHR. WebSocket APIs work. Plain HTTP APIs work when the server sends
-permissive CORS headers, since requests arrive with `Origin: null`. For a
-CORS-strict HTTP-only service, fetch through `client.net` instead.
+Each field in the manifest's `config` array is `string`, `secret`, `number`,
+`boolean` or `enum`. Keep `label` short; help text goes in `description`, which
+the settings form shows under the label. An enum stores its `choices` values and
+shows `choiceLabels` in their place:
+
+```json
+{
+  "type": "enum",
+  "data": {
+    "key": "frost",
+    "label": "Overlay frostiness",
+    "description": "How frosted the overlay surfaces look.",
+    "choices": ["0", "1", "2"],
+    "choiceLabels": { "0": "clear", "1": "light", "2": "frosted" },
+    "default": "2"
+  }
+}
+```
+
+## The settings page: `@bridgething/client/settings`
+
+The page under `settings/` runs in the companion: the phone app, the desktop
+app, or the device page at bridgething.com. It reads and writes the app's
+config and docs through `@bridgething/client/settings`, a `postMessage` bridge.
+
+```ts
+import { settings } from '@bridgething/client/settings';
+
+const { webappId, name, version, deviceId } = await settings.context();
+await settings.config.set('units', 'metric'); // also fields, list, delete
+await settings.doc.set('layout', JSON.stringify(layout)); // also get, list, delete
+const off = settings.onDocChanged((key, value) => sync(key, value));
+settings.done(); // closes the settings screen
+```
+
+The page has real internet but renders from a null origin, so the webview's
+own `fetch` and XHR are blocked by CORS against any server without permissive
+headers. WebSockets work from the page directly. For HTTP,
+`settings.fetch(url, init)` has the host make the request natively and hands
+back a real `Response`: 1 MiB each way, buffered whole, with an optional
+`timeoutMs`. It rejects with a `SettingsFetchError` whose `kind` is `network`,
+`timeout`, or `invalid_url`. `settings.installFetch()` swaps the global `fetch`
+for third-party SDKs and returns a function that restores it.
+`settings.auth.authorize(url)` opens an OAuth provider in the real browser and
+resolves with the callback URL; register
+`https://bridgething.com/oauth/callback` as the redirect URI, do PKCE in the
+page, and exchange the code over `settings.fetch`. It rejects with an
+`AuthorizeError` whose `kind` is `cancelled`, `busy` (one authorize at a time),
+or `unsupported`. The device page has neither: there `settings.fetch` rejects
+with a plain `Error` and `authorize` with `unsupported`.
+
+The companion keeps the page loaded after the user leaves it and shows the
+same document the next time they open the app's settings. Three rules follow:
+
+- `settings.onRefresh(context => ...)` fires each time the page comes back on
+  screen, and whenever the app's name, version, or config fields change. Reread
+  anything the page read from the device, such as a doc it cached.
+- `settings.done()` works only while the page is on screen. A `done()` from a
+  page the user already left does nothing.
+- A page that navigates or reloads itself comes back as a fresh document.
+  Calls the old one had in flight are never answered.
+- A page that crashes the webview before it finishes loading, or twice in a
+  row while on screen, shows a failure with a retry instead of loading again.
+
+When the phone's settings screen hides, the phone app blurs the focused field.
+
+## The config form: `@bridgething/client/form`
+
+`<ConfigForm/>` renders every `config` field from the manifest and writes each
+one to the device as the user commits it. An app with `config` and no
+`settings` page still gets a settings screen: the companion shows a default
+page that is just `<ConfigForm/>` and a Done button. A custom page embeds the
+form and adds its own controls around it, so never hand-roll inputs for
+declared fields.
+
+```tsx
+import {
+  ConfigForm,
+  ConfigFormError,
+  closeSettings,
+  type ConfigFormHandle,
+} from '@bridgething/client/form';
+
+const form = useRef<ConfigFormHandle>(null);
+
+async function connect() {
+  try {
+    const values = await form.current!.flush();
+    await signIn(values.base_url, values.token);
+  } catch (err) {
+    if (!(err instanceof ConfigFormError)) throw err;
+    setStatus(err.message);
+  }
+}
+
+async function close() {
+  try {
+    await closeSettings(form.current);
+  } catch (err) {
+    setStatus(err instanceof Error ? err.message : String(err));
+  }
+}
+
+<ConfigForm ref={form} />;
+```
+
+A toggle or a choice commits on tap. A text or number field commits when it
+loses focus, or on Enter. A touch webview does not always take focus off a
+field when a button is tapped, so any button that acts on the values calls
+`flush()` first. A Done button calls `closeSettings(form.current)`, which
+flushes and then closes the page unless an edit was refused, rejecting with
+that error so the page can show it. `flush()` writes every field still being
+typed, waits for the device, and resolves with the values the device holds.
+It rejects with a `ConfigFormError`:
+
+- `kind: 'refused'`: a typed value broke its field's rules, or the device
+  refused the write. `fields` maps each config key to its message and `message`
+  is `<label>: <reason>`. The form shows the same message under the field.
+- `kind: 'unavailable'`: the form never loaded. `message` is the load failure,
+  and the form shows its own retry.
+- `kind: 'replaced'`: the host pointed the page at another app while `flush()`
+  waited. The edits still land on the app they were made for.
+
+`onChange` reports written values only, never text still being typed. It fires
+the moment a field commits, and again with the device's value if the write is
+refused. Take values for an action from `flush()`, not from `onChange` state.
+The form rereads its fields and values on every refresh.
+
+The form styles off `--bt-*` CSS variables (`--bt-color-bg`, `--bt-color-fg`,
+`--bt-color-accent`, `--bt-font-body`, `--bt-text-row`, and the rest of the
+names in `@bridgething/client/theme`).
+
+The host app's theme arrives on its own. `settings.context()` carries
+`theme: { scheme, colors, text, fonts }`, and importing
+`@bridgething/client/settings` paints it as those `--bt-*` variables plus
+`--bt-scheme` (`light` or `dark`), repainting when the phone or desktop flips
+scheme. Use the variables in your own CSS and the page matches the app for
+free; `color-scheme: var(--bt-scheme)` on `html` gets native controls right. The
+painted values have zero specificity, so any `:root` rule of yours wins: set
+the variables there to opt out. `settings.onThemeChanged(theme => ...)` hears
+flips when a canvas or chart needs the raw tokens. An older companion sends no
+theme and the variables fall back to the defaults, following
+`prefers-color-scheme`.
+
+Write the page in react like the rest of the app. `react` and `react-dom/client`
+imports, `className`, `htmlFor`, react's event types. The build runs it on
+preact through `@preact/preset-vite`, which is most of what keeps the page
+small, so keep the react-flavoured source and leave the preset alone. One
+tsconfig covers `src`, `settings` and `extension`, so `bun run typecheck`
+checks all three.
+
+Keep the page small. It builds to one self-contained HTML file, and the device
+refuses to install a bundle whose declared settings page is over 1 MiB, failing
+the whole install with an invalid-manifest error. The build warns past 200 KiB
+and again past 500 KiB. A heavy dependency in `settings/` is the usual way
+there.
+
+## Files the user picks: `client.blob`
+
+A webapp can show files the user hands it from the companion, like a GIF or
+video background. The settings page picks and uploads them; the webapp only
+reads them.
+
+```tsx
+import type { BlobEntry } from '@bridgething/lib/client';
+
+const [bg, setBg] = useState<BlobEntry | null>(null);
+
+useEffect(() => {
+  const load = async () => {
+    const r = await client.blob.list();
+    setBg(
+      r.ok
+        ? (r.response.entries.find(e => e.key === 'background') ?? null)
+        : null,
+    );
+  };
+  load();
+  return client.blob.onChanged(c => c.key === 'background' && load());
+}, [client]);
+
+if (!bg) return null;
+if (bg.mime.startsWith('video/'))
+  return <video src={bg.url} autoPlay loop muted playsInline />;
+return <img src={bg.url} />;
+```
+
+`url` is `/.bridgething/blob/<key>?v=<sha256>`, served by the daemon from the
+page's own origin with the stored mime, an ETag, and Range support. Use it
+as-is. The `?v=` changes whenever the content does, so caching never shows a
+stale file. Only the active webapp is served, and `onChanged` reaches only the
+active webapp, never an overlay.
+
+On the settings page, `pick` opens the phone's photo picker or the desktop's
+file dialog and hands back a handle, never the bytes. `blob.put` streams the
+file to the device under a key:
+
+```ts
+import { BlobError, settings } from '@bridgething/client/settings';
+
+const picked = await settings.pick({ kind: 'video' }); // null when the user backs out
+if (picked) {
+  thumb.src = picked.preview ?? ''; // small jpeg data url; a video's is its first frame
+  try {
+    await settings.blob.put('background', picked.handle, {
+      onProgress: (sent, total) => (bar.value = sent / total),
+    });
+  } catch (err) {
+    if (err instanceof BlobError && err.kind === 'too_large') showTooBig();
+  }
+}
+```
+
+`kind` is `'image'`, `'video'`, or `'any'`. The companion makes picks fit the
+device before upload, and there are no options beyond `cover`:
+
+- Animated GIF, APNG, and WebP pass through byte for byte. Crop and placement
+  are yours to do in the webapp.
+- Stills larger than the `cover` box scale down until they just cover it,
+  keeping their format. HEIC becomes JPEG.
+- Video always becomes H.264 mp4, no audio, at most 30 fps, scaled to cover the
+  box without upscaling.
+- `any` is untouched.
+- On the device page at bridgething.com, the browser's own file picker is used
+  and nothing is converted or previewed, since a browser has no transcoder.
+
+`cover: [w, h]` is the one override. It defaults to `[800, 800]` for stills,
+which covers the screen in either orientation with zoom headroom, and
+`[800, 480]` for video. Each edge is a whole number from 1 to 4294967295;
+anything else rejects. The result is
+`{ handle, mime, size, width?, height?, durationMs?, preview? }`. One picker is
+open at a time: a `pick` while another is still open rejects with `busy`.
+
+Bytes the page makes itself, like a canvas export, go through a handle too:
+
+```ts
+const png = await new Promise<Blob>(done =>
+  canvas.toBlob(b => done(b!), 'image/png'),
+);
+const handle = await settings.blob.create('image/png');
+await settings.blob.append(handle, png); // Blob, ArrayBuffer, or a typed array
+await settings.blob.put('cropped', handle);
+```
+
+`settings.blob.append` returns the handle's size so far.
+`settings.blob.list()` returns `{ key, sha256, mime, size }` for every key, and
+`settings.blob.delete(key)` removes one.
+
+`put` resolves once the device has the file, however long the link takes: it
+streams on the background lane so now-playing stays smooth, which means a
+large video over a car's Bluetooth link takes minutes. `onProgress` reports the
+bytes the device has confirmed a few times a second and ends on the total, so
+show it. A `put` that picks up an interrupted upload starts at the bytes the
+device already has, not at 0. Putting bytes the device already holds finishes
+at once, and a second `put` of the same key replaces one still in flight.
+
+A handle lives in the companion, not on the device:
+
+- A `put` the device stores uses the handle up. To store the same bytes under
+  a second key, pick or create again.
+- A failed `put` keeps the handle, so the upload can be retried with it.
+- A `put` keeps its handle alive for as long as it streams.
+- A handle nothing is uploading expires after 30 minutes unused.
+- The companion holds at most 128 MiB of handles. A pick or append past that
+  rejects with `busy` until a `put` lands or a handle expires. Nothing already
+  held is dropped.
+- A handle that expired or was used up rejects with `unknown_handle`. Pick
+  again.
+
+`pick` and every `settings.blob` call reject with a `BlobError`. Its `kind`:
+
+- `unsupported`: the companion or the Car Thing predates these calls, or the
+  host cannot do the work.
+- `disconnected`: no Car Thing is linked, or the link dropped mid-upload.
+- `too_large`: the file is over 32 MiB.
+- `quota_exceeded`: the put would take the app past 64 MiB.
+- `storage_full`: the Car Thing has no room left.
+- `not_media`: the picked file is not the kind asked for.
+- `unknown_handle`: the handle is not live. It was never made, it expired, or
+  a stored `put` used it up.
+- `busy`: a picker is already open, or held handles fill the companion's whole
+  handle budget.
+- `no_gesture`: the pick did not start from a tap or click, so the browser
+  opened no picker. Call `pick` from the tap handler itself.
+- `failed`: anything else. Read `message`.
+
+The footguns:
+
+- 32 MiB per file and 64 MiB per webapp of distinct content. The device refuses
+  past either and never evicts to make room, so delete what you replace.
+- A key is 1 to 256 bytes with no control characters. Do not use `.` or `..`:
+  a browser folds them out of the url, so the file never loads.
+- A GIF is decoded on the device's CPU every frame, on a Cortex-A53 that also
+  runs everything else. A big or long GIF starves the now-playing UI. Prefer
+  video for animated backgrounds: it decodes in hardware. Pick with
+  `kind: 'video'`, or tell users to keep GIFs small.
 
 `client.net` tunnels HTTP, websockets, and a SOCKS proxy through the phone. The
 SOCKS proxy needs `"net.proxy"` in the manifest's `permissions`. Read the
@@ -143,12 +442,13 @@ Read a surface's class in `dispatch.generated.d.ts` for its exact methods.
 | `net` | HTTP, WS, and SOCKS through the phone | fetch, wsOpen, wsSend, wsClose, streamOpen, streamCancel |
 | `hardware` | backlight and ambient light sensor | displaySetMode, displaySetLevel, stateGet, onAmbientLightUpdate, onBrightnessChanged |
 | `bluetooth` | adapter alias, bonds, discoverable | list, connect, forget, setAlias, enableDiscoverable |
-| `system` | version, logs, power, diagnostics | versionRequest, logsTail, logsSubscribe, reboot, powerOff, factoryReset, onVersion, onLogEntry, onOtaProgress |
+| `system` | version, logs, power, diagnostics, launcher gesture, companion launch | versionRequest, logsTail, logsSubscribe, reboot, powerOff, factoryReset, launcherGestureGet, launcherGestureSet, companionLaunchGet, companionLaunchSet, onVersion, onLogEntry, onOtaProgress, onLauncherGestureChanged, onCompanionLaunchChanged |
 | `time` | wall clock | get, onSnapshot, onChanged |
 | `voice` | mic and push-to-talk, capability-gated | pushToTalk, cancel, muteMic, stateGet |
 | `webapp` | list and activate installed webapps | list, current, activate, icon |
 | `forward` | passthrough to the desktop-side extension | text, json, binary, onText, onJson, onBinary |
 | `doc` | per-webapp documents the companion also writes | get, list, set, delete, onChanged |
+| `blob` | files the user picked in the companion, served by url | list, onChanged |
 | `lyrics` | timed lyrics for the current track | get |
 | `peer` | every known peer and its link state | onSnapshot |
 

package/template/package.json

@@ -7,20 +7,20 @@
     "dev": "vite",
     "dev:device": "vite --mode device",
     "build": "vite build && vite build -c vite.settings.config.ts",
+    "typecheck": "tsc --noEmit",
     "preview": "vite preview",
     "push": "bun scripts/push.ts",
     "share": "bun scripts/share.ts",
     "update": "bunx @bridgething/updater"
   },
   "dependencies": {
-    "@bridgething/client": "^0.12.0",
-    "preact": "^10.29.7",
+    "preact": "^11.0.1",
     "react": "^19.2.0",
     "react-dom": "^19.2.0"
   },
   "devDependencies": {
     "@msgpack/msgpack": "^3.1.3",
-    "@preact/preset-vite": "^2.10.5",
+    "@preact/preset-vite": "^2.10.6",
     "@tailwindcss/vite": "^4.3.3",
     "@types/react": "^19.2.10",
     "@types/react-dom": "^19.2.3",

package/template/scripts/bridgething.ts

@@ -1,7 +1,4 @@
 // Generated from @bridgething/webapp-shared.
-import { createRequire } from 'node:module';
-var __require = /* @__PURE__ */ createRequire(import.meta.url);
-
 // ../webapp-shared/src/dev.ts
 import { spawn as spawn2 } from 'node:child_process';
 import { isIPv4 } from 'node:net';
@@ -14,7 +11,7 @@ var DAEMON_PROXY_PATH = '/__bridgething';
 // ../webapp-shared/src/extension.ts
 import { spawn } from 'node:child_process';
 import { existsSync, mkdirSync, readFileSync, renameSync, writeFileSync } from 'node:fs';
-import { createRequire as createRequire2 } from 'node:module';
+import { createRequire } from 'node:module';
 import { homedir, platform } from 'node:os';
 import { delimiter, dirname, join as join2, resolve } from 'node:path';
 import { createInterface } from 'node:readline';
@@ -383,7 +380,7 @@ async function resolveDeno(root) {
 }
 function denoPackageDir(root) {
   try {
-    return dirname(createRequire2(join2(root, 'package.json')).resolve('deno/package.json'));
+    return dirname(createRequire(join2(root, 'package.json')).resolve('deno/package.json'));
   } catch {
     return null;
   }
@@ -824,6 +821,7 @@ ${lines.join(`
 // ../webapp-shared/src/dev.ts
 var DEVICE_MODE = 'device';
 var AUTHORIZE_PATH = '/__extension/authorize';
+var BLOB_URL_PREFIX = '/.bridgething/blob/';
 var DAEMON_PORT = 8891;
 var SWITCH_SETTLE_MS = 1000;
 async function daemonProxyTarget() {
@@ -832,13 +830,18 @@ async function daemonProxyTarget() {
   return `ws://${await resolveHost(deviceHostName())}:${DAEMON_PORT}`;
 }
 async function daemonProxy() {
+  const target = await daemonProxyTarget();
   return {
     [DAEMON_PROXY_PATH]: {
-      target: await daemonProxyTarget(),
+      target,
       ws: true,
       changeOrigin: true,
       rewrite: path => path.slice(DAEMON_PROXY_PATH.length) || '/',
     },
+    [BLOB_URL_PREFIX]: {
+      target: target.replace(/^ws/, 'http'),
+      changeOrigin: true,
+    },
   };
 }
 function bridgething() {
@@ -1083,4 +1086,4 @@ ${note ? `<p class="note">${escapeHtml(note)}</p>` : ''}
 ${status}
 `;
 }
-export { AUTHORIZE_PATH, bridgething, buildExtension, daemonProxy, daemonProxyTarget, DEVICE_MODE };
+export { AUTHORIZE_PATH, BLOB_URL_PREFIX, bridgething, buildExtension, daemonProxy, daemonProxyTarget, DEVICE_MODE };

package/template/scripts/push.ts

@@ -360,13 +360,13 @@ async function bridgethingPush({ scriptUrl }) {
     return parsed;
   };
   if (args.release) {
-    const manifest2 = readManifest();
-    for (const slot of declaredSlots(manifest2)) {
+    const manifest = readManifest();
+    for (const slot of declaredSlots(manifest)) {
       const result = await setSlot(target, slot, null);
       if (!result.ok) throw new Error(result.reason);
       console.log(`${slot} slot: reverted to the built-in one`);
     }
-    if (declaredSlots(manifest2).length === 0) console.log('this bundle declares no slots; nothing to release');
+    if (declaredSlots(manifest).length === 0) console.log('this bundle declares no slots; nothing to release');
     return;
   }
   if (!args.skipBuild) await buildBundle(repoDir);