@yargote/artifacts-cli 0.1.0-beta.5 → 0.1.0-beta.7

package/skills/artifacts-design/references/canvas.md

@@ -0,0 +1,100 @@
+# Author a design canvas
+
+Create a retained `design` snapshot when several HTML boards belong in one canvas. Each board is a complete self-contained HTML document. The canvas supplies placement, page selection, notes, pan, zoom, and a focus view. The calling MCP or CLI skill owns saving and publication.
+
+## Compose the boards
+
+1. Choose a frame size for each board. Common starting sizes are 1440 by 900 for desktop, 390 by 844 for a phone, and 768 by 1024 for a tablet. These are authoring conventions, not schema limits.
+2. Place boards in a row with 80 px between their edges. Start another row 120 px below the tallest board in the preceding row. Coordinates are canvas pixels, and boards can use different sizes.
+3. Write each board under `boards/` as one UTF-8 `.html` file. Inline its styles, scripts, images, and fonts. Files retained beside a board are downloads, not relative executable assets.
+4. Apply this skill's typography and Catppuccin tokens inside each board. The canvas ground follows the viewer's light or dark theme independently.
+5. Define `canvas.json` with the exact index below. Keep snapshot metadata outside the index.
+
+```json
+{
+	"v": 1,
+	"boards": {
+		"boards/Desktop.html": { "x": 0, "y": 0, "w": 1440, "h": 900, "title": "Desktop", "page": "overview" },
+		"boards/Phone.html": { "x": 1520, "y": 0, "w": 390, "h": 844, "title": "Phone", "page": "overview" },
+		"boards/Detail.html": { "x": 0, "y": 0, "w": 1440, "h": 900, "title": "Detail", "page": "detail" },
+		"boards/DetailPhone.html": { "x": 1520, "y": 0, "w": 390, "h": 844, "title": "Detail phone", "page": "detail" }
+	},
+	"order": ["boards/Desktop.html", "boards/Phone.html", "boards/Detail.html", "boards/DetailPhone.html"],
+	"notes": {
+		"review": { "x": 0, "y": 1020, "w": 390, "text": "Review both layouts.", "page": "overview" }
+	},
+	"pages": [
+		{ "id": "overview", "name": "Overview" },
+		{ "id": "detail", "name": "Detail" }
+	]
+}
+```
+
+The first page opens initially. Boards and notes without `page` appear on the first page when pages exist. Without pages, every board and note appears together. A page can reuse the coordinates of another page.
+
+## Index reference
+
+The index and its nested entries reject unknown fields. The complete rules are:
+
+| Field | Rule |
+| --- | --- |
+| `v` | Required integer `1`. |
+| `boards` | Required object with at most 32 entries. Every key matches `^boards/[A-Za-z0-9_][A-Za-z0-9_.-]*\.html$`. Names are case-sensitive and flat. |
+| Board `x`, `y` | Required finite numbers from -1,000,000 to 1,000,000 inclusive. Fractions are accepted. |
+| Board `w`, `h` | Required finite numbers from 40 to 8000 inclusive. Fractions are accepted. |
+| Board `title` | Optional string of 1 to 256 characters. The board path is the display fallback. |
+| Board `page` | Optional ID that names a declared page. |
+| `order` | Required array of 1 to 32 board paths. It names every board exactly once and contains no other path. Its order controls rendering. |
+| `notes` | Optional object with at most 200 entries. Each key is an ID. |
+| Note `x`, `y`, `text` | Coordinates use the board coordinate limits. `text` is a required string rendered as escaped text, not HTML. |
+| Note `w`, `page` | Optional width from 40 to 8000 and an optional declared page ID. |
+| `pages` | Optional array of at most 32 objects with required `id` and `name`. IDs are unique. `name` contains 1 to 256 characters. |
+| ID | 1 to 40 ASCII letters, digits, underscores, or hyphens. `__proto__` is rejected. |
+
+Every indexed board has a matching snapshot file with the same `path`, `mediaType: "text/html"`, `encoding: "utf8"`, and the complete HTML in `data`. A snapshot has at most 32 files total, including other retained downloads. The directory preparer rejects every unindexed entry in `boards/`, missing boards, directories, symbolic links, and invalid UTF-8. The snapshot contract itself permits other unindexed attachments.
+
+## Embed fonts within the shared budget
+
+Run the real font helper once for each board after completing its HTML:
+
+```sh
+node <design-skill-directory>/scripts/embed-fonts.mjs my-canvas/boards/Desktop.html
+node <design-skill-directory>/scripts/embed-fonts.mjs my-canvas/boards/Phone.html
+```
+
+For the CLI, resolve `<design-skill-directory>` with `artifacts skills path artifacts-design`. The helper selects bundled Latin font subsets from actual CSS declarations and embeds `data:` WOFF2 faces. It rewrites the board in place and is safe to rerun.
+
+Use one small, consistent selection of bundled families and styles across boards. Each board needs its own embedded font bytes because each iframe is an independent document. A subset cannot be shared through an attachment URL. Three families add about 135 KB per board, so repeated embedding can exhaust the canvas budget. Prefer one family and only the styles the board uses when many boards share one revision. The helper checks one board's 1 MiB limit. The preparer and server check the combined revision.
+
+The shared limit is 1,048,576 decoded bytes. It includes serialized snapshot metadata, UTF-8 index text, every file path and media type, and every decoded file body. Whitespace in `canvas.json` counts. The 1 MiB limit applies to all boards together, not to each board separately.
+
+## Save the canvas
+
+For MCP, send one complete snapshot to `artifacts_create` or `artifacts_update`:
+
+```js
+{
+	metadata: { title: 'Product layouts', description: 'Desktop and phone review.' },
+	content: { kind: 'design', text: JSON.stringify(index) },
+	files: boardPaths.map((path) => ({ path, mediaType: 'text/html', encoding: 'utf8', data: boardHtml[path] }))
+}
+```
+
+Here `index`, `boardPaths`, and `boardHtml` come from your completed source files. Read the saved revision back through `artifacts_read` before reporting persistence.
+
+For the CLI, keep `canvas.json` and `boards/*.html` in one directory. Run the bundled preparer:
+
+```sh
+node <cli-skill-directory>/scripts/prepare-retained.mjs ./my-canvas > snapshot.json
+artifacts create --snapshot snapshot.json
+```
+
+Resolve `<cli-skill-directory>` with `artifacts skills path artifacts-cli`. Use the script at that returned path so its installed contracts dependency resolves. The preparer preserves the index text and board HTML and sorts snapshot files by path. Canvas rendering still follows `order`. It emits a validated snapshot on stdout, uses the directory basename as `metadata.title`, and sets `metadata.description` to `""`. Edit those metadata fields in the emitted JSON before saving when the task calls for a specific title or description. The directory form accepts exactly one positional argument. The named-option form prepares retained-verification configuration and keeps its separate contract.
+
+## Check the retained canvas
+
+Open the exact saved revision in the authenticated panel. Confirm all boards fit on the initial page, select each page, and open a board through its name button. Focus view shows that board at its declared width and height and enables its controls. **Volver al lienzo** returns to the prior pan and zoom. Escape also returns when a canvas control has keyboard focus. After interacting inside a board, use **Volver al lienzo** to return. For Escape, first use Shift+Tab to move focus back to the canvas controls. Embedded boards remain inert in the overview.
+
+Check publication through the protected URL returned by `artifacts_publish`. In unsupported browsers, the canvas displays an inert listing of board source. Rendering uses nested opaque `srcdoc` iframes with `sandbox="allow-scripts"` and the existing content policy. Board scripts can still consume renderer time or briefly perturb focus. The canvas is not an absolute keyboard isolation boundary.
+
+Export retains the index as `content.json` and boards as `files/boards/*.html`. To recreate a snapshot, use the manifest's `metadata`, preserve `content.json` as `content.text`, and reconstruct each file using its declared encoding. The ZIP manifest sorts files by path, matching the directory preparer. Snapshot digests preserve the original `files` array order, so keep that order from an independent saved read when comparing digests after recreation. A directory preparer also derives new metadata. Restore the manifest metadata and original file order before comparing snapshot digests.

