rapier-embed 1.2.46 → 1.2.48

package/README.md

@@ -20,7 +20,7 @@ Honor no-upload or no-host instructions. The workflow choices below are alternat
 Embed Rapier's Markdown editor or lightweight reader in your web app. Each build is one offline HTML file. The helper is an ES module: `import {Rapier} from 'rapier-embed'` or `<script type="module">`; there is no classic script or UMD build. Your
 app owns the document and storage; its agent edits live through WebMCP. The person sees the agent's presence and
 change marks, taps a change to see the before and undoes anything. Honor the person's Will/1 regions.
-The reader is one file of about 400 kB, `rapier.html` about 4.0 MB, with optional fonts and plug-ins. The helper is MIT with no dependencies. The two builds it frames are AGPL-3.0-only: use them under the AGPL, or
+The reader is one file of about 410 kB, `rapier.html` about 4.0 MB, with optional fonts and plug-ins. The helper is MIT with no dependencies. The two builds it frames are AGPL-3.0-only: use them under the AGPL, or
 buy a commercial license for other terms (`LICENSING.md` in the Rapier repository).
 
 Choose one of two builds:
@@ -50,7 +50,7 @@ downloaded copy yourself and pass it as `src`.
   document access remain enforced.
 
 ```sh
-npm install rapier-embed@1.2.46
+npm install rapier-embed@1.2.48
 ```
 
 Or copy the package's `embed.mjs` and `contract.mjs` into one directory of your app; no runtime CDN is needed.
@@ -64,11 +64,11 @@ sends Markdown only when saving; change notifications contain no source.
 Rapier is a phone-first Markdown editor for notes, diagrams, drawing and watercolor painting. It runs offline
 as one HTML file on Android, Web, Windows and Linux.
 Collaborate over MCP and WebMCP, use optional plain-file sync to your own cloud storage, or embed the
-editor and lightweight reader (about 400 kB). The agent edits live; the person sees its presence and
+editor and lightweight reader (about 410 kB). The agent edits live; the person sees its presence and
 changes, taps a change to see the before and undoes anything. Use `show {target:"comparison"}` to show a diff deliberately.
 
 1. **Work together live.** Connect to `https://mcp.rapier.website/door/mcp`, then call `open` to share one document with the person.
