From 50ae94bd87e62a90efe6f67c60e8545e114a3e85 Mon Sep 17 00:00:00 2001
From: Parth Bhatt <pbjm2493@gmail.com>
Date: Wed, 5 Aug 2026 08:29:05 -0700
Subject: [PATCH 1/2] Copied @digitalbazaar/vc-html-renderer lib files into
 vendor/vc-html-renderer.

---
 vendor/vc-html-renderer/constants.js    |  49 ++++
 vendor/vc-html-renderer/detect.js       |  85 ++++++
 vendor/vc-html-renderer/documents.js    | 229 +++++++++++++++++
 vendor/vc-html-renderer/htmlRenderer.js | 328 ++++++++++++++++++++++++
 vendor/vc-html-renderer/index.js        |  15 ++
 vendor/vc-html-renderer/pointer.js      |  36 +++
 vendor/vc-html-renderer/select.js       | 111 ++++++++
 7 files changed, 853 insertions(+)
 create mode 100644 vendor/vc-html-renderer/constants.js
 create mode 100644 vendor/vc-html-renderer/detect.js
 create mode 100644 vendor/vc-html-renderer/documents.js
 create mode 100644 vendor/vc-html-renderer/htmlRenderer.js
 create mode 100644 vendor/vc-html-renderer/index.js
 create mode 100644 vendor/vc-html-renderer/pointer.js
 create mode 100644 vendor/vc-html-renderer/select.js

