buninu-browser 0.2.3 → 0.3.0

package/lib/renderer/host.js

@@ -1,3 +1,4 @@
+import {writeClipboard} from '../clipboard.js';
 /**
  * Controller-side handle for a renderer process.
  *
@@ -9,10 +10,11 @@
  * Everything the renderer sends is treated as untrusted input.
  *
  * Besides IPC with the renderer's main thread, each renderer gets a second
- * channel (fd 3) to its compositor thread, which answers screenshots and
+ * authenticated loopback channel to its compositor thread, which answers screenshots and
  * scrolling even while the main thread is busy (see compositor.js).
  */
-import { closeSync } from "node:fs";
+import {listenCompositor} from "./compositor-channel.js";
+import {RawFrames} from "../paint/raw-frames.js";
 import { PulseClient } from "../audio/pulse-client.js";
 import { logEnabled, pipeToLog, RENDERER_LOG_FLAG, writeLog } from "../log.js";
 import { NetworkService } from "../network/network-service.js";
@@ -47,13 +49,18 @@ const MAX_WEB_SOCKETS = 64;
 const MAX_WEB_SOCKET_MESSAGE = 16 * 1024 * 1024;
 const COMPOSITOR_METHODS = new Set(["screenshot", "scroll", "scrollOffset"]);
 const COMPOSITOR_TIMEOUT = 10_000;