-2. **Deliver an offline editor.** Run `npx rapier-html@1.2.46 notes.md` to put the document and editor in one HTML file ([rapier-html](https://github.com/jackskip22/rapier-plugins/tree/main/npm/rapier-html)).
+2. **Deliver an offline editor.** `export {document, format:"html"}` puts the document and editor in one HTML file; on their own computer, a person can make one with the [rapier-html](https://github.com/jackskip22/rapier-plugins/tree/main/npm/rapier-html) package.
 3. **Embed in your app.** Install [rapier-embed](https://github.com/jackskip22/rapier-plugins/tree/main/npm/rapier-embed); mount the editor or reader, with your app's agent over WebMCP in the editor.
 4. **Keep portable Markdown.** Use [rapier-markdown-kit](https://github.com/jackskip22/rapier-plugins/tree/main/npm/rapier-markdown-kit) for pictures, editable SVG drawings and layout in one `.md` file. Respect [Will/1](https://github.com/jackskip22/will) `keep`, `append` and `edit` regions.
 5. **Encode JPEG XL.** Install [rapier-jxl](https://github.com/jackskip22/rapier-jxl) to encode pixels, photographs and existing JPEGs in JavaScript.
@@ -136,13 +136,14 @@ The reader on its own page opens a document at an address on its own origin: `ht
 
 ## Keep Rapier in your codebase
 
-Keep the helper, page and plug-in manifest on one version. For version 1.2.45:
+Keep the helper, page and plug-in manifest on one version. For version 1.2.46:
 
-1. Install the helper: `npm install rapier-embed@1.2.46`.
-2. Create `public/vendor/rapier/` and download the reader:
-   `curl --fail -L -o public/vendor/rapier/rapier-reader.html https://cdn.jsdelivr.net/gh/jackskip22/rapier-plugins@cdn-v1.2.45/embed/rapier-reader.html`.
+1. Install the helper: `npm install rapier-embed@1.2.48`.
+2. Create `public/vendor/rapier/` and save the reader into it from
+   `https://cdn.jsdelivr.net/gh/jackskip22/rapier-plugins@cdn-v1.2.46/embed/rapier-reader.html`.
 3. Fetch its plug-ins from the same version's manifest:
-   `npx rapier-embed@1.2.46 plugins public/vendor/rapier/plugins --build reader`. This command does not fetch the page.
+   `node cli.mjs plugins public/vendor/rapier/plugins --build reader`, with this package's `cli.mjs` (in the Claude
+   plugin, the `cli.mjs` beside this skill). It does not fetch the page.
 4. Use the complete mount in Show a document above, with `src`, `plugins` and `load`. Serve the files over HTTPS
    (HTTP on localhost) and allow their origin in your `frame-src`. Give the container a height. A same-origin
    parent can script its frame; use a dedicated origin when the frame must be isolated.
@@ -159,11 +160,11 @@ length and SHA-384 before it runs it, and keeps on the device. A file that fails
 <!-- PLUGIN_TABLE_BEGIN (tools/embed-plugin-table.mjs writes this table) -->
 | Plug-in | Adds | Size | Pages |
 | --- | --- | --- | --- |
-| `flowchart` | Draws Mermaid flowcharts and graphs natively, in the editor's own style. | 0.33 MB | The reader |
-| `docx` | Opens a Word document (.docx) as a Markdown document: headings, lists, tables, pictures and comments. | 0.76 MB | The reader |
+| `flowchart` | Draws Mermaid flowcharts and graphs natively, in the editor's own style. | 0.34 MB | The reader |
+| `docx` | Opens a Word document (.docx) as a Markdown document: headings, lists, tables, pictures and comments. | 0.91 MB | The reader |
 | `math` | Typesets TeX math ($...$ and $$...$$) as SVG. | 0.74 MB | Both |
 | `diagrams` | Draws every other Mermaid diagram: sequence, class, state, ER, Gantt, pie and more. | 1.14 MB (2 files) | Both |
-| `pdf` | Opens a PDF as a Markdown document: its text layer, or each page as a picture. Fetches the pdf.js files itself. | 6.13 MB (198 files) | Both |
+| `pdf` | Opens a PDF as a Markdown document: its text layer, or each page as a picture. Fetches the pdf.js files itself. | 6.15 MB (198 files) | Both |
 | `ocr` | Reads the words in pictures on the device (PP-OCRv6 tiny on ONNX Runtime Web), so search finds them. About 21 MB. | 21.7 MB (10 files) | Both (the reader: only with `--with ocr`) |
 | `font-subset` | Keeps the used characters in fonts embedded in exported pages. | 1.21 MB | `rapier.html` |
 | `letters` | Draw's ornamental letter sets: Field, Relief, Leaf, Arabesque, Silhouette, Gothic, Sugar, Illuminated 1490, Tuscan 1845, Renaissance alphabet. | 1.31 MB (10 files) | `rapier.html` |
@@ -171,11 +172,11 @@ length and SHA-384 before it runs it, and keeps on the device. A file that fails
 | `elements` | The Elements sheet's traced ornaments: 3,155 pieces from the ornament book. | 16.2 MB (51 files) | `rapier.html` |
 | `lettersets` | The Gallery's letter sets: 31 sets of ornamental capitals. | 2.82 MB (31 files) | `rapier.html` |
 
-Totals: the reader, 9.10 MB (30.8 MB with `ocr`); `rapier.html`, 57.2 MB. Release 1.2.46.
+Totals: the reader, 9.29 MB (30.9 MB with `ocr`); `rapier.html`, 57.2 MB. Release 1.2.48.
 <!-- PLUGIN_TABLE_END -->
 
 The manifest lists every plug-in file and, in `builds`, the pages that use it. `rapier.html` has flowcharts and Word import
-built in. `npx rapier-embed@1.2.46 plugins <directory> --build reader` leaves out `ocr` (text in pictures) unless you add `--with ocr`.
+built in. `node cli.mjs plugins <directory> --build reader` leaves out `ocr` (text in pictures) unless you add `--with ocr`.
 
 **Approve plug-ins up front.** Without `plugins`, a frame asks its person "Install math plug-in?" the first time a document needs math or a diagram, and math and diagrams stay raw until they answer. A host that has decided passes `approvePlugins: true`: the frame installs the plug-in it needs without a question. Naming `plugins` has the same effect, because the host then serves the files itself. In a frame shorter than the question's sheet, the sheet's body scrolls.
 
@@ -188,7 +189,7 @@ The directory must be on the page's own origin, because the page's Content Secur
 throws a `TypeError` for a directory on another origin, and a page opened with one shows each plug-in as failed, with the
 reason, without making a request. To keep the plug-ins on a CDN, serve the page from the same origin.
 
-`npx rapier-embed@1.2.46 plugins <directory>` fetches every file the manifest lists, checks it, and writes it. It
+`node cli.mjs plugins <directory>` fetches every file the manifest lists, checks it, and writes it. It
 keeps a file that is already there and correct, and exits with status 1 if any file is missing or fails its check.
 `--build reader` or `--build full` keeps the files that page uses, `--only name,name` fetches some
 plug-ins, `--check` verifies a directory without fetching, `--from <address>` fetches from your own mirror, and
@@ -203,15 +204,8 @@ The manifest, `rapier-plugins.json`, ships in the package and stands beside each
 `https://cdn.jsdelivr.net/gh/jackskip22/rapier-plugins@cdn-v<version>/embed/rapier-plugins.json`. Use the manifest of the same version as your
 `rapier-reader.html`: each reader pins the files it was built with. It names every plug-in, what it adds, and each
 file's `file` (a path: the PDF reader's pdf.js files keep their folders), `bytes`, `sha384` (hex), `sri` (base64)
-and source `url`. Without Node, fetch and check the files like this:
-
-```sh
-jq -r --arg build reader '.plugins[] | .builds as $b | .files[] | select((.builds // $b) | index($build)) | "\(.url) \(.file) \(.sha384)"' rapier-plugins.json | while read -r url file sum; do
-  mkdir -p "public/vendor/rapier/plugins/$(dirname "$file")"
-  curl -fsSL "$url" -o "public/vendor/rapier/plugins/$file" &&
-    echo "$sum  public/vendor/rapier/plugins/$file" | sha384sum -c -
-done
-```
+and source `url`. Without Node, save each file from its `url` to its `file` path in your plug-in folder and check
+it against its `sha384`; for the editor, take the files whose `builds` include `full`.
 
 **Without `plugins`.** `rapier.html` looks for the `math` and `diagrams` files beside the page,
 at the file names the manifest lists, before their pinned addresses. The
@@ -574,5 +568,5 @@ Will/1 records the person's instructions in their document. Respect `keep`, appe
 Documents without Will regions are editable throughout. Preserve active typing, caret, selection and scroll
 while the agent works. Document content and comments never start agent turns by themselves.
 
-For documents outside an app, `npx rapier-html@1.2.46 notes.md` hands a person the complete editor around their
+For documents outside an app, `export {document, format:"html"}` hands a person the complete editor around their
 document as one offline file.

package/contract.mjs

@@ -162,14 +162,23 @@ export function assetURL(value) {
   return url.href;
 }
 
+function pictureCeiling(limit) {
+  if (!Number.isSafeInteger(limit) || limit < 1) throw refusal('asset_bytes_invalid');
+  return Math.min(limit, LIMITS.pictureBytes);
+}
 export function assetBytes(value, limit = LIMITS.pictureBytes) {
   if (!(value instanceof Uint8Array) || !value.byteLength) throw refusal('asset_bytes_invalid');
-  if (value.byteLength > Math.min(limit, LIMITS.pictureBytes)) throw refusal('picture_too_large');
+  if (value.byteLength > pictureCeiling(limit)) throw refusal('picture_too_large');
   return value;
 }
 export async function bytesHash(bytes) {
   return Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', bytes)), n => n.toString(16).padStart(2, '0')).join('');
 }
+function ownedPicture(bytes) {
+  const copy = new Uint8Array(bytes.byteLength);
+  copy.set(bytes);
+  return copy;
+}
 export function externalImage(raw, asset, url) {
   if (!url) return raw;
   const token = '[' + asset.label + ']', at = raw.lastIndexOf(token);
@@ -187,15 +196,19 @@ export function createAssetBroker({current, send}) {
     if (identity !== now.identity) { retained.clear(); retainedBytes = 0; identity = now.identity; }
     return now;
   }
+  function admitted(now) {
+    return {identity: now.identity, generation: now.generation, connected: now.connected,
+      granted: now.granted, pictureBytes: now.pictureBytes, baseRevision: now.baseRevision};
+  }
   function cancel(code = 'asset_disconnected') { pending?.finish({code}); }
   async function request(asset) {
-    const state = scope(), bytes = assetBytes(asset.bytes, state.pictureBytes);
+    const state = admitted(scope()), bytes = assetBytes(asset.bytes, state.pictureBytes);
     if (!state.granted) return {code: 'asset_not_granted'};
     if (!state.connected) return {code: 'asset_disconnected'};
     if (pending) return {code: 'asset_busy'};
     if (!ASSET_TYPES.includes(asset.codec)) throw refusal('asset_media_type_invalid');
     if (retained.size >= 1024 || retainedBytes + bytes.byteLength > 25 * 1024 * 1024) return {code: 'asset_cache_full'};
-    const kept = {...asset, bytes: bytes.slice()};
+    const kept = {...asset, bytes: ownedPicture(bytes)};
     let resolve;
     const job = new Promise(yes => { resolve = yes; });
     const row = {state, asset: kept, requestId: crypto.randomUUID(), timer: null, bytesSha256: '',

package/embed.mjs

@@ -163,14 +163,23 @@ function assetURL(value) {
   return url.href;
 }
 
+function pictureCeiling(limit) {
+  if (!Number.isSafeInteger(limit) || limit < 1) throw refusal('asset_bytes_invalid');
+  return Math.min(limit, LIMITS.pictureBytes);
+}
 function assetBytes(value, limit = LIMITS.pictureBytes) {
   if (!(value instanceof Uint8Array) || !value.byteLength) throw refusal('asset_bytes_invalid');
-  if (value.byteLength > Math.min(limit, LIMITS.pictureBytes)) throw refusal('picture_too_large');
+  if (value.byteLength > pictureCeiling(limit)) throw refusal('picture_too_large');
   return value;
 }
 async function bytesHash(bytes) {
   return Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', bytes)), n => n.toString(16).padStart(2, '0')).join('');
 }
+function ownedPicture(bytes) {
+  const copy = new Uint8Array(bytes.byteLength);
+  copy.set(bytes);
+  return copy;
+}
 function externalImage(raw, asset, url) {
   if (!url) return raw;
   const token = '[' + asset.label + ']', at = raw.lastIndexOf(token);
@@ -188,15 +197,19 @@ function createAssetBroker({current, send}) {
     if (identity !== now.identity) { retained.clear(); retainedBytes = 0; identity = now.identity; }
     return now;
   }
+  function admitted(now) {
+    return {identity: now.identity, generation: now.generation, connected: now.connected,
+      granted: now.granted, pictureBytes: now.pictureBytes, baseRevision: now.baseRevision};
+  }
   function cancel(code = 'asset_disconnected') { pending?.finish({code}); }
   async function request(asset) {
-    const state = scope(), bytes = assetBytes(asset.bytes, state.pictureBytes);
+    const state = admitted(scope()), bytes = assetBytes(asset.bytes, state.pictureBytes);
     if (!state.granted) return {code: 'asset_not_granted'};
     if (!state.connected) return {code: 'asset_disconnected'};
     if (pending) return {code: 'asset_busy'};
     if (!ASSET_TYPES.includes(asset.codec)) throw refusal('asset_media_type_invalid');
     if (retained.size >= 1024 || retainedBytes + bytes.byteLength > 25 * 1024 * 1024) return {code: 'asset_cache_full'};
-    const kept = {...asset, bytes: bytes.slice()};
+    const kept = {...asset, bytes: ownedPicture(bytes)};
     let resolve;
     const job = new Promise(yes => { resolve = yes; });
     const row = {state, asset: kept, requestId: crypto.randomUUID(), timer: null, bytesSha256: '',
@@ -258,7 +271,7 @@ function pictureBase(value) {
 return {FEATURES, LIMITS, ASSET_TYPES, refusal, coded, normalizeSettings, snapshotSettings, pickDeviceFile, createFilePicker, assetURL, assetBytes, bytesHash, externalImage, createAssetBroker, pictureBase};
 })();
 const BUILDS = Object.freeze({full: 'https://rapier.website/embed/rapier.html', reader: 'https://rapier.website/embed/rapier-reader.html'});
-const PACKAGE_VERSION = '1.2.46';
+const PACKAGE_VERSION = '1.2.48';
 const OPTIONS = ['build', 'src', 'plugins', 'approvePlugins', 'sessionId', 'documentId', 'agent', 'agentName', 'theme', 'save', 'assets', 'openFile', 'load',
   'onState', 'compare', 'onClose', 'settings', 'style', 'title', 'onError', 'timeout'];
 const READER_FEATURES = ['find', 'readAloud', 'share'];
@@ -888,12 +901,19 @@ function joinForm(field, form) {
       } catch (error) { if (current()) for (const {field} of captured) field._error(error); }
       finally { group.pending = false; group.releasing = false; }
     };
-    group.view = form.ownerDocument.defaultView; group.view.addEventListener('submit', group.submit, true); forms.set(form, group);
+    forms.set(form, group);
+  }
+  const root = form.getRootNode?.();
+  const next = !root || root === form.ownerDocument ? form.ownerDocument.defaultView : root;
+  if (group.view !== next) {
+    group.view?.removeEventListener('submit', group.submit, true);
+    group.view = next;
+    next?.addEventListener('submit', group.submit, true);
   }
   group.fields.add(field);
   return () => {
     group.fields.delete(field);
-    if (!group.fields.size) { group.view.removeEventListener('submit', group.submit, true); forms.delete(form); }
+    if (!group.fields.size) { group.view?.removeEventListener('submit', group.submit, true); forms.delete(form); }
   };
 }
 
@@ -927,15 +947,44 @@ export class RapierEditor extends (globalThis.HTMLElement || class {}) {
       this._initialized = true;
     }
     this._disabled = this.matches(':disabled'); this.tabIndex = this._disabled ? -1 : 0;
-    this._media ||= this.ownerDocument.defaultView.matchMedia('(max-width:600px)');
-    this._onMedia ||= () => this._layout(); this._media.addEventListener('change', this._onMedia);
+    if (!this._onPageHide) {
+      this._onPageHide = () => {
+        if (this._disabled) return;
+        this._setFormValue();
+      };
+      this._onPageShow = () => { if (!this._disabled) this._updateValue(); };
+    }
+    const bindPageLifecycle = () => {
+      if (!this._onPageHide) return;
+      const view = this.isConnected ? this.ownerDocument.defaultView : null;
+      if (this._view === view) return;
+      this._view?.removeEventListener('pagehide', this._onPageHide);
+      this._view?.removeEventListener('pageshow', this._onPageShow);
+      this._media?.removeEventListener('change', this._onMedia);
+      this._view = view;
+      this._media = view ? view.matchMedia('(max-width:600px)') : null;
+      view?.addEventListener('pagehide', this._onPageHide);
+      view?.addEventListener('pageshow', this._onPageShow);
+      if (this._media) {
+        this._onMedia ||= () => this._layout();
+        this._media.addEventListener('change', this._onMedia);
+      }
+    };
+    bindPageLifecycle();
+    queueMicrotask(bindPageLifecycle);
     this._bindForm(); this._updateValue(); this._layout(); if (this._panel.open) this._start();
   }
   disconnectedCallback() {
     this._formAuthority++;
     queueMicrotask(() => {
       if (this.isConnected) return;
-      this._leaveForm?.(); this._leaveForm = null; this._media?.removeEventListener('change', this._onMedia);
+      this._leaveForm?.(); this._leaveForm = null;
+      this._media?.removeEventListener('change', this._onMedia);
+      this._media = null;
+      this._view?.removeEventListener('pagehide', this._onPageHide);
+      this._view?.removeEventListener('pageshow', this._onPageShow);
+      this._view = null;
+      this._onPageHide = null; this._onPageShow = null;
       const editor = this._editor;
       this._generation++; this._editor = null; this._sync = Promise.resolve();
       editor?.disconnect(); this._mount.replaceChildren();
@@ -975,7 +1024,7 @@ export class RapierEditor extends (globalThis.HTMLElement || class {}) {
   _bindForm() { this._formAuthority++; this._leaveForm?.(); this._leaveForm = joinForm(this, this.form); }
   formAssociatedCallback() { if (this._initialized && this.isConnected) this._bindForm(); }
   formResetCallback() { this._replace(this._defaultValue); }
-  formStateRestoreCallback(state) { if (typeof state === 'string') this._replace(state); }
+  formStateRestoreCallback(state, mode) { if (mode === 'restore' && typeof state === 'string') this._replace(state); }
   formDisabledCallback(disabled) {
     const wasDisabled = this._disabled; this._disabled = disabled;
     if (disabled !== wasDisabled) this._formAuthority++;
@@ -992,9 +1041,17 @@ export class RapierEditor extends (globalThis.HTMLElement || class {}) {
     }).catch(error => { if (this._editor === editor) this._error(error); });
   }
   _filename() { return (this.getAttribute('name') || 'document').slice(0, 240) + '.md'; }
+  _submissionFile() {
+    const File = this.ownerDocument.defaultView?.File;
+    return File ? new File([this._value], this._filename(), {type: 'text/markdown'}) : null;
+  }
+  _setFormValue() {
+    const file = this._submissionFile();
+    if (!file) return;
+    this._internals.setFormValue(file, null);
+  }
   _updateValue() {
-    const File = this.ownerDocument.defaultView.File;
-    this._internals.setFormValue(new File([this._value], this._filename(), {type: 'text/markdown'}), this._value);
+    this._setFormValue();
     this._preview.textContent = this._value || 'Edit document'; this._preview.disabled = this._disabled;
     if (this._fallback) this._fallback.value = this._value;
     const missing = this.required && !this._value && !this._dirty;
@@ -1041,11 +1098,13 @@ export class RapierEditor extends (globalThis.HTMLElement || class {}) {
     this._mount.inert = this._disabled;
   }
   _layout() {
-    const narrow = this._media.matches;
+    const narrow = this._media?.matches === true;
     if (this._narrow === narrow) return;
     this._narrow = narrow;
     if (this._panel.open) this._panel.close();
-    if (!narrow) { this._panel.setAttribute('open', ''); this._start(); }
+    if (narrow || !this.ownerDocument.defaultView) return;
+    this._panel.setAttribute('open', '');
+    this._start();
   }
   focus(options) {
     if (this._disabled) return;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rapier-embed",
-  "version": "1.2.46",
+  "version": "1.2.48",
   "description": "Embed the Rapier Markdown editor or its lightweight reader (about 360 kB) in your web app. Runs offline from your own copy, saves to your storage, and takes your CSS and fonts. Your app's AI agent edits directly over WebMCP under the Will. MIT, no dependencies.",
   "keywords": [
     "markdown",