@nativedesktop/react 0.4.0 → 0.4.2

package/dist/index.js

@@ -87,57 +87,81 @@ class BinaryUnsupportedValue extends Error {
 var textEncoder = new TextEncoder;
 
 class ByteWriter {
-  ab = new ArrayBuffer(256);
-  buf = new Uint8Array(this.ab);
-  view = new DataView(this.ab);
+  buf;
+  view;
+  cap;
   len = 0;
-  ensure(n) {
-    if (this.len + n <= this.ab.byteLength)
-      return;
-    let cap = this.ab.byteLength * 2;
+  constructor(capacity) {
+    this.buf = new Uint8Array(capacity);
+    this.view = new DataView(this.buf.buffer);
+    this.cap = capacity;
+  }
+  grow(n) {
+    let cap = this.cap * 2;
     while (cap < this.len + n)
       cap *= 2;
-    const nextAb = new ArrayBuffer(cap);
-    new Uint8Array(nextAb).set(this.buf.subarray(0, this.len));
-    this.ab = nextAb;
-    this.buf = new Uint8Array(nextAb);
-    this.view = new DataView(nextAb);
+    const next = new Uint8Array(cap);
+    next.set(this.buf.subarray(0, this.len));
+    this.buf = next;
+    this.view = new DataView(next.buffer);
+    this.cap = cap;
   }
   u8(v) {
-    this.ensure(1);
+    if (this.len + 1 > this.cap)
+      this.grow(1);
     this.buf[this.len++] = v & 255;
   }
   u16(v) {
-    this.ensure(2);
+    if (this.len + 2 > this.cap)
+      this.grow(2);
     this.view.setUint16(this.len, v, true);
     this.len += 2;
   }
   u32(v) {
-    this.ensure(4);
+    if (this.len + 4 > this.cap)
+      this.grow(4);
     this.view.setUint32(this.len, v >>> 0, true);
     this.len += 4;
   }
   i64(v) {
-    this.ensure(8);
+    if (this.len + 8 > this.cap)
+      this.grow(8);
     this.view.setBigInt64(this.len, BigInt(v), true);
     this.len += 8;
   }
   f64(v) {
-    this.ensure(8);
+    if (this.len + 8 > this.cap)
+      this.grow(8);
     this.view.setFloat64(this.len, v, true);
     this.len += 8;
   }
-  bytes(b) {
-    this.ensure(b.length);
-    this.buf.set(b, this.len);
-    this.len += b.length;
-  }
   lenString(s) {
-    this.ensure(4 + s.length * 3);
+    const n = s.length;
+    if (this.len + 4 + n * 3 > this.cap)
+      this.grow(4 + n * 3);
     const lenPos = this.len;
-    const { written } = textEncoder.encodeInto(s, this.buf.subarray(this.len + 4));
-    this.view.setUint32(lenPos, written, true);
-    this.len += 4 + written;
+    let p = lenPos + 4;
+    let ascii = true;
+    for (let i = 0;i < n; i++) {
+      const c = s.charCodeAt(i);
+      if (c > 127) {
+        ascii = false;
+        break;
+      }
+      this.buf[p++] = c;
+    }
+    if (!ascii) {
+      const { written } = textEncoder.encodeInto(s, this.buf.subarray(lenPos + 4));
+      p = lenPos + 4 + written;
+    }
+    this.view.setUint32(lenPos, p - lenPos - 4, true);
+    this.len = p;
+  }
+  patchU16(pos, v) {
+    this.view.setUint16(pos, v, true);
+  }
+  patchU32(pos, v) {
+    this.view.setUint32(pos, v >>> 0, true);
   }
   slice() {
     return this.buf.slice(0, this.len);
@@ -155,93 +179,103 @@ function encodeCommitBatchBinary(batch) {
     index.set(s, i);
     return i;
   };
-  const ops = new ByteWriter;
+  let lastKey = "";
+  let lastKeyRef = 0;
+  const internKey = (k) => {
+    if (k === lastKey)
+      return lastKeyRef;
+    lastKey = k;
+    lastKeyRef = intern(k);
+    return lastKeyRef;
+  };
+  const out = new ByteWriter(32 * batch.ops.length + 4096);
+  out.u8(78);
+  out.u8(1);
+  for (let i = 0;i < 6; i++)
+    out.u8(0);
+  out.i64(batch.commitId);
+  out.u32(batch.generation);
+  out.u32(batch.ops.length);
+  const stringTableOffsetPos = out.len;
+  out.u32(0);
   const writeProps = (props) => {
-    const keys = Object.keys(props);
-    ops.u16(keys.length);
-    for (const k of keys) {
-      ops.u32(intern(k));
+    const countPos = out.len;
+    out.u16(0);
+    let count = 0;
+    for (const k in props) {
+      count++;
+      out.u32(internKey(k));
       const v = props[k];
       if (v === null || v === undefined) {
-        ops.u8(0);
+        out.u8(0);
       } else if (typeof v === "boolean") {
-        ops.u8(1);
-        ops.u8(v ? 1 : 0);
+        out.u8(1);
+        out.u8(v ? 1 : 0);
       } else if (typeof v === "number") {
         if (Number.isInteger(v)) {
-          ops.u8(2);
-          ops.i64(v);
+          out.u8(2);
+          out.i64(v);
         } else {
-          ops.u8(3);
-          ops.f64(v);
+          out.u8(3);
+          out.f64(v);
         }
       } else if (typeof v === "string") {
-        ops.u8(4);
-        ops.u32(intern(v));
+        out.u8(4);
+        out.u32(intern(v));
       } else {
         throw new BinaryUnsupportedValue(k, v);
       }
     }
+    out.patchU16(countPos, count);
   };
   for (const op of batch.ops) {
     switch (op.op) {
       case "create": {
-        ops.u8(1);
-        ops.u32(op.id);
+        out.u8(1);
+        out.u32(op.id);
         const wt = WIDGET_TYPE[op.widget];
         if (wt === undefined)
           throw new Error(`ndp-binary: unknown widget "${op.widget}"`);
-        ops.u16(wt);
+        out.u16(wt);
         writeProps(op.props);
         break;
       }
       case "append":
-        ops.u8(2);
-        ops.u32(op.parent);
-        ops.u32(op.child);
+        out.u8(2);
+        out.u32(op.parent);
+        out.u32(op.child);
         break;
       case "insertBefore":
-        ops.u8(3);
-        ops.u32(op.parent);
-        ops.u32(op.child);
-        ops.u32(op.before ?? 0);
+        out.u8(3);
+        out.u32(op.parent);
+        out.u32(op.child);
+        out.u32(op.before ?? 0);
         break;
       case "remove":
-        ops.u8(4);
-        ops.u32(op.id);
+        out.u8(4);
+        out.u32(op.id);
         break;
       case "setText":
-        ops.u8(5);
-        ops.u32(op.id);
-        ops.u32(intern(op.text));
+        out.u8(5);
+        out.u32(op.id);
+        out.u32(intern(op.text));
         break;
       case "update":
-        ops.u8(6);
-        ops.u32(op.id);
+        out.u8(6);
+        out.u32(op.id);
         writeProps(op.props);
         break;
       case "hide":
-        ops.u8(7);
-        ops.u32(op.id);
+        out.u8(7);
+        out.u32(op.id);
         break;
       case "unhide":
-        ops.u8(8);
-        ops.u32(op.id);
+        out.u8(8);
+        out.u32(op.id);
         break;
     }
   }
-  const opBytes = ops.slice();
-  const stringTableOffset = 28 + opBytes.length;
-  const out = new ByteWriter;
-  out.u8(78);
-  out.u8(1);
-  for (let i = 0;i < 6; i++)
-    out.u8(0);
-  out.i64(batch.commitId);
-  out.u32(batch.generation);
-  out.u32(batch.ops.length);
-  out.u32(stringTableOffset);
-  out.bytes(opBytes);
+  out.patchU32(stringTableOffsetPos, out.len);
   out.u32(strings.length);
   for (const s of strings)
     out.lenString(s);
@@ -253,10 +287,15 @@ var NDP_VERSION = 1;
 
 // ../../runtime/ndp.ts
 var TRACE = process.env.NDP_TRACE === "1";
+var textDecoder = new TextDecoder;
+var textEncoder2 = new TextEncoder;
 
 class Ndp {
   socket;
-  inbox = new Uint8Array(0);
+  inbox = new Uint8Array(64 * 1024);
+  inboxView = new DataView(this.inbox.buffer);
+  inboxHead = 0;
+  inboxTail = 0;
   eventCb = null;
   helloAckResolve = null;
   outbox = [];
@@ -321,22 +360,52 @@ class Ndp {
       }
     }
   }
+  reserveInbox(extra) {
+    const pending = this.inboxTail - this.inboxHead;
+    if (this.inboxTail + extra <= this.inbox.length)
+      return;
+    if (pending + extra <= this.inbox.length) {
+      this.compactInbox();
+      return;
+    }
+    let cap = this.inbox.length * 2;
+    while (cap < pending + extra)
+      cap *= 2;
+    const next = new Uint8Array(cap);
+    next.set(this.inbox.subarray(this.inboxHead, this.inboxTail));
+    this.inbox = next;
+    this.inboxView = new DataView(next.buffer);
+    this.inboxHead = 0;
+    this.inboxTail = pending;
+  }
+  compactInbox() {
+    if (this.inboxHead === 0)
+      return;
+    this.inbox.copyWithin(0, this.inboxHead, this.inboxTail);
+    this.inboxTail -= this.inboxHead;
+    this.inboxHead = 0;
+  }
   onData(chunk) {
-    const merged = new Uint8Array(this.inbox.length + chunk.length);
-    merged.set(this.inbox, 0);
-    merged.set(chunk, this.inbox.length);
-    this.inbox = merged;
-    while (this.inbox.length >= 4) {
-      const view = new DataView(this.inbox.buffer, this.inbox.byteOffset, 4);
-      const len = view.getUint32(0, true);
-      if (this.inbox.length < 4 + len)
+    this.reserveInbox(chunk.length);
+    this.inbox.set(chunk, this.inboxTail);
+    this.inboxTail += chunk.length;
+    while (this.inboxTail - this.inboxHead >= 4) {
+      const len = this.inboxView.getUint32(this.inboxHead, true);
+      if (this.inboxTail - this.inboxHead < 4 + len)
         break;
-      const json = new TextDecoder().decode(this.inbox.subarray(4, 4 + len));
-      this.inbox = this.inbox.subarray(4 + len);
+      const start = this.inboxHead + 4;
+      const json = textDecoder.decode(this.inbox.subarray(start, start + len));
+      this.inboxHead = start + len;
       if (TRACE)
         console.error("<< " + json);
       this.dispatch(JSON.parse(json));
     }
+    if (this.inboxHead === this.inboxTail) {
+      this.inboxHead = 0;
+      this.inboxTail = 0;
+    } else if (this.inboxHead * 2 >= this.inbox.length) {
+      this.compactInbox();
+    }
   }
   dispatch(msg) {
     if (msg.type === "helloAck") {
@@ -366,12 +435,12 @@ class Ndp {
     }
   }
   send(obj) {
-    const json = new TextEncoder().encode(JSON.stringify(obj));
+    const json = textEncoder2.encode(JSON.stringify(obj));
     const frame = new Uint8Array(4 + json.length);
     new DataView(frame.buffer).setUint32(0, json.length, true);
     frame.set(json, 4);
     if (TRACE)
-      console.error(">> " + new TextDecoder().decode(json));
+      console.error(">> " + textDecoder.decode(json));
     const wasEmpty = this.outbox.length === 0;
     this.outbox.push(frame);
     if (wasEmpty)
@@ -524,7 +593,7 @@ var widgetEvents = {
   tabview: [{ name: "selectionChanged", handler: "onSelectionChanged", payload: "index" }, { name: "dragStarted", handler: "onDragStarted", payload: "text" }, { name: "dragEnded", handler: "onDragEnded", payload: "none" }, { name: "dragOver", handler: "onDragOver", payload: "dragPoint" }, { name: "dropped", handler: "onDropped", payload: "dragPoint" }],
   grid: [{ name: "dragStarted", handler: "onDragStarted", payload: "text" }, { name: "dragEnded", handler: "onDragEnded", payload: "none" }, { name: "dragOver", handler: "onDragOver", payload: "dragPoint" }, { name: "dropped", handler: "onDropped", payload: "dragPoint" }],
   listview: [{ name: "rowActivated", handler: "onRowActivated", payload: "index" }, { name: "dragStarted", handler: "onDragStarted", payload: "text" }, { name: "dragEnded", handler: "onDragEnded", payload: "none" }, { name: "dragOver", handler: "onDragOver", payload: "dragPoint" }, { name: "dropped", handler: "onDropped", payload: "dragPoint" }],
-  webview: [{ name: "navigate", handler: "onNavigate", payload: "text" }, { name: "titleChanged", handler: "onTitleChanged", payload: "text" }, { name: "loadingChanged", handler: "onLoadingChanged", payload: "checked" }, { name: "backAvailable", handler: "onBackAvailable", payload: "checked" }, { name: "forwardAvailable", handler: "onForwardAvailable", payload: "checked" }, { name: "loadProgress", handler: "onLoadProgress", payload: "value" }, { name: "loadFailed", handler: "onLoadFailed", payload: "data" }, { name: "newWindow", handler: "onNewWindow", payload: "text" }, { name: "downloadRequested", handler: "onDownloadRequested", payload: "data" }, { name: "javaScriptResult", handler: "onJavaScriptResult", payload: "data" }, { name: "scriptMessage", handler: "onScriptMessage", payload: "data" }, { name: "schemeRequest", handler: "onSchemeRequest", payload: "data" }, { name: "cookiesResult", handler: "onCookiesResult", payload: "data" }, { name: "cookiesChanged", handler: "onCookiesChanged", payload: "data" }, { name: "faviconChanged", handler: "onFaviconChanged", payload: "data" }, { name: "findResult", handler: "onFindResult", payload: "data" }, { name: "securityChanged", handler: "onSecurityChanged", payload: "data" }, { name: "linkHover", handler: "onLinkHover", payload: "text" }, { name: "contextMenu", handler: "onContextMenu", payload: "data" }, { name: "contextMenuItemClicked", handler: "onContextMenuItemClicked", payload: "data" }, { name: "sessionSaved", handler: "onSessionSaved", payload: "data" }, { name: "audioStateChanged", handler: "onAudioStateChanged", payload: "data" }, { name: "dragStarted", handler: "onDragStarted", payload: "text" }, { name: "dragEnded", handler: "onDragEnded", payload: "none" }, { name: "dragOver", handler: "onDragOver", payload: "dragPoint" }, { name: "dropped", handler: "onDropped", payload: "dragPoint" }],
+  webview: [{ name: "navigate", handler: "onNavigate", payload: "text" }, { name: "titleChanged", handler: "onTitleChanged", payload: "text" }, { name: "loadingChanged", handler: "onLoadingChanged", payload: "checked" }, { name: "backAvailable", handler: "onBackAvailable", payload: "checked" }, { name: "forwardAvailable", handler: "onForwardAvailable", payload: "checked" }, { name: "loadProgress", handler: "onLoadProgress", payload: "value" }, { name: "loadFailed", handler: "onLoadFailed", payload: "data" }, { name: "newWindow", handler: "onNewWindow", payload: "text" }, { name: "downloadRequested", handler: "onDownloadRequested", payload: "data" }, { name: "javaScriptResult", handler: "onJavaScriptResult", payload: "data" }, { name: "scriptMessage", handler: "onScriptMessage", payload: "data" }, { name: "schemeRequest", handler: "onSchemeRequest", payload: "data" }, { name: "cookiesResult", handler: "onCookiesResult", payload: "data" }, { name: "cookiesChanged", handler: "onCookiesChanged", payload: "data" }, { name: "faviconChanged", handler: "onFaviconChanged", payload: "data" }, { name: "findResult", handler: "onFindResult", payload: "data" }, { name: "securityChanged", handler: "onSecurityChanged", payload: "data" }, { name: "linkHover", handler: "onLinkHover", payload: "text" }, { name: "contextMenu", handler: "onContextMenu", payload: "data" }, { name: "contextMenuItemClicked", handler: "onContextMenuItemClicked", payload: "data" }, { name: "sessionSaved", handler: "onSessionSaved", payload: "data" }, { name: "audioStateChanged", handler: "onAudioStateChanged", payload: "data" }, { name: "extensionsList", handler: "onExtensionsList", payload: "data" }, { name: "extensionActions", handler: "onExtensionActions", payload: "data" }, { name: "chromeDialog", handler: "onChromeDialog", payload: "data" }, { name: "dragStarted", handler: "onDragStarted", payload: "text" }, { name: "dragEnded", handler: "onDragEnded", payload: "none" }, { name: "dragOver", handler: "onDragOver", payload: "dragPoint" }, { name: "dropped", handler: "onDropped", payload: "dragPoint" }],
   nativeview: [{ name: "nativeEvent", handler: "onNativeEvent", payload: "data" }, { name: "dragStarted", handler: "onDragStarted", payload: "text" }, { name: "dragEnded", handler: "onDragEnded", payload: "none" }, { name: "dragOver", handler: "onDragOver", payload: "dragPoint" }, { name: "dropped", handler: "onDropped", payload: "dragPoint" }],
   splitview: [{ name: "dragStarted", handler: "onDragStarted", payload: "text" }, { name: "dragEnded", handler: "onDragEnded", payload: "none" }, { name: "dragOver", handler: "onDragOver", payload: "dragPoint" }, { name: "dropped", handler: "onDropped", payload: "dragPoint" }],
   headerbar: [{ name: "back", handler: "onBack", payload: "none" }, { name: "forward", handler: "onForward", payload: "none" }, { name: "dragStarted", handler: "onDragStarted", payload: "text" }, { name: "dragEnded", handler: "onDragEnded", payload: "none" }, { name: "dragOver", handler: "onDragOver", payload: "dragPoint" }, { name: "dropped", handler: "onDropped", payload: "dragPoint" }],
@@ -578,6 +647,9 @@ var widgetEvents = {
   chart: [{ name: "pointSelected", handler: "onPointSelected", payload: "data" }, { name: "dragStarted", handler: "onDragStarted", payload: "text" }, { name: "dragEnded", handler: "onDragEnded", payload: "none" }, { name: "dragOver", handler: "onDragOver", payload: "dragPoint" }, { name: "dropped", handler: "onDropped", payload: "dragPoint" }],
   codeeditor: [{ name: "changed", handler: "onChange", payload: "text" }, { name: "cursorMoved", handler: "onCursorMoved", payload: "data" }, { name: "diagnosticClicked", handler: "onDiagnosticClicked", payload: "data" }, { name: "dragStarted", handler: "onDragStarted", payload: "text" }, { name: "dragEnded", handler: "onDragEnded", payload: "none" }, { name: "dragOver", handler: "onDragOver", payload: "dragPoint" }, { name: "dropped", handler: "onDropped", payload: "dragPoint" }]
 };
+var widgetRefProps = {
+  popover: { anchorRef: "anchor" }
+};
 var handlerPropNames = {
   window: ["onAlertResult", "onOpenFileResult", "onSaveFileResult", "onNewTabRequested", "onClosed", "onFocused", "onSizeChanged", "onDragStarted", "onDragEnded", "onDragOver", "onDropped"],
   box: ["onHoverChanged", "onDragStarted", "onDragEnded", "onDragOver", "onDropped"],
@@ -597,7 +669,7 @@ var handlerPropNames = {
   tabview: ["onSelectionChanged", "onDragStarted", "onDragEnded", "onDragOver", "onDropped"],
   grid: ["onDragStarted", "onDragEnded", "onDragOver", "onDropped"],
   listview: ["onRowActivated", "onDragStarted", "onDragEnded", "onDragOver", "onDropped"],
-  webview: ["onNavigate", "onTitleChanged", "onLoadingChanged", "onBackAvailable", "onForwardAvailable", "onLoadProgress", "onLoadFailed", "onNewWindow", "onDownloadRequested", "onJavaScriptResult", "onScriptMessage", "onSchemeRequest", "onCookiesResult", "onCookiesChanged", "onFaviconChanged", "onFindResult", "onSecurityChanged", "onLinkHover", "onContextMenu", "onContextMenuItemClicked", "onSessionSaved", "onAudioStateChanged", "onDragStarted", "onDragEnded", "onDragOver", "onDropped"],
+  webview: ["onNavigate", "onTitleChanged", "onLoadingChanged", "onBackAvailable", "onForwardAvailable", "onLoadProgress", "onLoadFailed", "onNewWindow", "onDownloadRequested", "onJavaScriptResult", "onScriptMessage", "onSchemeRequest", "onCookiesResult", "onCookiesChanged", "onFaviconChanged", "onFindResult", "onSecurityChanged", "onLinkHover", "onContextMenu", "onContextMenuItemClicked", "onSessionSaved", "onAudioStateChanged", "onExtensionsList", "onExtensionActions", "onChromeDialog", "onDragStarted", "onDragEnded", "onDragOver", "onDropped"],
   nativeview: ["onNativeEvent", "onDragStarted", "onDragEnded", "onDragOver", "onDropped"],
   splitview: ["onDragStarted", "onDragEnded", "onDragOver", "onDropped"],
   headerbar: ["onBack", "onForward", "onDragStarted", "onDragEnded", "onDragOver", "onDropped"],
@@ -670,7 +742,7 @@ var widgetCommands = {
   tabview: [],
   grid: [],
   listview: [],
-  webview: ["goBack", "goForward", "reload", "stop", "executeJavaScript", "setZoom", "setUserAgent", "openDevTools", "addUserScript", "removeUserScript", "clearUserScripts", "registerScriptMessage", "unregisterScriptMessage", "respondScheme", "getCookies", "setCookie", "deleteCookie", "findStart", "findNext", "findPrevious", "findStop", "saveSession", "restoreSession", "setMuted", "setContextMenuItems", "focus"],
+  webview: ["goBack", "goForward", "reload", "stop", "executeJavaScript", "setZoom", "setUserAgent", "openDevTools", "addUserScript", "removeUserScript", "clearUserScripts", "registerScriptMessage", "unregisterScriptMessage", "respondScheme", "getCookies", "setCookie", "deleteCookie", "findStart", "findNext", "findPrevious", "findStop", "saveSession", "restoreSession", "setMuted", "setContextMenuItems", "listExtensions", "listExtensionActions", "installExtension", "uninstallExtension", "setExtensionEnabled", "focus"],
   nativeview: [],
   splitview: [],
   headerbar: [],
@@ -1114,6 +1186,7 @@ function emitCreateIfNew(inst) {
   if (inst.type === "label" && text !== undefined)
     props.text = text;
   delete props.children;
+  resolveRefProps(inst, props);
   for (const h of handlerPropNames[inst.type] ?? [])
     delete props[h];
   activeBatch.push({ op: "create", id: inst.id, widget: intrinsicToName[inst.type], props });
@@ -1123,6 +1196,89 @@ function emitCreateIfNew(inst) {
     activeBatch.push({ op: "append", parent: inst.id, child: child.id });
   }
 }
+var lastRefIds = new WeakMap;
+function refId(v) {
+  const id = v?.current?.id;
+  return typeof id === "number" ? id : undefined;
+}
+function resolveRefProps(inst, props) {
+  const refs = widgetRefProps[inst.type];
+  if (!refs)
+    return;
+  const sent = {};
+  for (const [refName, wireName] of Object.entries(refs)) {
+    if (!(refName in props))
+      continue;
+    const id = refId(props[refName]);
+    delete props[refName];
+    if (id === undefined)
+      continue;
+    props[wireName] = id;
+    sent[wireName] = id;
+  }
+  lastRefIds.set(inst, sent);
+}
+function diffRefProps(inst, props, changed) {
+  const refs = widgetRefProps[inst.type];
+  if (!refs)
+    return;
+  let sent = lastRefIds.get(inst);
+  if (!sent) {
+    sent = {};
+    lastRefIds.set(inst, sent);
+  }
+  for (const [refName, wireName] of Object.entries(refs)) {
+    if (wireName in props)
+      continue;
+    const id = refName in props ? refId(props[refName]) : undefined;
+    if (id === sent[wireName])
+      continue;
+    if (id === undefined) {
+      changed[wireName] = null;
+      delete sent[wireName];
+      continue;
+    }
+    changed[wireName] = id;
+    sent[wireName] = id;
+  }
+}
+var PROP_COMPARE_DEPTH = 4;
+function isPlainObject(v) {
+  if (typeof v !== "object" || v === null)
+    return false;
+  const proto = Object.getPrototypeOf(v);
+  return proto === Object.prototype || proto === null;
+}
+function propsEqual(a, b, depth = 0) {
+  if (Object.is(a, b))
+    return true;
+  if (depth >= PROP_COMPARE_DEPTH)
+    return false;
+  if (Array.isArray(a)) {
+    if (!Array.isArray(b) || a.length !== b.length)
+      return false;
+    for (let i = 0;i < a.length; i++)
+      if (!propsEqual(a[i], b[i], depth + 1))
+        return false;
+    return true;
+  }
+  if (!isPlainObject(a) || !isPlainObject(b))
+    return false;
+  const keys = Object.keys(a);
+  if (keys.length !== Object.keys(b).length)
+    return false;
+  for (const k of keys) {
+    if (!Object.prototype.hasOwnProperty.call(b, k))
+      return false;
+    if (!propsEqual(a[k], b[k], depth + 1))
+      return false;
+  }
+  return true;
+}
+var REMOVAL_VALUE = {
+  style: Object.freeze({}),
+  cssClasses: Object.freeze([])
+};
 function setPriorityFor(kind) {
   currentUpdatePriority = kind === "discrete" ? DiscreteEventPriority : kind === "continuous" ? ContinuousEventPriority : DefaultEventPriority;
 }
@@ -1201,15 +1357,21 @@ var hostConfig = {
         activeBatch.push({ op: "setText", id: inst.id, text: t });
     }
     const skip = handlerPropNames[type] ?? [];
+    const refs = widgetRefProps[type];
+    const wire = (k) => k !== "children" && !skip.includes(k) && !(type === "label" && k === "text") && !(refs !== undefined && (k in refs));
     const changed = {};
     for (const k of Object.keys(newProps)) {
-      if (k === "children" || skip.includes(k))
-        continue;
-      if (type === "label" && k === "text")
+      if (!wire(k))
         continue;
-      if (newProps[k] !== oldProps[k])
+      if (!propsEqual(newProps[k], oldProps[k]))
         changed[k] = newProps[k];
     }
+    for (const k of Object.keys(oldProps)) {
+      if (k in newProps || !wire(k))
+        continue;
+      changed[k] = REMOVAL_VALUE[k] ?? null;
+    }
+    diffRefProps(inst, newProps, changed);
     if (Object.keys(changed).length)
       activeBatch.push({ op: "update", id: inst.id, props: changed });
     inst.props = newProps;
@@ -1770,6 +1932,8 @@ function makeRef(instance) {
 var pendingEvals = new Map;
 var pendingCookies = new Map;
 var pendingSessions = new Map;
+var pendingExtensions = new Map;
+var pendingActions = new Map;
 var seq2 = 0;
 function nextId(prefix) {
   return `${prefix}${++seq2}`;
@@ -1825,6 +1989,58 @@ function onSessionSaved(e) {
   pendingSessions.delete(result.id);
   call2.resolve(result.state ?? "");
 }
+function listExtensions(node) {
+  const id = nextId("ext");
+  return new Promise((resolve2, reject2) => {
+    pendingExtensions.set(id, { resolve: resolve2, reject: reject2 });
+    sendCommand(node, "listExtensions", { id });
+  });
+}
+function onExtensionsList(e) {
+  const result = e.data;
+  const call2 = pendingExtensions.get(result.id);
+  if (!call2)
+    return;
+  pendingExtensions.delete(result.id);
+  if (result.ok)
+    call2.resolve(result.extensions ?? []);
+  else
+    call2.reject(new Error(result.error ?? "listExtensions failed"));
+}
+function installExtension(node, path) {
+  return extensionMutation(node, "installExtension", { path });
+}
+function uninstallExtension(node, extensionId) {
+  return extensionMutation(node, "uninstallExtension", { extensionId });
+}
+function setExtensionEnabled(node, extensionId, enabled) {
+  return extensionMutation(node, "setExtensionEnabled", { extensionId, enabled });
+}
+function extensionMutation(node, command, args) {
+  const id = nextId("ext");
+  return new Promise((resolve2, reject2) => {
+    pendingExtensions.set(id, { resolve: resolve2, reject: reject2 });
+    sendCommand(node, command, { id, ...args });
+  });
+}
+function listExtensionActions(node) {
+  const id = nextId("ext");
+  return new Promise((resolve2, reject2) => {
+    pendingActions.set(id, { resolve: resolve2, reject: reject2 });
+    sendCommand(node, "listExtensionActions", { id });
+  });
+}
+function onExtensionActions(e) {
+  const result = e.data;
+  const call2 = pendingActions.get(result.id);
+  if (!call2)
+    return;
+  pendingActions.delete(result.id);
+  if (result.ok)
+    call2.resolve(result.actions ?? []);
+  else
+    call2.reject(new Error(result.error ?? "listExtensionActions failed"));
+}
 function setContextMenuItems(node, items) {
   sendCommand(node, "setContextMenuItems", { items });
 }
@@ -2194,6 +2410,7 @@ export {
   useContext,
   useCallback,
   use,
+  uninstallExtension,
   system,
   startTransition,
   showToast,
@@ -2201,6 +2418,7 @@ export {
   showAlert,
   showAbout,
   setUnhandledErrorPolicy,
+  setExtensionEnabled,
   setContextMenuItems,
   sendNativeCommand,
   sendCommand,
@@ -2221,11 +2439,16 @@ export {
   onSaveFileResult,
   onOpenFileResult,
   onJavaScriptResult,
+  onExtensionsList,
+  onExtensionActions,
   onCookiesResult,
   onAlertResult,
   notifications,
   moveNode,
   memo,
+  listExtensions,
+  listExtensionActions,
+  installExtension,
   hasWidget,
   hasCommand,
   getCookies,

package/dist/packages/react/src/generated/intrinsics.d.ts

@@ -1,4 +1,4 @@
-import type { ReactNode, Ref } from "react";
+import type { ReactNode, Ref, RefObject } from "react";
 export { jsx, jsxs, Fragment } from "react/jsx-runtime";
 export type WidgetName = "Window" | "Box" | "Label" | "Button" | "TextInput" | "TextArea" | "Checkbox" | "Radio" | "Select" | "Slider" | "ProgressBar" | "Image" | "ScrollView" | "Separator" | "Spinner" | "TabView" | "Grid" | "ListView" | "WebView" | "NativeView" | "SplitView" | "HeaderBar" | "ToolbarView" | "SearchInput" | "SourceList" | "SourceTree" | "Menubar" | "Menu" | "MenuItem" | "SettingsGroup" | "Row" | "SwitchRow" | "Clamp" | "Overlay" | "Switch" | "ToggleButton" | "SegmentedControl" | "NumberInput" | "LinkButton" | "LevelIndicator" | "ColorPicker" | "Banner" | "MenuButton" | "SplitButton" | "Popover" | "Expander" | "StatusPage" | "ToastOverlay" | "DatePicker" | "Table" | "TreeView" | "FontPicker" | "Video" | "TrayItem" | "ShareButton" | "Terminal" | "Paned" | "CommandPalette" | "Avatar" | "Badge" | "Tag" | "Kbd" | "ComboBox" | "Breadcrumb" | "Dialog" | "Sheet" | "RichText" | "ProgressCircle" | "Skeleton" | "Chart" | "CodeEditor";
 export type WidgetType = "window" | "box" | "label" | "button" | "textinput" | "textarea" | "checkbox" | "radio" | "select" | "slider" | "progressbar" | "image" | "scrollview" | "separator" | "spinner" | "tabview" | "grid" | "listview" | "webview" | "nativeview" | "splitview" | "headerbar" | "toolbarview" | "searchinput" | "sourcelist" | "sourcetree" | "menubar" | "menu" | "menuitem" | "settingsgroup" | "row" | "switchrow" | "clamp" | "overlay" | "switch" | "togglebutton" | "segmentedcontrol" | "numberinput" | "linkbutton" | "levelindicator" | "colorpicker" | "banner" | "menubutton" | "splitbutton" | "popover" | "expander" | "statuspage" | "toastoverlay" | "datepicker" | "table" | "treeview" | "fontpicker" | "video" | "trayitem" | "sharebutton" | "terminal" | "paned" | "commandpalette" | "avatar" | "badge" | "tag" | "kbd" | "combobox" | "breadcrumb" | "dialog" | "sheet" | "richtext" | "progresscircle" | "skeleton" | "chart" | "codeeditor";
@@ -992,6 +992,15 @@ export declare namespace JSX {
             onAudioStateChanged?: (e: {
                 data: unknown;
             }) => void;
+            onExtensionsList?: (e: {
+                data: unknown;
+            }) => void;
+            onExtensionActions?: (e: {
+                data: unknown;
+            }) => void;
+            onChromeDialog?: (e: {
+                data: unknown;
+            }) => void;
             onDragStarted?: (e: {
                 text: string;
             }) => void;
@@ -2118,6 +2127,8 @@ export declare namespace JSX {
             children?: ReactNode;
         };
         popover: {
+            anchor?: number;
+            anchorRef?: RefObject<NdNodeRef | null>;
             open?: boolean;
             position?: "top" | "bottom" | "left" | "right";
             enabled?: boolean;

package/dist/packages/react/src/generated/rpc.d.ts

@@ -14,7 +14,7 @@ export interface RowJson {
     id: string | null;
     subtitle: string | null;
 }
-/** One tree-snapshot node. itemCount is ListView's row count (M5c-D4), null for every widget that isn't data-driven; rows is SourceList's ordered row data, null for every widget that isn't row-driven. role/enabled/focused/value are the accessibility-tree fields (M16): role is the widget's schema-declared automation role (null when the type declares none); enabled/focused/value come from a live per-node backend probe and default to true/false/null on backends without the probe. */
+/** One tree-snapshot node. itemCount is ListView's row count (M5c-D4), null for every widget that isn't data-driven; rows is SourceList's ordered row data, null for every widget that isn't row-driven. role/enabled/focused/value are the accessibility-tree fields (M16): role is the widget's schema-declared automation role (null when the type declares none); enabled/focused/value come from a live per-node backend probe and default to true/false/null on backends without the probe. checked/selected/expanded/placeholder/label/options come from the same probe and are null on every node the field does not apply to (a Label has no checked state), so a locator can ask isChecked/isSelected/isExpanded of any node without first knowing its kind. */
 export interface JsonNode {
     ref: number;
     type: string;
@@ -29,6 +29,12 @@ export interface JsonNode {
     enabled: boolean;
     focused: boolean;
     value: unknown | null;
+    checked: boolean | null;
+    selected: boolean | null;
+    expanded: boolean | null;
+    placeholder: string | null;
+    label: string | null;
+    options: string[] | null;
 }
 export interface GetTreeResult {
     coordinateSpace: string;
@@ -82,7 +88,7 @@ export interface ResolveResult {
     refs: number[];
     count: number;
 }
-/** key/main/visible/title come from the live windowState probe on the Window node's handle; tabGroup is the create-time prop (null for plain windows). */
+/** key/main/visible/title come from the live windowState probe on the Window node's handle; tabGroup is the create-time prop (null for plain windows). geometry is the window's frame in the same logical, top-left-origin units node Geometry uses (w/h are width/height), null on a backend whose probe does not report it. */
 export interface WindowInfo {
     ref: number;
     title: string | null;
@@ -90,6 +96,7 @@ export interface WindowInfo {
     main: boolean;
     visible: boolean;
     tabGroup: string | null;
+    geometry: Geometry | null;
 }
 export interface WindowsResult {
     windows: WindowInfo[];
@@ -109,6 +116,14 @@ export interface DragResult {
 export interface KeysResult {
     dispatched: boolean;
 }
+export interface FocusResult {
+    ok: boolean;
+}
+/** scrolled is false when the target has no scrollable ancestor (nothing to do), which is a success, not an error. */
+export interface ScrollIntoViewResult {
+    ok: boolean;
+    scrolled: boolean;
+}
 /** Live page state read off the engine on the UI thread (WebKitGTK's uri/title/is-loading/can-go-back/can-go-forward, WKWebView's url/title/isLoading/canGoBack/canGoForward) — no page JavaScript, no app cooperation. url/title are null before the first commit. */
 export interface WebViewInfo {
     ref: number;
@@ -187,6 +202,33 @@ export interface HoverParams {
     testId?: string;
     window?: number;
 }
+/** Moves keyboard focus to the target, the same path the widget-level `focus` command takes (first responder on macOS, gtk_widget_grab_focus on GTK), so a following `keys`/`type` lands there. Target by exactly one of ref / testId. After it returns, waitFor {testId, state: "focused"} holds. */
+export interface FocusParams {
+    ref?: number;
+    testId?: string;
+    window?: number;
+}
+/** Scrolls the target's nearest scrollable ancestor until the target is inside the viewport, so an off-screen node becomes actionable. A target with no scrollable ancestor answers {ok: true, scrolled: false} rather than an error. Target by exactly one of ref / testId. */
+export interface ScrollIntoViewParams {
+    ref?: number;
+    testId?: string;
+    window?: number;
+}
+/** In-process render of ONE node's widget to a PNG, same result shape as screenshot. The image is the node's own surface, so its pixel dimensions come from the same handle Geometry measures rather than from the whole window at an unknown backing scale. `path` is an absolute path; absent, the host writes beside the automation socket and answers where. Target by exactly one of ref / testId. */
+export interface SnapshotNodeParams {
+    ref?: number;
+    testId?: string;
+    window?: number;
+    path?: string;
+}
+/** Moves and/or resizes a window; omitted components keep their current value. Coordinates are logical points with a top-left origin, matching WindowInfo.geometry. `window` names a Window node ref (default: the root window). Answers that window's updated WindowInfo. GTK sizes the window but cannot position it (client-side placement is not a Wayland capability), so x/y are ignored there. */
+export interface SetWindowFrameParams {
+    window?: number;
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
 /** Resolves a testID to the single ACTIONABLE instance. Candidates are ranked: actionable (the checkActionable predicate passes) before not; then key/front window before background. `refs` is every match in tree order, `ref` the winner (null when none is actionable and `actionable` is true). */
 export interface ResolveParams {
     testId: string;
@@ -276,6 +318,22 @@ export interface RpcMethods {
         params: HoverParams;
         result: ClickResult;
     };
+    focus: {
+        params: FocusParams;
+        result: FocusResult;
+    };
+    scrollIntoView: {
+        params: ScrollIntoViewParams;
+        result: ScrollIntoViewResult;
+    };
+    snapshotNode: {
+        params: SnapshotNodeParams;
+        result: ScreenshotResult;
+    };
+    setWindowFrame: {
+        params: SetWindowFrameParams;
+        result: WindowInfo;
+    };
     resolve: {
         params: ResolveParams;
         result: ResolveResult;

package/dist/packages/react/src/generated/schema-meta.d.ts

@@ -11,6 +11,11 @@ export interface WidgetEvent {
     payload: "none" | "text" | "checked" | "value" | "index" | "indexes" | "data" | "position" | "dragPoint";
 }
 export declare const widgetEvents: Record<string, WidgetEvent[]>;
+/** JSX ref-prop name -> the wire prop that carries the target's node id
+ *  (schema `refProp`). The reconciler reads `.current.id` off the ref and
+ *  sends the number, so an app never handles a node id itself; only the
+ *  widgets listed here have one. */
+export declare const widgetRefProps: Record<string, Record<string, string>>;
 export declare const handlerPropNames: Record<string, string[]>;
 /** Imperative commands each widget accepts via the widgetCommand NDP frame
  *  (M14) — the runtime validation table behind sendCommand(). */
@@ -24,7 +29,7 @@ export type WidgetCommandNames = {
     "checkbox": "focus";
     "radio": "focus";
     "select": "focus";
-    "webview": "goBack" | "goForward" | "reload" | "stop" | "executeJavaScript" | "setZoom" | "setUserAgent" | "openDevTools" | "addUserScript" | "removeUserScript" | "clearUserScripts" | "registerScriptMessage" | "unregisterScriptMessage" | "respondScheme" | "getCookies" | "setCookie" | "deleteCookie" | "findStart" | "findNext" | "findPrevious" | "findStop" | "saveSession" | "restoreSession" | "setMuted" | "setContextMenuItems" | "focus";
+    "webview": "goBack" | "goForward" | "reload" | "stop" | "executeJavaScript" | "setZoom" | "setUserAgent" | "openDevTools" | "addUserScript" | "removeUserScript" | "clearUserScripts" | "registerScriptMessage" | "unregisterScriptMessage" | "respondScheme" | "getCookies" | "setCookie" | "deleteCookie" | "findStart" | "findNext" | "findPrevious" | "findStop" | "saveSession" | "restoreSession" | "setMuted" | "setContextMenuItems" | "listExtensions" | "listExtensionActions" | "installExtension" | "uninstallExtension" | "setExtensionEnabled" | "focus";
     "searchinput": "focus";
     "switch": "focus";
     "numberinput": "focus";

package/dist/packages/react/src/index.d.ts

@@ -7,8 +7,8 @@ export type { SpacingScale } from "./metrics.ts";
 export { getAppDataDir, ensureAppDataDir } from "./paths.ts";
 export { defineNativeComponent } from "./native-component.ts";
 export type { NativeComponentOptions, NativeComponentProps, NativeComponentRef } from "./native-component.ts";
-export { executeJavaScript, onJavaScriptResult, getCookies, onCookiesResult, saveSession, onSessionSaved, setContextMenuItems, } from "./webview.ts";
-export type { Cookie, ContextMenuContext, ContextMenuItem, ContextMenuItemClick } from "./webview.ts";
+export { executeJavaScript, onJavaScriptResult, getCookies, onCookiesResult, saveSession, onSessionSaved, setContextMenuItems, listExtensions, onExtensionsList, listExtensionActions, onExtensionActions, installExtension, uninstallExtension, setExtensionEnabled, } from "./webview.ts";
+export type { Cookie, ContextMenuContext, ContextMenuItem, ContextMenuItemClick, ExtensionAction, InstalledExtension, } from "./webview.ts";
 export { showAlert, openFile, saveFile, showAbout, showTabOverview, onAlertResult, onOpenFileResult, onSaveFileResult, } from "./dialogs.ts";
 export type { DialogButton, ShowAlertOptions, AlertResult, OpenFileOptions as WindowOpenFileOptions, OpenFileResult as WindowOpenFileResult, SaveFileOptions as WindowSaveFileOptions, SaveFileResult as WindowSaveFileResult, ShowAboutOptions, } from "./dialogs.ts";
 export { showToast, dismissToast, onToastButtonClicked, onToastDismissed } from "./toast.ts";

package/dist/packages/react/src/webview.d.ts

@@ -22,6 +22,40 @@ export declare function saveSession(node: NdNodeRef<"webview">): Promise<string>
 export declare function onSessionSaved(e: {
     data: unknown;
 }): void;
+export interface InstalledExtension {
+    id: string;
+    name: string;
+    version: string;
+    enabled: boolean;
+    /** A `data:` URI, ready for an `<image>` src. Empty when the extension has no icon. */
+    iconUrl: string;
+    /** `chrome-extension://…` options page, or "" when the extension declares none. */
+    optionsUrl: string;
+}
+export declare function listExtensions(node: NdNodeRef<"webview">): Promise<InstalledExtension[]>;
+export declare function onExtensionsList(e: {
+    data: unknown;
+}): void;
+export declare function installExtension(node: NdNodeRef<"webview">, path: string): Promise<InstalledExtension[]>;
+export declare function uninstallExtension(node: NdNodeRef<"webview">, extensionId: string): Promise<InstalledExtension[]>;
+export declare function setExtensionEnabled(node: NdNodeRef<"webview">, extensionId: string, enabled: boolean): Promise<InstalledExtension[]>;
+export interface ExtensionAction {
+    id: string;
+    name: string;
+    enabled: boolean;
+    /** `action.default_title`, falling back to the extension's name. */
+    title: string;
+    /** `chrome-extension://…` icon from `action.default_icon`, or the registry icon. */
+    iconUrl: string;
+    /** `chrome-extension://…` popup page, or "" for an action that fires `onClicked`. */
+    popupUrl: string;
+    /** Always "": Chromium answers `chrome.action.getBadgeText` to the extension alone. */
+    badgeText: string;
+}
+export declare function listExtensionActions(node: NdNodeRef<"webview">): Promise<ExtensionAction[]>;
+export declare function onExtensionActions(e: {
+    data: unknown;
+}): void;
 export type ContextMenuContext = "all" | "page" | "link" | "image" | "selection" | "editable";
 export interface ContextMenuItem {
     id?: string;

package/dist/runtime/ndp.d.ts

@@ -2,6 +2,9 @@ import type { Runtime, Op, CommitBatch, EventMsg } from "../packages/react/src/g
 export declare class Ndp {
     private socket;
     private inbox;
+    private inboxView;
+    private inboxHead;
+    private inboxTail;
     private eventCb;
     private helloAckResolve;
     private outbox;
@@ -22,6 +25,8 @@ export declare class Ndp {
     get hostCommands(): Set<string> | null;
     static connect(): Promise<Ndp>;
     private pump;
+    private reserveInbox;
+    private compactInbox;
     private onData;
     private dispatch;
     private send;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nativedesktop/react",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "type": "module",
   "license": "MIT",
   "homepage": "https://github.com/FormalSnake/NativeDesktop#readme",