package/skills/artifacts-design/references/local-checks.md

@@ -0,0 +1,70 @@
+# Check local HTML before saving
+
+Run the helper after embedding fonts and before the calling skill's create or update operation.
+
+```sh
+design_skill=$(artifacts skills path artifacts-design)
+node "$design_skill/scripts/verify-local.mjs" page.html --evidence ./page-evidence
+```
+
+The helper needs Node 24+, an existing `playwright` or `playwright-core` package, and Chrome or Chromium 152+. It resolves the package from the current project first, then from its own installation. It tries existing Playwright browser binaries and system executables. To select an existing browser explicitly, add `--browser /absolute/path/to/chromium`. An explicit selection does not fall back to another executable.
+
+Missing dependencies, incompatible versions, and launch failures produce actionable diagnostics. The helper never installs software, downloads a browser, disables browser sandboxing, or relaxes document policies.
+
+## Describe controls
+
+Add `--expectations checks.json` to replay actions and assert their results. Each matrix case starts with a fresh document. Steps run in order. A failed step ends that case's sequence because later steps may depend on it. The remaining cases still run.
+
+```json
+{
+  "expectations": [
+    { "kind": "visibleCount", "selector": ".mobile-map, .desktop-map", "count": 1 },
+    { "kind": "visible", "selector": ".mobile-map", "visible": true, "when": { "width": 375 } },
+    { "kind": "visible", "selector": ".desktop-map", "visible": true, "when": { "width": 1280 } },
+    { "kind": "text", "selector": "#total", "text": "5.00" },
+    { "kind": "click", "selector": "#calculate" },
+    { "kind": "text", "selector": "#total", "text": "28.40" },
+    { "kind": "press", "selector": "#reset", "key": "Enter" },
+    { "kind": "text", "selector": "#total", "text": "5.00" }
+  ]
+}
+```
+
+Every step requires `kind` and a Playwright locator `selector`. Optional `when` limits it to `width` of 375 or 1280, `theme` of `light` or `dark`, or both. Unknown fields and malformed values fail configuration validation.
+
+| Kind | Additional fields | Observable result |
+| --- | --- | --- |
+| `text` | `text`, a string | Exact inner text of one element. Add a `visible` check when visibility is required. |
+| `count` | `count`, a nonnegative integer | Number of matching elements. |
+| `visible` | `visible`, a boolean | Visibility of exactly one matching element. A missing element fails. |
+| `visibleCount` | `count`, a nonnegative integer | Number of visible matches. Use one selector matching both responsive variants to assert exclusivity. |
+| `attribute` | `name`, a nonempty string, and `value`, a string or `null` | Exact attribute value. `null` requires absence. |
+| `click` | None. | Real pointer activation. |
+| `press` | `key`, a Playwright key string such as `Enter`, `Space`, or `Tab` | Keyboard input to the selected element. |
+| `fill` | `value`, a string | Input or textarea edit. |
+| `check` | `checked`, a boolean | Checkbox or radio state. |
+| `select` | `values`, an array of strings | Selected option values. |
+
+Assertions poll for their expected result. Actions wait for Playwright's actionability checks. The JSON document accepts at most 100 steps and an optional `timeoutMs` from 100 to 30000. Its default is 3000 ms per expectation. With no expectations file, the helper checks rendering and errors but does not infer the document's intended controls.
+
+Each variant also has a total deadline of `timeoutMs * (step count + 1)`, bounded between 10 and 60 seconds. The deadline includes loading, checks, captures, and final observations. If the renderer stops responding, the helper closes that variant's context, records `deadline.exceeded`, and marks its remaining evidence incomplete. The other variants still run. A deadline failure cannot pass the automatic checks.
+
+## Inspect the evidence
+
+The helper creates a fresh `local-*` subdirectory under `--evidence`. It writes `report.json`, `index.md`, and PNG images. Repeated runs keep separate evidence.
+
+The fixed matrix is 375 and 1280 px wide at 900 px high, each in light and dark. Every case checks document overflow before and after its scenario, runtime exceptions, error console entries, and forbidden resource attempts. CSP violations include resource attempts blocked before a browser request occurs. Initial and final captures scroll the actual iframe in viewport-sized steps. Each phase saves at most 12 tiles. Capture records include actual scroll offsets and mark incomplete coverage in `captureCoverage.truncated`.
+
+The document runs in an opaque-origin iframe with `sandbox="allow-scripts"`. Its response uses the Artifacts preview CSP, `Connection-Allowlist: ()`, and disabled DNS prefetching. Fonts, images, and media must be embedded as `data:` URIs. Network connections, remote scripts, frames, objects, forms, and workers remain blocked. The local server exposes only the generated wrapper and content, without arbitrary filesystem access. Browser request routing also denies other destinations.
+
+The report records the chosen executable, version, user agent, rejected browser candidates, source hashes before and after verification, actual content response policy and hash, per-case checks, errors, and screenshots. It identifies the evidence as **renderizado local** and leaves `authenticatedPublication` as `not-verified`. It does not modify the HTML, save a revision, publish, or contact the Artifacts service. No service credentials are required.
+
+| Exit code | Meaning |
+| --- | --- |
+| 0 | Automatic checks passed. Visual review remains required. |
+| 1 | An automatic check failed. |
+| 2 | Setup or configuration blocked the run. |
+
+A structured blocked report is written when a valid evidence destination is available. The helper prints the report as JSON on standard output.
+
+Read the screenshots and the [interface checks](interface-checks.md) before accepting the design. Check content fidelity, reading order, labels, focus, alignment, density, and both themes. A clean console cannot establish those judgments. Each run observes load, font readiness, its declared interactions, and a short settling period. Delayed behavior beyond the run and content outside captured coverage require further inspection. Verify the retained revision and protected publication separately through the service workflow after saving.

