@usereq/widget 0.2.12 → 0.2.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usereq/widget",
-  "version": "0.2.12",
+  "version": "0.2.13",
   "type": "module",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/custom-element/agent-widget-element.tsx

@@ -47,15 +47,6 @@ export class AgentWidgetElement extends HTMLElement {
   private hostStyleElement: HTMLStyleElement;
   private shadowStyleElement: HTMLStyleElement;
   private mountElement: HTMLDivElement;
-  /**
-   * Dedicated container the fullscreen (mobile) chat panel portals into. It
-   * lives INSIDE the shadow root (so our styles apply) and is `fixed; inset:0`
-   * so the panel's `absolute inset-0` fills the viewport. Passing the raw
-   * shadow root instead would (a) be rejected as a non-Element portal target
-   * and (b) fall back to `document.body`, where our shadow-scoped CSS doesn't
-   * reach — which left the panel invisible on real sites.
-   */
-  private portalElement: HTMLDivElement;
   private root: Root;
   private agentId = "";
   private mode: "embed" | "preview" = "embed";
@@ -102,17 +93,10 @@ export class AgentWidgetElement extends HTMLElement {
     this.mountElement.style.display = "block";
     this.mountElement.style.width = "100%";
     this.mountElement.style.height = "100%";
-    // Fullscreen portal target — viewport-sized + in the shadow root. Empty and
-    // click-through until the mobile panel mounts into it (the panel/overlay
-    // re-enable their own pointer events).
-    this.portalElement = document.createElement("div");
-    this.portalElement.style.cssText =
-      "position:fixed;inset:0;pointer-events:none;z-index:2147483647;";
     this.shadowRootRef.append(
       this.hostStyleElement,
       this.shadowStyleElement,
       this.mountElement,
-      this.portalElement,
     );
     this.root = createRoot(this.mountElement);
   }
@@ -298,7 +282,12 @@ export class AgentWidgetElement extends HTMLElement {
         onSendMessage: (content: string) => void this.sendMessage(content),
         onConfirmationDecision: (confirmationId: string, accepted: boolean) =>
           void this.handleConfirmationDecision(confirmationId, accepted),
-        portalContainer: this.portalElement,
+        // Portal directly into the shadow root — matches the legacy
+        // `agents-monorepo` widget exactly. ShadowRoot is a DocumentFragment,
+        // which Radix Dialog accepts as `container`. The earlier `portalElement`
+        // wrapper added a `pointer-events: none` ancestor that interfered with
+        // the Dialog overlay/content's own event handling.
+        portalContainer: this.shadowRootRef,
       }),
     );
   }

package/src/renderer/widget-runtime.tsx

@@ -178,7 +178,14 @@ export function WidgetRuntime({
   }
 
   const shellStyle = getWidgetShellStyle(mode, placement);
-  const portalEl = isHtmlElement(portalContainer) ? portalContainer : null;
+  // Accept both HTMLElement (e.g. playground stage div) and DocumentFragment
+  // (e.g. the widget custom element's ShadowRoot). Radix Dialog handles both
+  // as portal containers.
+  const portalEl: HTMLElement | DocumentFragment | null =
+    portalContainer instanceof HTMLElement ||
+    portalContainer instanceof DocumentFragment
+      ? portalContainer
+      : null;
 
   return (
     <>