-const MAX_CHANNEL_LINE = 96 * 1024 * 1024;
 const LIFECYCLE_NAMES = new Set(["DOMContentLoaded", "load"]);
 
 // A file path, not a URL's pathname ("/C:/..." on Windows).
 const DEFAULT_ENTRY = Bun.fileURLToPath(new URL("./main.js", import.meta.url));
 
 export class RendererHost {
+  #clipboardWrite = writeClipboard;
+  #clipboardUntil = 0;
+  #clipboardPending = false;
+  #rawFrames = null;
+  #startEpoch = 0;
+  #rejectStartup = null;
   #entry;
   #args;
   #timeout;
@@ -73,6 +80,7 @@ export class RendererHost {
   #audio = new Map();
   // In-flight page fetches, so AbortController reaches the actual HTTP request.
   #pageFetches = new Map();
+  #resourceFetches = new Map();
   #nextId = 1;
   #queue = Promise.resolve();
   #restarting = false;
@@ -104,11 +112,11 @@ export class RendererHost {
     entry = DEFAULT_ENTRY, args = [], timeout = 30_000, onRestart = null, onNavigate = null, onDownload = null,
     fetch: fetchImpl = fetch,
     network = new NetworkService({ fetch: fetchImpl }), onFrame = null, onLifecycle = null,
-    // The compositor's channel is an extra stdio pipe used as fd 3, which
-    // Windows does not have (Bun hands out libuv pipes there, not file
-    // descriptors): there the main thread answers screenshots and scrolling.
-    compositor = entry === DEFAULT_ENTRY && process.platform !== "win32",
+    // A dedicated loopback socket works independently of the main thread on all platforms.
+    compositor = entry === DEFAULT_ENTRY,
+    clipboardWrite = writeClipboard,
   } = {}) {
+    this.#clipboardWrite = clipboardWrite;
     this.#onFrame = onFrame;
     this.#onLifecycle = onLifecycle;
     this.#compositor = compositor;
@@ -130,47 +138,61 @@ export class RendererHost {
       resolveReady = resolve;
       rejectReady = reject;
     });
+    this.#rejectStartup = rejectReady;
     const logging = logEnabled();
     const compositor = this.#compositor;
-    const child = Bun.spawn({
-      cmd: [process.execPath, this.#entry, ...this.#args,
-        ...(logging ? [RENDERER_LOG_FLAG] : []), ...(compositor ? [COMPOSITOR_FLAG] : []),
-        ...(process.env.BUNINU_VERIFY_STYLE ? [VERIFY_STYLE_FLAG] : []), ...(process.env.BUNINU_FULL_STYLE ? [FULL_STYLE_FLAG] : [])],
-      // No inherited environment: nothing from the controller leaks in.
-      // Windows programs need SystemRoot to load system libraries.
-      env: process.platform === "win32" && process.env.SystemRoot ? { SystemRoot: process.env.SystemRoot } : {},
-      // With BUNINU_LOG, output goes through the controller into the log file.
-      // fd 3 is a socket to the renderer's compositor thread.
-      stdio: ["ignore", logging ? "pipe" : "inherit", logging ? "pipe" : "inherit", ...(compositor ? ["pipe"] : [])],
-      serialization: "advanced",
-      ipc: (message) => {
-        if (message?.type === "ready") {
-          this.#sandbox = sanitizeSandboxReport(message.sandbox);
-          resolveReady();
-        }
-        else this.#handleMessage(child, message);
-      },
-      onExit: (_process, exitCode, signalCode) => {
-        this.#closeChannel(channel);
-        this.#closeSockets(child);
-        this.#closeAudio(child);
-        this.#closePageFetches(child);
-        if (this.#child !== child) return;
-        console.error(`buninu-browser: renderer ${child.pid} exited unexpectedly (${signalCode ?? `code ${exitCode}`})`);
-        this.#child = null;
-        this.#ready = null;
-        rejectReady(new Error("renderer exited during startup"));
-        for (const { reject } of this.#pending.values()) reject(new Error("renderer exited"));
-        this.#pending.clear();
-      },
-    });
-    this.#child = child;
-    const channel = compositor && Number.isInteger(child.stdio[3]) ? this.#openChannel(child.stdio[3]) : null;
-    this.#channel = channel;
-    if (logging) {
-      pipeToLog(child.stdout, `renderer ${child.pid}`, (chunk) => process.stdout.write(chunk));
-      pipeToLog(child.stderr, `renderer ${child.pid}`, (chunk) => process.stderr.write(chunk));
-    }
+    const epoch = ++this.#startEpoch;
+    void (async () => {
+      const channel = compositor ? {pending:new Map(),nextId:1,closed:false,transport:null} : null;
+      if (channel) channel.transport = await listenCompositor(
+        (message,pixels)=>this.#handleCompositorMessage(channel,message,pixels),
+        ()=>this.#closeChannel(channel));
+      if (epoch !== this.#startEpoch) { channel?.transport.close(); throw Error('Renderer startup cancelled'); }
+      this.#channel = channel;
+      const child = Bun.spawn({
+        cmd: [process.execPath, this.#entry, ...this.#args,
+          ...(logging ? [RENDERER_LOG_FLAG] : []), ...(compositor ? [COMPOSITOR_FLAG, `--compositor-endpoint=${JSON.stringify(channel.transport.endpoint)}`] : []),
+          ...(process.env.BUNINU_VERIFY_STYLE ? [VERIFY_STYLE_FLAG] : []), ...(process.env.BUNINU_FULL_STYLE ? [FULL_STYLE_FLAG] : [])],
+        // No inherited environment: nothing from the controller leaks in.
+        // Windows programs need SystemRoot to load system libraries.
+        env: process.platform === "win32" && process.env.SystemRoot ? { SystemRoot: process.env.SystemRoot } : {},
+        // With BUNINU_LOG, output goes through the controller into the log file.
+        stdio: ["ignore", logging ? "pipe" : "inherit", logging ? "pipe" : "inherit"],
+        serialization: "advanced",
+        ipc: (message) => {
+          if (message?.type === "ready") {
+            this.#sandbox = sanitizeSandboxReport(message.sandbox);
+            this.#rejectStartup=null;
+            clearTimeout(startupTimer);
+            resolveReady();
+          }
+          else this.#handleMessage(child, message);
+        },
+        onExit: (_process, exitCode, signalCode) => {
+          clearTimeout(startupTimer);
+          this.#closeChannel(channel);
+          this.#closeSockets(child);
+          this.#closeAudio(child);
+          this.#closePageFetches(child);
+          rejectReady(new Error("renderer exited during startup"));
+          if (this.#child !== child) return;
+          console.error(`buninu-browser: renderer ${child.pid} exited unexpectedly (${signalCode ?? `code ${exitCode}`})`);
+          this.#child = null;
+          this.#ready = null;
+          this.#rawFrames?.close(); this.#rawFrames=null;
+          for (const { reject } of this.#pending.values()) reject(new Error("renderer exited"));
+          this.#pending.clear();
+        },
+      });
+      this.#child = child;
+      const startupTimer = setTimeout(() => {
+        this.#closeChannel(channel); child.kill(9); rejectReady(Error('Renderer startup timed out'));
+      }, this.#timeout);
+      if (logging) {
+        pipeToLog(child.stdout, `renderer ${child.pid}`, (chunk) => process.stdout.write(chunk));
+        pipeToLog(child.stderr, `renderer ${child.pid}`, (chunk) => process.stderr.write(chunk));
+      }
+    })().catch(error=>{ if(epoch===this.#startEpoch){this.#closeChannel(this.#channel);this.#ready=null;} rejectReady(error); });
     return this.#ready;
   }
 
@@ -189,6 +211,7 @@ export class RendererHost {
       this.call("applyCompositorScroll", x, y).catch(() => {});
     }
     if ((method === "loadDocument" || method === "showFragment") && params[0]) {
+      if (method === "loadDocument") this.#closeResourceFetches(this.#child);
       this.#documentUrl = String(method === "loadDocument" ? params[0].url : params[0]);
     }
     const run = () => this.#call(method, params);
@@ -211,12 +234,13 @@ export class RendererHost {
    * waiting for the renderer's main thread or its call queue.
    */
   async composite(method, ...params) {
-    if (!this.#compositor || !COMPOSITOR_METHODS.has(method)) return this.call(method, ...params);
+    if (!this.#compositor || !COMPOSITOR_METHODS.has(method)) return this.#captureResult(method, await this.call(method, ...params), params);
     // A dead renderer is restarted (and its page restored) through the call path.
     if (!this.#child) await this.call("url");
     await this.start();
     const channel = this.#channel;
-    if (!channel) return this.call(method, ...params);
+    if (!channel) return this.#captureResult(method, await this.call(method, ...params), params);
+    const child = this.#child;
     const result = await new Promise((resolve, reject) => {
       const id = channel.nextId++;
       const timer = setTimeout(() => {
@@ -233,56 +257,25 @@ export class RendererHost {
           reject(error);
         },
       });
-      channel.writer.write(`${JSON.stringify({ id, method, params })}\n`);
-      channel.writer.flush();
+      try { channel.transport.send({id,method,params}); }
+      catch(error) { channel.pending.get(id).reject(error); channel.pending.delete(id); }
     });
-    const sanitized = sanitizeCompositorResult(method, result);
+    if (channel.closed || this.#child !== child) throw Error("Renderer closed during capture");
+    const sanitized = this.#captureResult(method, result, params);
     if (method === "scroll") this.#pendingScroll = sanitized;
     return sanitized;
   }
 
-  #openChannel(fd) {
-    const channel = { writer: Bun.file(fd).writer(), pending: new Map(), nextId: 1, closed: false };
-    (async () => {
-      const decoder = new TextDecoder();
-      let buffer = "";
-      try {
-        for await (const chunk of Bun.file(fd).stream()) {
-          buffer += decoder.decode(chunk, { stream: true });
-          let newline;
-          while ((newline = buffer.indexOf("\n")) >= 0) {
-            this.#handleCompositorLine(channel, buffer.slice(0, newline));
-            buffer = buffer.slice(newline + 1);
-          }
-          if (buffer.length > MAX_CHANNEL_LINE) buffer = "";
-        }
-      } catch {
-        // The renderer went away.
-      }
-      this.#closeChannel(channel);
-      // Close everything that refers to the socket once, after end of
-      // stream, so no descriptor number can have been reused meanwhile.
-      try {
-        channel.writer.end();
-      } catch {
-        // Already closed.
-      }
-      try {
-        closeSync(fd);
-      } catch {
-        // Already closed.
-      }
-    })();
-    return channel;
+  #captureResult(method,result,params) {
+    if (method === 'screenshot' && ['rgba','bgra'].includes(params[0]?.format)) {
+      if (result?.format !== params[0].format) throw Error('Raw screenshot format mismatch');
+      this.#rawFrames ??= new RawFrames();
+      return this.#rawFrames.write(result.pixels,result.width,result.height,result.format);
+    }
+    return sanitizeCompositorResult(method,result);
   }
 
-  #handleCompositorLine(channel, line) {
-    let message;
-    try {
-      message = JSON.parse(line);
-    } catch {
-      return;
-    }
+  #handleCompositorMessage(channel, message, pixels) {
     if (channel.closed || typeof message !== "object" || message === null) return;
     if (message.type === "frame") {
       if (this.#channel === channel) this.#onFrame?.();
@@ -290,19 +283,23 @@ export class RendererHost {
       const pending = channel.pending.get(message.id);
       channel.pending.delete(message.id);
       if (Object.hasOwn(message, "error")) pending.reject(new Error(`compositor: ${String(message.error).slice(0, 200)}`));
-      else pending.resolve(message.result);
+      else pending.resolve(pixels.length ? {...message.result,pixels} : message.result);
     }
   }
 
   #closeChannel(channel) {
     if (!channel || channel.closed) return;
     channel.closed = true;
+    channel.transport?.close();
     for (const { reject } of channel.pending.values()) reject(new Error("compositor closed"));
     channel.pending.clear();
     if (this.#channel === channel) this.#channel = null;
   }
 
   close() {
+    this.#startEpoch++;
+    this.#rejectStartup?.(Error("Renderer closed during startup")); this.#rejectStartup=null;
+    this.#rawFrames?.close(); this.#rawFrames=null;
     this.#closeChannel(this.#channel);
     const child = this.#child;
     this.#closeSockets(child);
@@ -310,6 +307,8 @@ export class RendererHost {
     this.#closePageFetches(child);
     this.#child = null;
     this.#ready = null;
+    for (const {reject} of this.#pending.values()) reject(Error("Renderer closed"));
+    this.#pending.clear();
     child?.kill();
   }
 
@@ -317,6 +316,8 @@ export class RendererHost {
     if (!this.#child) await this.#restart();
     await this.start();
     const child = this.#child;
+    if (method === 'click' || method === 'press') this.#clipboardUntil = Date.now()+5000;
+    if (method === 'loadDocument') this.#clipboardUntil = 0;
     const id = this.#nextId++;
     return new Promise((resolve, reject) => {
       const timer = setTimeout(() => {
@@ -325,6 +326,7 @@ export class RendererHost {
         this.#child = null;
         this.#ready = null;
         console.error(`buninu-browser: renderer ${child.pid} missed the ${timeout}ms deadline for ${method}; killing it`);
+        this.#rawFrames?.close(); this.#rawFrames=null;
         child.kill(9);
         reject(new Error(`renderer ${method} timed out after ${timeout}ms`));
       }, timeout);
@@ -363,6 +365,18 @@ export class RendererHost {
         pending.reject(new Error(`renderer: ${String(message.error).split("\n")[0] || "unknown error"}`));
       }
       else pending.resolve(message.result);
+    } else if (message.type === 'clipboard-write' && Number.isInteger(message.id)) {
+      const reply = error => { if(this.#child===child)child.send({type:'clipboard-result',id:message.id,...(error?{error}: {})}); };
+      let secure=false;
+      try { const url=new URL(this.#documentUrl); secure=url.protocol==='https:' || (url.protocol==='http:' && ['localhost','127.0.0.1','[::1]'].includes(url.hostname)); } catch {}
+      if (!secure || Date.now()>this.#clipboardUntil || this.#clipboardPending
+          || typeof message.text!=='string' || Buffer.byteLength(message.text)>1024*1024) {
+        reply('Clipboard write requires a recent user action in a secure document'); return;
+      }
+      this.#clipboardUntil=0; this.#clipboardPending=true;
+      Promise.resolve().then(()=>this.#clipboardWrite(message.text))
+        .then(()=>reply(),()=>reply('Unable to write system clipboard'))
+        .finally(()=>{this.#clipboardPending=false;});
     } else if (message.type === "fetch" && Number.isInteger(message.id)) {
       this.#fetchForRenderer(child, message);
     } else if (message.type === "page-fetch" && Number.isInteger(message.id)) {
@@ -493,8 +507,7 @@ export class RendererHost {
         child.send({ type: "audio-event", id, ...payload });
         // The compositor's A/V clock must not wait behind page JavaScript.
         if (payload.event === "timing" && this.#channel && !this.#channel.closed) {
-          this.#channel.writer.write(`${JSON.stringify({ type: "audio-timing", audioId: id, seconds: payload.seconds })}\n`);
-          this.#channel.writer.flush();
+          this.#channel.transport.send({type:"audio-timing",audioId:id,seconds:payload.seconds});
         }
       }
     };
@@ -534,6 +547,7 @@ export class RendererHost {
   }
 
   #closePageFetches(child) {
+    this.#closeResourceFetches(child);
     for (const [id, entry] of this.#pageFetches) {
       if (entry.child !== child) continue;
       this.#pageFetches.delete(id);
@@ -541,6 +555,14 @@ export class RendererHost {
     }
   }
 
+  #closeResourceFetches(child) {
+    for (const [id, entry] of this.#resourceFetches) {
+      if (entry.child !== child) continue;
+      this.#resourceFetches.delete(id);
+      entry.controller.abort();
+    }
+  }
+
   #closeSockets(child) {
     for (const [id, entry] of this.#sockets) {
       if (entry.child !== child) continue;
@@ -552,6 +574,16 @@ export class RendererHost {
   }
 
   async #fetchForRenderer(child, { id, url, kind }) {
+    const entry = { child, controller: new AbortController() };
+    this.#resourceFetches.set(id, entry);
+    try {
+      await this.#fetchResource(child, { id, url, kind }, entry.controller.signal);
+    } finally {
+      if (this.#resourceFetches.get(id) === entry) this.#resourceFetches.delete(id);
+    }
+  }
+
+  async #fetchResource(child, { id, url, kind }, signal) {
     const reply = (payload) => {
       if (this.#child === child) child.send({ type: "fetch-result", id, ...payload });
     };
@@ -561,7 +593,10 @@ export class RendererHost {
     } catch {
       return reply({ error: "invalid URL" });
     }
-    if (!ALLOWED_SCHEMES.has(target.protocol) || !RESOURCE_KINDS.has(kind)) {
+    // Local documents may render local resources. Authorize this from the
+    // controller's document URL, never from a renderer-supplied referrer.
+    const localFile = target.protocol === "file:" && new URL(this.#documentUrl).protocol === "file:";
+    if ((!ALLOWED_SCHEMES.has(target.protocol) && !localFile) || !RESOURCE_KINDS.has(kind)) {
       return reply({ error: `blocked ${kind} request for ${target.protocol}` });
     }
     // A renderer only ever holds documents of its own origin (site isolation
@@ -570,7 +605,7 @@ export class RendererHost {
     // being framed.
     const frame = kind === "iframe";
     if (frame && !sameOrigin(target.href, this.#documentUrl)) return reply({ error: "cross-origin frame" });
-    // Video and audio over http(s) stream. data: stays one response: it is
+    // Video and audio over http(s)/file stream. data: stays one response: it is
     // already in hand, and the renderer wraps it in a finished pipe.
     if ((kind === "video" || kind === "audio") && target.protocol !== "data:") {
       const send = (payload) => {
@@ -599,7 +634,7 @@ export class RendererHost {
           } else if (event.type === "error") {
             send({ type: "fetch-error", id, error: String(event.error ?? "media fetch failed") });
           }
-        });
+        }, { signal });
       } catch (error) {
         send({ type: "fetch-error", id, error: String(error?.message ?? error) });
       }
@@ -608,7 +643,7 @@ export class RendererHost {
     try {
       const response = target.protocol === "data:"
         ? await dataResponse(target)
-        : await this.#network.subresource(target.href, this.#documentUrl, kind);
+        : await this.#network.subresource(target.href, this.#documentUrl, kind, { signal });
       if (response.body.byteLength > MAX_RESOURCE_BYTES) return reply({ error: "resource too large" });
       if (frame && !sameOrigin(response.url || target.href, this.#documentUrl)) return reply({ error: "cross-origin frame" });
       if (frame && framingDenied(response.rawHeaders ?? [])) return reply({ error: "framing denied" });

package/lib/renderer/image-resources.js

@@ -0,0 +1,65 @@
+/**
+ * Coalesce concurrent requests for the same image within one document. Each
+ * consumer gets its own CanvasKit handle, sharing the underlying pixels, so
+ * removing one element cannot delete another element's image. Completed
+ * requests are dropped; HTTP freshness and persistent caching belong to the
+ * controller's network service.
+ */
+export function imageCrossOrigin(element) {
+  const value = element.getAttribute("crossorigin");
+  return value === null ? null : value.toLowerCase() === "use-credentials" ? "include" : "same-origin";
+}
+
+export function imageRequestKey(src, credentials) {
+  return JSON.stringify([src, credentials]);
+}
+
+export function createImageResourceLoader(CanvasKit, fetchResource, fetchCors) {
+  const documents = new WeakMap();
+  const corsRequests = new WeakMap();
+  const loadImage = function (document, url, credentials = null) {
+    let requests = documents.get(document);
+    if (!requests) documents.set(document, requests = new Map());
+    const key = imageRequestKey(url, credentials);
+    let entry = requests.get(key);
+    if (!entry) {
+      entry = { consumers: 0, ready: (async () => {
+        let response;
+        if (credentials !== null) {
+          const request = fetchCors({ url, method: "GET", headers: [], body: null,
+            mode: "cors", credentials, redirect: "follow" });
+          let pending = corsRequests.get(document);
+          if (!pending) corsRequests.set(document, pending = new Set());
+          pending.add(request);
+          try {
+            const result = await request;
+            const body = result.body instanceof Uint8Array ? result.body : await Bun.readableStreamToBytes(result.body);
+            response = { ...result, body };
+          } finally { pending.delete(request); }
+        } else response = await fetchResource(url, "image");
+        if (!(response.ok ?? (response.status >= 200 && response.status < 300))) throw new Error(`HTTP ${response.status}`);
+        // Keep Bun's header validation/decompression-size guard before Skia
+        // takes ownership of these untrusted encoded bytes.
+        const { width, height } = await new Bun.Image(response.body).metadata();
+        const image = CanvasKit.MakeImageFromEncoded(response.body);
+        if (!image) throw new Error("Image decoding failed");
+        return { width, height, image, url: response.url ?? url, requestedURL: url, crossOrigin: credentials,
+          originClean: credentials !== null ? true : undefined };
+      })() };
+      requests.set(key, entry);
+    }
+    entry.consumers++;
+    return entry.ready.then(resource => Object.freeze({ ...resource, image: resource.image.clone() })).finally(() => {
+      if (--entry.consumers) return;
+      requests.delete(key);
+      // All successful consumers already own their clone. Failures have no
+      // image to release, and must allow a later request to try again.
+      entry.ready.then(resource => resource.image.delete(), () => {});
+    });
+  };
+  loadImage.cancelDocument = (document) => {
+    for (const request of corsRequests.get(document) ?? []) request.abort?.();
+    corsRequests.delete(document);
+  };
+  return loadImage;
+}

package/lib/renderer/interfaces.js

@@ -74,6 +74,34 @@ export function platformObject(name, template, { parent = Object.prototype, base
 
 const accessor = (object, key) => Object.getOwnPropertyDescriptor(object, key);
 
+/** A page-local Error constructor around SES's tamed intrinsic, retaining native error branding. */
+export function errorInterface(BaseError, isError) {
+  const Error = function Error(message, options) {
+    return Reflect.construct(BaseError, arguments, new.target ?? Error);
+  };
+  const prototype = Object.create(BaseError.prototype);
+  for (const key of Reflect.ownKeys(BaseError.prototype)) {
+    if (key === "constructor") continue;
+    const descriptor = Object.getOwnPropertyDescriptor(BaseError.prototype, key);
+    Object.defineProperty(prototype, key, { ...descriptor, configurable: true, ...("value" in descriptor ? { writable: true } : {}) });
+  }
+  Object.defineProperty(prototype, "constructor", { value: Error, writable: true, configurable: true });
+  Error.prototype = prototype;
+  Object.setPrototypeOf(Error, BaseError);
+  for (const key of Reflect.ownKeys(BaseError)) {
+    if (["length", "name", "prototype"].includes(key)) continue;
+    const descriptor = Object.getOwnPropertyDescriptor(BaseError, key);
+    Object.defineProperty(Error, key, { ...descriptor, configurable: true, ...("value" in descriptor ? { writable: true } : {}) });
+  }
+  Object.defineProperty(Error, "length", { value: 1, configurable: true });
+  Object.defineProperty(Error, Symbol.hasInstance, {
+    value(value) { return Function.prototype[Symbol.hasInstance].call(this === Error ? BaseError : this, value); },
+    configurable: true,
+  });
+  if (isError) Object.defineProperty(Error, "isError", { value: isError, writable: true, configurable: true });
+  return Error;
+}
+
 /**
  * window.localStorage and sessionStorage (HTML §12.2.1): the methods on
  * Storage.prototype, and the stored items as each storage's own properties