package/skills/artifacts-design/scripts/embed-fonts.mjs

@@ -14,7 +14,208 @@ const faces = [
   { family: 'Newsreader', style: 'italic', weight: '400 700', file: 'newsreader-italic.woff2' },
 ];
 const limit = 1024 * 1024;
-const embedded = /<style data-artifacts-fonts>[\s\S]*?<\/style>\n?/;
+
+function htmlTypographySources(page) {
+  const sources = [];
+  const managed = [];
+  const tags = /<!--[\s\S]*?(?:-->|$)|<![^>]*>|<\/?([a-z][a-z0-9:-]*)(?=[\s/>])(?:[^"'<>]|"[^"]*"|'[^']*')*>/gi;
+  let italic = false;
+  let anchor;
+  let head;
+  let match;
+  while ((match = tags.exec(page))) {
+    const [tag, name] = match;
+    if (tag.startsWith('<!--')) continue;
+    if (/^<!doctype\b/i.test(tag)) head ??= tags.lastIndex;
+    if (!name || tag.startsWith('</')) continue;
+    const lower = name.toLowerCase();
+    if (lower === 'head') head = tags.lastIndex;
+    const attributes = new Map();
+    const attribute = /([^\s=/>]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s>]+)))?/g;
+    const entities = { quot: '"', apos: "'", amp: '&', lt: '<', gt: '>', sol: '/' };
+    for (const entry of tag.slice(name.length + 1, -1).matchAll(attribute)) {
+      const key = entry[1].toLowerCase();
+      const value = (entry[2] ?? entry[3] ?? entry[4] ?? '').replace(/&(#(?:[xX][\da-fA-F]+|\d+));?|&(quot|QUOT|apos|amp|AMP|lt|LT|gt|GT|sol);/g, (entity, numeric, named) => {
+        if (named) return entities[named.toLowerCase()];
+        const code = numeric[1].toLowerCase() === 'x' ? parseInt(numeric.slice(2), 16) : Number(numeric.slice(1));
+        return code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : '\ufffd';
+      });
+      if (!attributes.has(key)) attributes.set(key, value);
+    }
+    if (attributes.has('style')) sources.push({ css: attributes.get('style'), inline: true });
+    if (['em', 'i', 'cite'].includes(lower)) italic = true;
+    if (lower === 'plaintext') break;
+    if (['style', 'script', 'textarea', 'title', 'xmp', 'iframe', 'noembed', 'noframes'].includes(lower)) {
+      const close = new RegExp(`</${lower}\\s*>`, 'gi');
+      close.lastIndex = tags.lastIndex;
+      const end = close.exec(page);
+      const contentEnd = end?.index ?? page.length;
+      if (lower === 'style') {
+        if (attributes.has('data-artifacts-fonts')) {
+          let after = end ? close.lastIndex : page.length;
+          if (page[after] === '\n') after++;
+          managed.push([match.index, after]);
+        } else if (!attributes.get('type') || /^text\/css$/i.test(attributes.get('type'))) {
+          anchor ??= match.index;
+          sources.push({ css: page.slice(tags.lastIndex, contentEnd), inline: false });
+        }
+      }
+      tags.lastIndex = end ? close.lastIndex : page.length;
+    }
+  }
+  return { sources, managed, italic, insertionAt: anchor ?? head ?? 0 };
+}
+
+function cssDeclarations(css, inline) {
+  const declarations = [];
+  const blocks = [];
+  let segment = '';
+  let quote = '';
+  let parentheses = 0;
+  let brackets = 0;
+  let valueBraces = 0;
+  function emit() {
+    const match = /^\s*(--[\w-]+|[-a-z]+)\s*:\s*([\s\S]*)$/i.exec(segment);
+    if (match && (inline || blocks.length) && !blocks.includes(true)) {
+      declarations.push({ property: match[1].startsWith('--') ? match[1] : match[1].toLowerCase(), value: match[2].replace(/\s*!\s*important\s*$/i, '') });
+    }
+    segment = '';
+  }
+  for (let index = 0; index < css.length; index++) {
+    const char = css[index];
+    if (char === '\\') {
+      segment += css.slice(index, index + 2);
+      index++;
+    } else if (quote) {
+      segment += char;
+      if (char === quote) quote = '';
+    } else if (char === '"' || char === "'") {
+      quote = char;
+      segment += char;
+    } else if (char === '/' && css[index + 1] === '*') {
+      const end = css.indexOf('*/', index + 2);
+      index = end < 0 ? css.length : end + 1;
+      segment += ' ';
+    } else if (char === '(' || char === '[') {
+      if (char === '(') parentheses++;
+      else brackets++;
+      segment += char;
+    } else if (char === ')' || char === ']') {
+      if (char === ')') parentheses--;
+      else brackets--;
+      segment += char;
+    } else if (!parentheses && !brackets && char === '{') {
+      if (valueBraces || /^\s*--[\w-]+\s*:/.test(segment)) {
+        valueBraces++;
+        segment += char;
+      } else {
+        blocks.push(/^\s*@font-face\b/i.test(segment));
+        segment = '';
+      }
+    } else if (!parentheses && !brackets && char === '}' && valueBraces) {
+      valueBraces--;
+      segment += char;
+    } else if (!parentheses && !brackets && !valueBraces && (char === ';' || char === '}')) {
+      emit();
+      if (char === '}') blocks.pop();
+    } else segment += char;
+  }
+  emit();
+  return declarations;
+}
+
+function splitValue(value, separator) {
+  const parts = [];
+  let start = 0;
+  let depth = 0;
+  let quote = '';
+  for (let index = 0; index < value.length; index++) {
+    const char = value[index];
+    if (char === '\\') index++;
+    else if (quote) { if (char === quote) quote = ''; }
+    else if (char === '"' || char === "'") quote = char;
+    else if (char === '(') depth++;
+    else if (char === ')') depth--;
+    else if (!depth && separator.test(char)) {
+      parts.push(value.slice(start, index));
+      if (char === '/') parts.push('/');
+      start = index + 1;
+    }
+  }
+  parts.push(value.slice(start));
+  return parts;
+}
+
+function fontValueAlternatives(value, properties, visiting = new Set()) {
+  let quote = '';
+  for (let index = 0; index < value.length; index++) {
+    const char = value[index];
+    if (char === '\\') index++;
+    else if (quote) { if (char === quote) quote = ''; }
+    else if (char === '"' || char === "'") quote = char;
+    else if (/^var\(/i.test(value.slice(index, index + 4)) && !/[\w-]/.test(value[index - 1] ?? '')) {
+      let depth = 1;
+      let end = index + 4;
+      let innerQuote = '';
+      for (; end < value.length && depth; end++) {
+        const inner = value[end];
+        if (inner === '\\') end++;
+        else if (innerQuote) { if (inner === innerQuote) innerQuote = ''; }
+        else if (inner === '"' || inner === "'") innerQuote = inner;
+        else if (inner === '(') depth++;
+        else if (inner === ')') depth--;
+      }
+      if (depth) return [];
+      const [name, ...fallback] = splitValue(value.slice(index + 4, end - 1), /,/);
+      const key = name.trim();
+      const candidates = [];
+      if (!visiting.has(key)) {
+        const path = new Set(visiting).add(key);
+        for (const definition of properties.get(key) ?? []) candidates.push(...fontValueAlternatives(definition, properties, path));
+      }
+      if (fallback.length) candidates.push(...fontValueAlternatives(fallback.join(','), properties, visiting));
+      return [...new Set(candidates.flatMap((candidate) => fontValueAlternatives(value.slice(0, index) + candidate + value.slice(end), properties, visiting)))];
+    }
+  }
+  return [value];
+}
+
+function typographyUsage(document) {
+  const declarations = document.sources.flatMap(({ css, inline }) => cssDeclarations(css, inline));
+  const properties = new Map();
+  for (const { property, value } of declarations) {
+    if (property.startsWith('--')) properties.set(property, [...properties.get(property) ?? [], value]);
+  }
+  const usage = { families: new Set(), italic: document.italic };
+  for (const { property, value } of declarations) {
+    if (!['font-family', 'font', 'font-style'].includes(property)) continue;
+    for (let resolved of fontValueAlternatives(value, properties)) {
+      resolved = resolved.trim();
+      if (property === 'font-style') {
+        if (/^italic$/i.test(resolved)) usage.italic = true;
+        continue;
+      }
+      if (property === 'font') {
+        const tokens = splitValue(resolved, /[\s/]/).filter(Boolean);
+        const size = tokens.findIndex((token) => /^(?:\d*\.?\d+(?:[a-z]+|%)|0|xx?-small|small|medium|large|x{1,3}-large|smaller|larger)$/i.test(token) || /^(?:calc|min|max|clamp)\(/i.test(token));
+        if (size < 0) continue;
+        if (tokens.slice(0, size).some((token) => /^italic$/i.test(token))) usage.italic = true;
+        resolved = tokens.slice(size + (tokens[size + 1] === '/' ? 3 : 1)).join(' ');
+      }
+      for (let family of splitValue(resolved, /,/)) {
+        family = family.trim();
+        if (/^(["'])[\s\S]*\1$/.test(family)) family = family.slice(1, -1);
+        family = family.replace(/\\([\da-f]{1,6})(?:\r\n|[\t\n\r\f ])?|\\([^\r\n\f])/gi, (_, hex, escaped) => {
+          const code = parseInt(hex, 16);
+          return hex ? code > 0 && code <= 0x10ffff ? String.fromCodePoint(code) : '\ufffd' : escaped;
+        }).replace(/\s+/g, ' ').toLowerCase();
+        const face = faces.find((candidate) => candidate.family.toLowerCase() === family);
+        if (face) usage.families.add(face.family);
+      }
+    }
+  }
+  return usage;
+}
 
 const paths = process.argv.slice(2);
 if (paths.length !== 1) {
@@ -22,18 +223,18 @@ if (paths.length !== 1) {
   process.exit(2);
 }
 const [path] = paths;
-const page = (await readFile(path, 'utf8')).replace(embedded, '');
-const italic = /font-style\s*:\s*italic|<(em|i|cite)[\s>]/i.test(page);
-const used = faces.filter((face) => page.includes(face.family) && (face.style === 'normal' || italic));
+let page = await readFile(path, 'utf8');
+for (const [start, end] of htmlTypographySources(page).managed.reverse()) page = page.slice(0, start) + page.slice(end);
+const document = htmlTypographySources(page);
+const usage = typographyUsage(document);
+const used = faces.filter((face) => usage.families.has(face.family) && (face.style === 'normal' || usage.italic));
 const rules = await Promise.all(used.map(async (face) => {
   const data = (await readFile(join(fonts, face.file))).toString('base64');
   return `@font-face{font-family:"${face.family}";font-style:${face.style};font-weight:${face.weight};font-display:swap;src:url(data:font/woff2;base64,${data}) format("woff2");unicode-range:${latin}}`;
 }));
 const block = rules.length ? `<style data-artifacts-fonts>${rules.join('')}</style>\n` : '';
 
-const anchor = page.search(/<style[\s>]/i);
-const head = /<head[^>]*>\n?/i.exec(page) ?? /<!doctype[^>]*>\n?/i.exec(page);
-const at = anchor >= 0 ? anchor : head ? head.index + head[0].length : 0;
+const at = document.insertionAt;
 const output = page.slice(0, at) + block + page.slice(at);
 const bytes = Buffer.byteLength(output);
 if (bytes > limit) {