diff --git a/vendor/vc-html-renderer/constants.js b/vendor/vc-html-renderer/constants.js
new file mode 100644
index 0000000..431ea5e
--- /dev/null
+++ b/vendor/vc-html-renderer/constants.js
@@ -0,0 +1,49 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+
+// HTML Render Suite constants. Tags: [spec] = mandated by
+// https://w3c.github.io/vc-render-method/#the-html-render-suite ;
+// [lib] = library-defined (not spec-mandated).
+
+// [spec] HTML suite = `TemplateRenderMethod` with `renderSuite: "html"`.
+export const RENDER_METHOD_TYPE = 'TemplateRenderMethod';
+export const HTML_RENDER_SUITE = 'html';
+
+// [spec] wrapper/template-frame CSP: inline + `data:` only, no network.
+export const TEMPLATE_CSP = `default-src data: 'unsafe-inline'`;
+
+// [spec] host-frame CSP requires `frame-src 'none'` (allows `srcdoc`, blocks
+// `<iframe src>` -> isolates the template and preserves the app's CHAPI
+// framing). The remaining directives are added hardening (not spec-mandated):
+// `default-src 'none'` blocks all network; `script-src`/`style-src
+// 'unsafe-inline'` admit only the host controller's inline script and styles.
+export const HOST_CSP = `default-src 'none'; script-src 'unsafe-inline'; ` +
+  `style-src 'unsafe-inline'; frame-src 'none'`;
+
+// [spec] template-frame sandbox; no `allow-same-origin` -> opaque origin.
+export const TEMPLATE_SANDBOX = 'allow-scripts';
+
+// [lib] reject `handle.ready` if no ready/error by this time; `0` disables.
+export const DEFAULT_TIMEOUT = 10000;
+
+// Transports: app<->host via `postMessage` [lib]; host<->template via a
+// transferred `MessageChannel` port [spec].
+export const MESSAGE_NAMESPACE = '@digitalbazaar/vc-html-renderer';
+
+export const MESSAGE_TYPE = {
+  // [lib] host->app: controller ready to receive the template
+  HOST_READY: `${MESSAGE_NAMESPACE}:host-ready`,
+  // [lib] app->host: deliver template document + options
+  RENDER: `${MESSAGE_NAMESPACE}:render`,
+  // [spec] host->template: transfer the MessageChannel port
+  PORT: `${MESSAGE_NAMESPACE}:port`,
+  // [lib] host->app: template frame `load` fired (drives no-signal fallback)
+  LOADED: `${MESSAGE_NAMESPACE}:loaded`,
+  // [spec] renderMethodReady() success (template->host port->app)
+  READY: `${MESSAGE_NAMESPACE}:ready`,
+  // [spec] renderMethodReady(Error) (template->host port->app)
+  ERROR: `${MESSAGE_NAMESPACE}:error`,
+  // [lib] content size changed (template->host port->app)
+  RESIZE: `${MESSAGE_NAMESPACE}:resize`
+};
diff --git a/vendor/vc-html-renderer/detect.js b/vendor/vc-html-renderer/detect.js
new file mode 100644
index 0000000..302f299
--- /dev/null
+++ b/vendor/vc-html-renderer/detect.js
@@ -0,0 +1,85 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {HTML_RENDER_SUITE, RENDER_METHOD_TYPE} from './constants.js';
+import {selectJsonLd} from './select.js';
+
+/**
+ * Check if a verifiable credential has an HTML Render Method.
+ *
+ * @param {object} options - Options.
+ * @param {object} options.credential - The verifiable credential.
+ *
+ * @returns {boolean} `true` if an HTML render method is present.
+ */
+export function supportsHtml({credential} = {}) {
+  return findHtmlRenderMethods({credential}).length > 0;
+}
+
+/**
+ * Find all HTML Render Methods on a verifiable credential.
+ *
+ * [spec] An HTML Render Method is a `TemplateRenderMethod` whose `renderSuite`
+ * is `"html"`. `renderMethod` may be a single object or an array.
+ *
+ * @param {object} options - Options.
+ * @param {object} options.credential - The verifiable credential.
+ *
+ * @returns {Array} The matching render method objects (possibly empty).
+ */
+export function findHtmlRenderMethods({credential} = {}) {
+  let renderMethods = credential?.renderMethod;
+  if(!renderMethods) {
+    return [];
+  }
+  // normalize a single render method to an array
+  if(!Array.isArray(renderMethods)) {
+    renderMethods = [renderMethods];
+  }
+  return renderMethods.filter(_isHtmlRenderMethod);
+}
+
+/**
+ * Find the first HTML Render Method on a verifiable credential.
+ *
+ * @param {object} options - Options.
+ * @param {object} options.credential - The verifiable credential.
+ *
+ * @returns {object|null} The first matching render method, or `null`.
+ */
+export function findHtmlRenderMethod({credential} = {}) {
+  const [renderMethod = null] = findHtmlRenderMethods({credential});
+  return renderMethod;
+}
+
+/**
+ * Filter a credential to the fields named by a render method's
+ * `renderProperty` JSON pointers (selective disclosure).
+ *
+ * [spec] MUST filter with the `selectJsonLd` algorithm from VC-DI-ECDSA over
+ * the RFC-6901 `renderProperty` pointers; an absent `renderProperty` exposes
+ * the whole credential. Every pointer must resolve or `selectJsonLd` throws.
+ *
+ * @param {object} options - Options.
+ * @param {object} options.credential - The verifiable credential.
+ * @param {object} options.renderMethod - The HTML render method.
+ *
+ * @returns {object} The filtered credential.
+ */
+export function filterCredential({credential, renderMethod} = {}) {
+  // [lib] deep-clone to strip framework reactive proxies (e.g. Vue); the
+  // selection algorithm requires a plain object
+  const document = JSON.parse(JSON.stringify(credential));
+  const pointers = renderMethod?.renderProperty;
+  if(!Array.isArray(pointers) || pointers.length === 0) {
+    // [spec] no `renderProperty`: expose the whole credential
+    return document;
+  }
+  return selectJsonLd({document, pointers});
+}
+
+// [spec] discriminator: `TemplateRenderMethod` + `renderSuite: "html"`
+function _isHtmlRenderMethod(renderMethod) {
+  return renderMethod?.type === RENDER_METHOD_TYPE &&
+    renderMethod?.renderSuite === HTML_RENDER_SUITE;
+}
diff --git a/vendor/vc-html-renderer/documents.js b/vendor/vc-html-renderer/documents.js
new file mode 100644
index 0000000..84df9e0
--- /dev/null
+++ b/vendor/vc-html-renderer/documents.js
@@ -0,0 +1,229 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {
+  HOST_CSP, MESSAGE_TYPE, TEMPLATE_CSP, TEMPLATE_SANDBOX
+} from './constants.js';
+import {filterCredential} from './detect.js';
+
+/**
+ * Build the inner *template* frame document (the spec's "wrapper code").
+ *
+ * [spec] The wrapper provides `<html>/<head>/<body>` (the issuer template MUST
+ * be a headless fragment), applies the template-frame CSP, and embeds the
+ * filtered credential as a `<script type="application/vc">` data block in the
+ * `<head>`. A bootstrap adds the spec's `window.renderMethodReady()` and
+ * signals over a `MessageChannel` port.
+ *
+ * @param {object} options - Options.
+ * @param {object} options.credential - The verifiable credential.
+ * @param {object} options.renderMethod - The HTML render method.
+ *
+ * @returns {string} The inner template frame document as an HTML string.
+ */
+export function createTemplateDocument({credential, renderMethod} = {}) {
+  const templateCode = _resolveTemplate({renderMethod});
+  const filtered = filterCredential({credential, renderMethod});
+  const json = _safeJson(filtered);
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-security-policy" content="${TEMPLATE_CSP}">
+<style>html,body{margin:0}</style>
+<script name="credential" type="application/vc">${json}</script>
+${_templateBootstrap()}
+</head>
+<body>
+${templateCode}
+</body>
+</html>`;
+}
+
+/**
+ * Build the outer *host* frame document (the spec's "host page" role).
+ *
+ * Static (identical for every credential), so it can be cached. [spec] It
+ * carries the host CSP (`frame-src 'none'`) and hosts the template in a
+ * sandboxed `srcdoc` iframe. It announces readiness to the app, and on a
+ * `RENDER` message creates the template frame and relays the template's
+ * ready/error/resize up to the app.
+ *
+ * @returns {string} The host frame document as an HTML string.
+ */
+export function createHostDocument() {
+  return `<!DOCTYPE html>
+<html>
+<head>
+<meta http-equiv="content-security-policy" content="${HOST_CSP}">
+</head>
+<body>
+${_hostController()}
+</body>
+</html>`;
+}
+
+// Resolve `renderMethod.template` to raw template HTML.
+// [spec] `template` is a string `data:` URL (RFC-2397): `;base64,` is decoded,
+// plain `data:text/html,` is used verbatim.
+function _resolveTemplate({renderMethod} = {}) {
+  const template = renderMethod?.template;
+  if(typeof template !== 'string') {
+    throw new TypeError('"renderMethod.template" must be a string.');
+  }
+  const base64Prefix = 'data:text/html;base64,';
+  const plainPrefix = 'data:text/html,';
+  if(template.startsWith(base64Prefix)) {
+    return atob(template.slice(base64Prefix.length));
+  }
+  if(template.startsWith(plainPrefix)) {
+    return template.slice(plainPrefix.length);
+  }
+  // [lib] otherwise treat the string as raw HTML.
+  return template;
+}
+
+// [lib] serialize to JSON and neutralize `<` so a credential value containing
+// `</script>` cannot break out of the `application/vc` data block
+function _safeJson(value) {
+  return JSON.stringify(value, null, 2).replace(/</g, '\\u003c');
+}
+
+// Bootstrap injected into the template frame.
+// [spec] defines `window.renderMethodReady()` and signals ready/error over a
+// transferred `MessageChannel` port. [lib] also reports content size, and
+// buffers a terminal signal made before the port arrives.
+function _templateBootstrap() {
+  return `<script>
+(function() {
+  'use strict';
+  let port = null;
+  let pendingTerminal = null;
+  let settled = false;
+  function send(message) {
+    if(port) {
+      port.postMessage(message);
+    }
+  }
+  function reportSize() {
+    // [lib] measure body (documentElement.scrollHeight is viewport-clamped)
+    // so the frame hugs its content instead of a minimum height
+    const body = document.body;
+    if(!body) {
+      return;
+    }
+    send({
+      type: '${MESSAGE_TYPE.RESIZE}',
+      width: body.scrollWidth,
+      height: body.scrollHeight
+    });
+  }
+  function flush() {
+    if(port && pendingTerminal) {
+      port.postMessage(pendingTerminal);
+      pendingTerminal = null;
+    }
+  }
+  // [spec] the completion signal the issuer template calls
+  window.renderMethodReady = function(error) {
+    if(settled) {
+      return;
+    }
+    settled = true;
+    if(error) {
+      const message = (error && error.message) ?
+        String(error.message) : String(error);
+      pendingTerminal = {type: '${MESSAGE_TYPE.ERROR}', message: message};
+    } else {
+      pendingTerminal = {type: '${MESSAGE_TYPE.READY}'};
+    }
+    flush();
+    reportSize();
+  };
+  // [spec] receive the MessageChannel port handed off by the host frame
+  window.addEventListener('message', function(event) {
+    if(event.source !== window.parent) {
+      return;
+    }
+    const data = event.data || {};
+    if(data.type === '${MESSAGE_TYPE.PORT}' && event.ports && event.ports[0]) {
+      port = event.ports[0];
+      flush();
+      reportSize();
+    }
+  });
+  window.addEventListener('load', reportSize);
+  if(typeof ResizeObserver !== 'undefined') {
+    new ResizeObserver(reportSize).observe(document.documentElement);
+  } else {
+    window.addEventListener('resize', reportSize);
+  }
+})();
+</script>`;
+}
+
+// Controller injected into the host frame.
+// [spec] creates the sandboxed `srcdoc` template frame and a `MessageChannel`
+// to it. [lib] relays the template's messages to the app and applies sizing.
+function _hostController() {
+  return `<script>
+(function() {
+  'use strict';
+  const app = window.parent;
+  let inner = null;
+  let fill = false;
+  function toApp(message) {
+    app.postMessage(message, '*');
+  }
+  function render(data) {
+    fill = !!data.fill;
+    if(inner) {
+      inner.remove();
+      inner = null;
+    }
+    if(fill) {
+      // [lib] issuer declared a fixed height: let the inner frame fill the
+      // host frame's box rather than hugging its content
+      document.documentElement.style.height = '100%';
+      document.body.style.height = '100%';
+    }
+    const frame = document.createElement('iframe');
+    // [spec] template frame is a sandboxed srcdoc iframe (opaque origin)
+    frame.setAttribute('sandbox', data.sandbox || '${TEMPLATE_SANDBOX}');
+    frame.setAttribute('scrolling', 'no');
+    frame.style.cssText = 'display:block;border:0;width:100%;height:' +
+      (fill ? '100%' : '0') + ';overflow:hidden';
+    // [spec] dedicated MessageChannel to the template: it signals
+    // ready/error/resize over the transferred port; the host relays to the app
+    const channel = new MessageChannel();
+    channel.port1.onmessage = function(event) {
+      const msg = event.data || {};
+      if(!fill && msg.type === '${MESSAGE_TYPE.RESIZE}' &&
+        typeof msg.height === 'number') {
+        inner.style.height = msg.height + 'px';
+      }
+      toApp(msg);
+    };
+    frame.addEventListener('load', function() {
+      toApp({type: '${MESSAGE_TYPE.LOADED}'});
+      // [spec] transfer port2 to the template frame
+      frame.contentWindow.postMessage(
+        {type: '${MESSAGE_TYPE.PORT}'}, '*', [channel.port2]);
+    });
+    frame.srcdoc = data.document;
+    document.body.appendChild(frame);
+    inner = frame;
+  }
+  document.documentElement.style.margin = '0';
+  document.body.style.margin = '0';
+  window.addEventListener('message', function(event) {
+    if(event.source === app) {
+      const data = event.data || {};
+      if(data.type === '${MESSAGE_TYPE.RENDER}') {
+        render(data);
+      }
+    }
+  });
+  toApp({type: '${MESSAGE_TYPE.HOST_READY}'});
+})();
+</script>`;
+}
diff --git a/vendor/vc-html-renderer/htmlRenderer.js b/vendor/vc-html-renderer/htmlRenderer.js
new file mode 100644
index 0000000..d9e0492
--- /dev/null
+++ b/vendor/vc-html-renderer/htmlRenderer.js
@@ -0,0 +1,328 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+import {createHostDocument, createTemplateDocument} from './documents.js';
+import {
+  DEFAULT_TIMEOUT, MESSAGE_TYPE, TEMPLATE_SANDBOX
+} from './constants.js';
+import {findHtmlRenderMethod} from './detect.js';
+
+// [lib] after the template frame's `load`, wait this long for an explicit
+// `renderMethodReady()` before treating load as success (fallback for
+// templates that never signal)
+const DEFAULT_SIGNAL_GRACE = 250;
+
+// [spec] coerce an `outputPreference.style` width/height to a CSS length
+function _cssSize(value) {
+  return typeof value === 'number' ? `${value}px` : value;
+}
+
+/**
+ * Controls a single in-progress render: owns the outer host iframe, runs the
+ * `HOST_READY -> RENDER -> LOADED -> READY/ERROR` handshake, applies size
+ * updates, and exposes lifecycle events plus a `ready` promise.
+ */
+export class RenderHandle {
+  /**
+    * @param {object} options - Options (supplied by {@link HtmlRenderer}).
+    * @param {Element} options.mount - The element to render into.
+    * @param {object} options.credential - The verifiable credential.
+    * @param {object} options.renderMethod - The HTML render method.
+    * @param {number} options.timeout - Readiness timeout in ms (`0` disables).
+    * @param {string} options.sandbox - `sandbox` for the inner template frame.
+    * @param {boolean} options.waitForReady - Require an explicit ready signal.
+    * @param {number} options.signalGrace - Post-`load` grace period in ms.
+    * @param {object} [options.style] - Issuer-declared `outputPreference.style`
+    *  with optional CSS `width`/`height` for the rendered frame.
+    */
+  constructor({
+    mount, credential, renderMethod, timeout, sandbox, waitForReady,
+    signalGrace, style
+  } = {}) {
+    this._listeners = new Map();
+    this._settled = false;
+    this._destroyed = false;
+    this._sandbox = sandbox;
+    this._waitForReady = waitForReady;
+    this._signalGrace = signalGrace;
+    this._graceTimer = null;
+    this._timeoutTimer = null;
+    // [spec] `outputPreference.style` (width/height): a declared height makes
+    // the frame a fixed box instead of hugging its content
+    this._style = style || null;
+    this._fill = !!(style && style.height);
+    this._document = createTemplateDocument({credential, renderMethod});
+
+    /**
+      * Resolves when the render signals readiness, rejects on error, timeout,
+      * or `destroy()` before completion.
+      *
+      * @type {Promise<RenderHandle>}
+      */
+    this.ready = new Promise((resolve, reject) => {
+      this._resolve = resolve;
+      this._reject = reject;
+    });
+    // [lib] avoid unhandled-rejection noise when the caller only uses events
+    this.ready.catch(() => {});
+
+    // create the outer host iframe (NOT sandboxed: it runs the trusted host
+    // controller as a same-origin `srcdoc` frame under the strict HOST_CSP)
+    const frame = document.createElement('iframe');
+    frame.setAttribute('title', 'Verifiable Credential');
+    frame.setAttribute('scrolling', 'no');
+    frame.style.cssText = 'display:block;border:0;width:100%;overflow:hidden';
+    // [spec] honor an issuer-declared box (`outputPreference.style`)
+    if(this._style && this._style.width) {
+      frame.style.width = _cssSize(this._style.width);
+    }
+    if(this._style && this._style.height) {
+      frame.style.height = _cssSize(this._style.height);
+    }
+
+    /**
+      * The outer host iframe element.
+      *
+      * @type {HTMLIFrameElement}
+      */
+    this.element = frame;
+    this._frame = frame;
+
+    this._onMessage = event => this._handleMessage(event);
+    window.addEventListener('message', this._onMessage);
+
+    // [lib] safeguard: reject if no ready/error arrives in time.
+    if(timeout > 0) {
+      this._timeoutTimer = setTimeout(() => this._fail(new Error(
+        'Timed out waiting for the HTML render method to signal readiness.')),
+      timeout);
+    }
+
+    // [lib] attach the listener before mounting so HOST_READY is never missed
+    frame.srcdoc = createHostDocument();
+    mount.appendChild(frame);
+  }
+
+  /**
+    * Subscribe to an event (`ready`, `error`, `resize`, or `loaded`).
+    *
+    * @param {string} type - The event type.
+    * @param {Function} listener - The listener.
+    *
+    * @returns {RenderHandle} This handle, for chaining.
+    */
+  on(type, listener) {
+    let set = this._listeners.get(type);
+    if(!set) {
+      set = new Set();
+      this._listeners.set(type, set);
+    }
+    set.add(listener);
+    return this;
+  }
+
+  /**
+    * Unsubscribe a previously-registered listener.
+    *
+    * @param {string} type - The event type.
+    * @param {Function} listener - The listener.
+    *
+    * @returns {RenderHandle} This handle, for chaining.
+    */
+  off(type, listener) {
+    const set = this._listeners.get(type);
+    if(set) {
+      set.delete(listener);
+    }
+    return this;
+  }
+
+  /**
+    * Tear down the render: remove the iframe and listeners, clear timers, and
+    * reject `ready` if it has not already settled.
+    *
+    * @returns {void}
+    */
+  destroy() {
+    if(this._destroyed) {
+      return;
+    }
+    this._destroyed = true;
+    this._clearTimers();
+    window.removeEventListener('message', this._onMessage);
+    if(this._frame && this._frame.parentNode) {
+      this._frame.parentNode.removeChild(this._frame);
+    }
+    if(!this._settled) {
+      this._settled = true;
+      this._reject(new Error('Renderer destroyed before completion.'));
+    }
+    this._listeners.clear();
+  }
+
+  _handleMessage(event) {
+    // only accept messages relayed by this render's host frame
+    if(this._destroyed || event.source !== this._frame.contentWindow) {
+      return;
+    }
+    const data = event.data || {};
+    switch(data.type) {
+      case MESSAGE_TYPE.HOST_READY:
+        // [lib] host controller ready: deliver the template + render options
+        this._frame.contentWindow.postMessage({
+          type: MESSAGE_TYPE.RENDER,
+          document: this._document,
+          sandbox: this._sandbox,
+          fill: this._fill
+        }, '*');
+        break;
+      case MESSAGE_TYPE.LOADED:
+        // [lib] fallback: if no explicit signal arrives within the grace
+        // period, treat `load` as success (for templates that never signal)
+        this._emit('loaded', {});
+        if(!this._waitForReady && !this._settled) {
+          this._graceTimer = setTimeout(
+            () => this._succeed(), this._signalGrace);
+        }
+        break;
+      case MESSAGE_TYPE.READY:
+        // [spec] renderMethodReady() -> resolve the render promise
+        this._succeed();
+        break;
+      case MESSAGE_TYPE.ERROR:
+        // [spec] renderMethodReady(Error) -> reject the render promise
+        this._fail(new Error(data.message || 'HTML render method failed.'));
+        break;
+      case MESSAGE_TYPE.RESIZE:
+        this._applySize(data);
+        break;
+      default:
+        break;
+    }
+  }
+
+  _applySize({width, height} = {}) {
+    // [spec] a declared `outputPreference` height wins; else hug content
+    if(!(this._style && this._style.height) &&
+      typeof height === 'number' && height > 0) {
+      this._frame.style.height = `${height}px`;
+    }
+    this._emit('resize', {width, height});
+  }
+
+  // settle as success (resolve `ready`); the first signal wins
+  _succeed() {
+    if(this._settled) {
+      return;
+    }
+    this._settled = true;
+    this._clearTimers();
+    this._emit('ready', {});
+    this._resolve(this);
+  }
+
+  // settle as failure (reject `ready`); the first signal wins
+  _fail(error) {
+    if(this._settled) {
+      return;
+    }
+    this._settled = true;
+    this._clearTimers();
+    this._emit('error', error);
+    this._reject(error);
+  }
+
+  _clearTimers() {
+    if(this._timeoutTimer) {
+      clearTimeout(this._timeoutTimer);
+      this._timeoutTimer = null;
+    }
+    if(this._graceTimer) {
+      clearTimeout(this._graceTimer);
+      this._graceTimer = null;
+    }
+  }
+
+  _emit(type, detail) {
+    const set = this._listeners.get(type);
+    if(!set) {
+      return;
+    }
+    for(const listener of set) {
+      try {
+        listener(detail);
+      } catch(e) {
+        // surface listener errors globally without breaking the emit loop
+        setTimeout(() => {
+          throw e;
+        });
+      }
+    }
+  }
+}
+
+/**
+ * Renders Verifiable Credential HTML Render Methods inside a nested, sandboxed
+ * iframe.
+ *
+ * A single instance holds default options and may be reused for many renders.
+ * Each `render()` call returns an independent {@link RenderHandle}.
+ */
+export class HtmlRenderer {
+  /**
+    * @param {object} [options] - Default options for every render.
+    * @param {number} [options.timeout] - Milliseconds to wait for readiness
+    *  before rejecting; `0` disables the timeout.
+    * @param {string} [options.sandbox] - `sandbox` attribute for the inner
+    *  template frame.
+    * @param {boolean} [options.waitForReady] - If `true`, only an explicit
+    *  `renderMethodReady()` (or error) settles the render; the template's
+    *  `load` event is not treated as success.
+    * @param {number} [options.signalGrace] - Milliseconds to wait after the
+    *  template `load` for an explicit signal before treating load as success
+    *  (ignored when `waitForReady` is `true`).
+    */
+  constructor({
+    timeout = DEFAULT_TIMEOUT,
+    sandbox = TEMPLATE_SANDBOX,
+    waitForReady = false,
+    signalGrace = DEFAULT_SIGNAL_GRACE
+  } = {}) {
+    this.timeout = timeout;
+    this.sandbox = sandbox;
+    this.waitForReady = waitForReady;
+    this.signalGrace = signalGrace;
+  }
+
+  /**
+    * Render a credential's HTML Render Method into a mount element.
+    *
+    * @param {object} options - Options.
+    * @param {Element} options.mount - The element to render into; the outer
+    *  host iframe is appended to it.
+    * @param {object} options.credential - The verifiable credential.
+    * @param {object} [options.renderMethod] - The HTML render method to use;
+    *  defaults to the first one found on the credential.
+    *
+    * @returns {RenderHandle} A handle exposing `ready`, `element`, events, and
+    *  `destroy()`.
+    */
+  render({mount, credential, renderMethod} = {}) {
+    if(!(mount && mount.nodeType === 1)) {
+      throw new TypeError('"mount" must be a DOM element.');
+    }
+    renderMethod = renderMethod || findHtmlRenderMethod({credential});
+    if(!renderMethod) {
+      throw new Error(
+        'The verifiable credential does not have an HTML render method.');
+    }
+    return new RenderHandle({
+      mount, credential, renderMethod,
+      timeout: this.timeout,
+      sandbox: this.sandbox,
+      waitForReady: this.waitForReady,
+      signalGrace: this.signalGrace,
+      style: renderMethod?.outputPreference?.style || null
+    });
+  }
+}
diff --git a/vendor/vc-html-renderer/index.js b/vendor/vc-html-renderer/index.js
new file mode 100644
index 0000000..0cedda7
--- /dev/null
+++ b/vendor/vc-html-renderer/index.js
@@ -0,0 +1,15 @@
+/*!
+ * Copyright (c) 2026 Digital Bazaar, Inc.
+ */
+
+// Public API of @digitalbazaar/vc-html-renderer.
+// primary entry point: render a credential's HTML render method into the DOM
+export {HtmlRenderer, RenderHandle} from './htmlRenderer.js';
+
+// detection + selective-disclosure helpers (usable without rendering)
+export {
+  filterCredential, findHtmlRenderMethod, findHtmlRenderMethods, supportsHtml
+} from './detect.js';
+
+// lower-level building blocks: the host/template frame document strings
+export {createHostDocument, createTemplateDocument} from './documents.js';
diff --git a/vendor/vc-html-renderer/pointer.js b/vendor/vc-html-renderer/pointer.js
new file mode 100644
index 0000000..588f660
--- /dev/null
+++ b/vendor/vc-html-renderer/pointer.js
@@ -0,0 +1,36 @@
+/*
+ * Copyright 2026 Digital Bazaar, Inc.
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+// JSON pointer escape sequences
+// ~0 => '~'
+// ~1 => '/'
+const POINTER_ESCAPE_REGEX = /~[01]/g;
+
+export function parsePointer(pointer) {
+  // see RFC 6901: https://www.rfc-editor.org/rfc/rfc6901.html
+  const parsed = [];
+  const paths = pointer.split('/').slice(1);
+  for(const path of paths) {
+    if(!path.includes('~')) {
+      // convert any numerical path to a number as an array index
+      const index = parseInt(path, 10);
+      parsed.push(isNaN(index) ? path : index);
+    } else {
+      parsed.push(path.replace(POINTER_ESCAPE_REGEX, _unescapePointerPath));
+    }
+  }
+  return parsed;
+}
+
+function _unescapePointerPath(m) {
+  if(m === '~1') {
+    return '/';
+  }
+  if(m === '~0') {
+    return '~';
+  }
+  throw new Error(`Invalid JSON pointer escape sequence "${m}".`);
+}
diff --git a/vendor/vc-html-renderer/select.js b/vendor/vc-html-renderer/select.js
new file mode 100644
index 0000000..41e0d2d
--- /dev/null
+++ b/vendor/vc-html-renderer/select.js
@@ -0,0 +1,111 @@
+/*
+ * Copyright 2026 Digital Bazaar, Inc.
+ *
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+import {parsePointer} from './pointer.js';
+
+// this is the standard `selectJsonLd` algorithm from:
+// https://www.w3.org/TR/vc-di-ecdsa/#selectjsonld
+export function selectJsonLd({document, pointers} = {}) {
+  if(!(document && typeof document === 'object')) {
+    throw new TypeError('"document" must be an object.');
+  }
+  if(!Array.isArray(pointers)) {
+    throw new TypeError('"pointers" must be an array.');
+  }
+  if(pointers.length === 0) {
+    // no pointers, so nothing selected
+    return null;
+  }
+
+  // track arrays to make them dense after selection
+  const arrays = [];
+
+  // perform selection
+  const selectionDocument = {'@context': structuredClone(document['@context'])};
+  _initSelection({selection: selectionDocument, source: document});
+  for(const pointer of pointers) {
+    // parse pointer into individual paths
+    const paths = parsePointer(pointer);
+    if(paths.length === 0) {
+      // whole document selected
+      return structuredClone(document);
+    }
+    _selectPaths({document, pointer, paths, selectionDocument, arrays});
+  }
+
+  // make any sparse arrays dense
+  for(const array of arrays) {
+    let i = 0;
+    while(i < array.length) {
+      if(array[i] === undefined) {
+        array.splice(i, 1);
+        continue;
+      }
+      i++;
+    }
+  }
+
+  return selectionDocument;
+}
+
+function _selectPaths({
+  document, pointer, paths, selectionDocument, arrays
+} = {}) {
+  // make pointer path in selection document
+  let parentValue = document;
+  let value = parentValue;
+  let selectedParent = selectionDocument;
+  let selectedValue = selectedParent;
+  for(const path of paths) {
+    selectedParent = selectedValue;
+    parentValue = value;
+
+    // get next document value
+    value = parentValue[path];
+    if(value === undefined) {
+      throw new TypeError(
+        `JSON pointer "${pointer}" does not match document.`);
+    }
+
+    // get next value selection
+    selectedValue = selectedParent[path];
+    if(selectedValue === undefined) {
+      if(Array.isArray(value)) {
+        selectedValue = [];
+        arrays.push(selectedValue);
+      } else {
+        selectedValue = _initSelection({source: value});
+      }
+      selectedParent[path] = selectedValue;
+    }
+  }
+
+  // path traversal complete, compute selected value
+  if(typeof value !== 'object') {
+    // literal selected
+    selectedValue = value;
+  } else if(Array.isArray(value)) {
+    // full array selected
+    selectedValue = structuredClone(value);
+  } else {
+    // object selected, blend with `id` / `type` / `@context`
+    selectedValue = {...selectedValue, ...structuredClone(value)};
+  }
+
+  // add selected value to selected parent
+  selectedParent[paths.at(-1)] = selectedValue;
+}
+
+function _initSelection({selection = {}, source}) {
+  // must include non-blank node IDs
+  if(source.id && !source.id.startsWith('_:')) {
+    selection.id = source.id;
+  }
+  // always include types
+  if(source.type) {
+    selection.type = source.type;
+  }
+  return selection;
+}

From 8069ddd4d409870b0b1b9cde510685bf47126497 Mon Sep 17 00:00:00 2001
From: Parth Bhatt <pbjm2493@gmail.com>
Date: Wed, 5 Aug 2026 13:42:50 -0700
Subject: [PATCH 2/2] Wire HTML render method rendering into the viewer.

---
 index.html      | 20 ++++++++---
 viewers/html.js | 94 ++++++++++++++++++++++++++++++++++++-------------
 2 files changed, 86 insertions(+), 28 deletions(-)

diff --git a/index.html b/index.html
index c8d149a..3cdb321 100644
--- a/index.html
+++ b/index.html
@@ -1,5 +1,5 @@
 <!--
-Copyright 2025 Digital Bazaar, Inc.
+Copyright 2025-2026 Digital Bazaar, Inc.
 
 SPDX-License-Identifier: BSD-3-Clause
 -->
@@ -7,9 +7,15 @@
 <html>
   <head>
     <title>Credential Viewer</title>
-    <meta http-equiv="content-security-policy" content="frame-src 'none'">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fomantic-ui/2.9.0/semantic.min.css" integrity="sha512-PwhgdrueUt7iVICnZMjYcbiLalCztrVfzUIYXekIK8hZu4DQP141GrKh6fUHmNERWi4bGdBXIZqtBZnsSzHEMg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.1.0/mustache.min.js" integrity="sha512-HYiNpwSxYuji84SQbCU5m9kHEsRqwWypXgJMBtbRSumlx1iBB6QaxgEBZHSHEGM+fKyCX/3Kb5V5jeVXm0OglQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+    <script type="importmap">
+    {
+      "imports": {
+        "@digitalbazaar/vc-html-renderer": "./vendor/vc-html-renderer/index.js"
+      }
+    }
+    </script>
     <script type="module">
       import './app.js';
     </script>
@@ -57,7 +63,10 @@
           @click="currentTab = 'credential'">Filtered Credential</div>
       </div>
       <div class="ui bottom attached tab segment" :class="{ active: currentTab == 'rendered' }">
-        <iframe sandbox="allow-scripts allow-modals" :srcdoc="shimCode()" style="width: 100%; border: none;"></iframe>
+        <!-- before -->
+        <!-- <iframe sandbox="allow-scripts allow-modals" :srcdoc="shimCode()" style="width: 100%; border: none;"></iframe> -->
+        <!-- after -->
+        <div class="vc-html-render-mount" style="width: 100%;" @vue:mounted="renderInto($el)"></div>
       </div>
       <div class="ui bottom attached tab segment" :class="{ active: currentTab == 'code' }">
         <div class="ui form">
@@ -108,7 +117,10 @@
         <div v-scope="SVGViewer({idx, credential: store.credential})" @vue:mounted="mounted"></div>
       </div>
       <div class="column" v-else-if="renderMethod.type === 'TemplateRenderMethod' && renderMethod.renderSuite === 'html'">
-        <div v-scope="HTMLViewer({template: renderMethod?.template, credential: store.credential, pointers: renderMethod.renderProperty})"></div>
+        <!-- before -->
+        <!--  <div v-scope="HTMLViewer({template: renderMethod?.template, credential: store.credential, pointers: renderMethod.renderProperty})"></div>  -->
+        <!-- after -->
+        <div v-scope="HTMLViewer({renderMethod, credential: store.credential})"></div>
       </div>
       <div class="column" v-else>
         <div v-text="'No viewer available for render method type: ' + renderMethod.type"></div>
diff --git a/viewers/html.js b/viewers/html.js
index ae01a50..fd87c77 100644
--- a/viewers/html.js
+++ b/viewers/html.js
@@ -1,11 +1,16 @@
-// Copyright 2025 Digital Bazaar, Inc.
+// Copyright 2025-2026 Digital Bazaar, Inc.
 //
 // SPDX-License-Identifier: BSD-3-Clause
 
 import { reactive } from 'https://unpkg.com/petite-vue?module'
-import { selectJsonLd } from '../select.js';
+import {HtmlRenderer, filterCredential} from '@digitalbazaar/vc-html-renderer';
 
-export function HTMLViewer({template, credential, pointers}) {
+export function HTMLViewer({renderMethod, credential}) {
+  // un-proxy the petite-vue reactive credential into a plain object
+  const plainCredential = JSON.parse(JSON.stringify(credential));
+
+  // decode the data: template for the "HTML Template Code" display tab
+  const template = renderMethod?.template || '';
   let code = template;
   if(template.startsWith('data:text/html;base64,')) {
     code = atob(template.replace('data:text/html;base64,', ''));
@@ -13,34 +18,75 @@ export function HTMLViewer({template, credential, pointers}) {
     code = template.replace('data:text/html,', '');
   }
 
+  // the library performs this same filtering internally when it renders; here
+  // it only feeds the read-only "Filtered Credential" display tab
   const store = reactive({
     code,
-    filteredCredential: JSON.stringify(selectJsonLd({
-      // credential must be un-Proxy-object'd
-      document: JSON.parse(JSON.stringify(credential)),
-      // TODO: ...which renderMethod do we have renderProperties from? Pass
-      // that into HTML Viewer?
-      pointers
-    }), null, 2)
+    filteredCredential: JSON.stringify(
+      filterCredential({credential: plainCredential, renderMethod}), null, 2)
   });
 
+  let handle = null;
+
   return {
     $template: '#html-viewer',
-    // local state
-    currentTab: 'rendered', // rendered or codei
+    currentTab: 'rendered',
     store,
-    // methods
-    shimCode() {
-      const {renderMethod, ...partialCredential} = credential;
-      return `<html>
-        <head>
-          <meta http-equiv="content-security-policy" content="default-src data: 'unsafe-inline'">
-          <script name="credential" type="application/vc">${store.filteredCredential}</script>
-        </head>
-        <body>
-          ${store.code}
-        </body>
-      </html>`;
+    // render the HTML Render Method into `mount` via the library (nested,
+    // sandboxed host + template iframes; the app's own CSP is untouched)
+    renderInto(mount) {
+      if(handle) {
+        handle.destroy();
+        handle = null;
+      }
+      handle = new HtmlRenderer().render({
+        mount,
+        credential: plainCredential,
+        renderMethod
+      });
+      handle.ready.catch(error => {
+        console.error('HTML render method failed:', error);
+      });
     }
   };
 }
+
+// export function HTMLViewer({template, credential, pointers}) {
+//   let code = template;
+//   if(template.startsWith('data:text/html;base64,')) {
+//     code = atob(template.replace('data:text/html;base64,', ''));
+//   } else if(template.startsWith('data:text/html,')) {
+//     code = template.replace('data:text/html,', '');
+//   }
+
+//   const store = reactive({
+//     code,
+//     filteredCredential: JSON.stringify(selectJsonLd({
+//       // credential must be un-Proxy-object'd
+//       document: JSON.parse(JSON.stringify(credential)),
+//       // TODO: ...which renderMethod do we have renderProperties from? Pass
+//       // that into HTML Viewer?
+//       pointers
+//     }), null, 2)
+//   });
+
+//   return {
+//     $template: '#html-viewer',
+//     // local state
+//     currentTab: 'rendered', // rendered or codei
+//     store,
+//     // methods
+//     shimCode() {
+//       const {renderMethod, ...partialCredential} = credential;
+//       return `<html>
+//         <head>
+//           <meta http-equiv="content-security-policy" content="default-src data: 'unsafe-inline'">
+//           <script name="credential" type="application/vc">${store.filteredCredential}</script>
+//         </head>
+//         <body>
+//           ${store.code}
+//         </body>
+//       </html>`;
+//     }
+//   };
+// }