@runtypelabs/persona 3.0.0 → 3.1.0

package/src/runtime/host-layout.test.ts

@@ -193,4 +193,141 @@ describe("createWidgetHostLayout docked", () => {
 
     layout.destroy();
   });
+
+  const withInnerWidth = (width: number, fn: () => void): void => {
+    const prev = window.innerWidth;
+    try {
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        value: width,
+      });
+      fn();
+    } finally {
+      Object.defineProperty(window, "innerWidth", {
+        configurable: true,
+        value: prev,
+      });
+    }
+  };
+
+  it("uses fixed fullscreen dock slot on mobile viewport when open", () => {
+    withInnerWidth(500, () => {
+      const parent = document.createElement("div");
+      document.body.appendChild(parent);
+      const target = document.createElement("div");
+      parent.appendChild(target);
+
+      const layout = createWidgetHostLayout(target, {
+        launcher: {
+          mountMode: "docked",
+          autoExpand: false,
+          dock: { width: "320px" },
+        },
+      });
+
+      const dockSlot = layout.shell?.querySelector<HTMLElement>('[data-persona-dock-role="panel"]');
+      layout.syncWidgetState({ open: true, launcherEnabled: true });
+      expect(dockSlot?.style.position).toBe("fixed");
+      expect(dockSlot?.style.zIndex).toBe("9999");
+      expect(layout.shell?.dataset.personaDockMobileFullscreen).toBe("true");
+
+      layout.destroy();
+    });
+  });
+
+  it("does not use fixed fullscreen above mobile breakpoint", () => {
+    withInnerWidth(800, () => {
+      const parent = document.createElement("div");
+      document.body.appendChild(parent);
+      const target = document.createElement("div");
+      parent.appendChild(target);
+
+      const layout = createWidgetHostLayout(target, {
+        launcher: {
+          mountMode: "docked",
+          autoExpand: false,
+          dock: { width: "320px", reveal: "overlay" },
+        },
+      });
+
+      const dockSlot = layout.shell?.querySelector<HTMLElement>('[data-persona-dock-role="panel"]');
+      layout.syncWidgetState({ open: true, launcherEnabled: true });
+      expect(dockSlot?.style.position).toBe("absolute");
+      expect(layout.shell?.dataset.personaDockMobileFullscreen).toBeUndefined();
+
+      layout.destroy();
+    });
+  });
+
+  it("respects mobileFullscreen: false on narrow viewport", () => {
+    withInnerWidth(500, () => {
+      const parent = document.createElement("div");
+      document.body.appendChild(parent);
+      const target = document.createElement("div");
+      parent.appendChild(target);
+
+      const layout = createWidgetHostLayout(target, {
+        launcher: {
+          mountMode: "docked",
+          autoExpand: false,
+          mobileFullscreen: false,
+          dock: { width: "320px" },
+        },
+      });
+
+      const dockSlot = layout.shell?.querySelector<HTMLElement>('[data-persona-dock-role="panel"]');
+      layout.syncWidgetState({ open: true, launcherEnabled: true });
+      expect(dockSlot?.style.position).toBe("relative");
+      expect(layout.shell?.dataset.personaDockMobileFullscreen).toBeUndefined();
+
+      layout.destroy();
+    });
+  });
+
+  it("respects custom mobileBreakpoint", () => {
+    withInnerWidth(900, () => {
+      const parent = document.createElement("div");
+      document.body.appendChild(parent);
+      const target = document.createElement("div");
+      parent.appendChild(target);
+
+      const layout = createWidgetHostLayout(target, {
+        launcher: {
+          mountMode: "docked",
+          autoExpand: false,
+          mobileBreakpoint: 1024,
+          dock: { width: "320px" },
+        },
+      });
+
+      const dockSlot = layout.shell?.querySelector<HTMLElement>('[data-persona-dock-role="panel"]');
+      layout.syncWidgetState({ open: true, launcherEnabled: true });
+      expect(dockSlot?.style.position).toBe("fixed");
+
+      layout.destroy();
+    });
+  });
+
+  it("does not use fixed fullscreen when panel is closed on mobile", () => {
+    withInnerWidth(500, () => {
+      const parent = document.createElement("div");
+      document.body.appendChild(parent);
+      const target = document.createElement("div");
+      parent.appendChild(target);
+
+      const layout = createWidgetHostLayout(target, {
+        launcher: {
+          mountMode: "docked",
+          autoExpand: false,
+          dock: { width: "320px" },
+        },
+      });
+
+      const dockSlot = layout.shell?.querySelector<HTMLElement>('[data-persona-dock-role="panel"]');
+      layout.syncWidgetState({ open: false, launcherEnabled: true });
+      expect(dockSlot?.style.position).toBe("relative");
+
+      layout.destroy();
+    });
+  });
 });

package/src/runtime/host-layout.ts

@@ -46,6 +46,16 @@ const clearOverlayDockSlotStyles = (dockSlot: HTMLElement): void => {
   dockSlot.style.pointerEvents = "";
 };
 
+/** Clears viewport-escape fullscreen styles so reveal modes can re-apply dock layout. */
+const clearMobileFullscreenDockSlotStyles = (dockSlot: HTMLElement): void => {
+  dockSlot.style.inset = "";
+  dockSlot.style.width = "";
+  dockSlot.style.height = "";
+  dockSlot.style.maxWidth = "";
+  dockSlot.style.minWidth = "";
+  clearOverlayDockSlotStyles(dockSlot);
+};
+
 const clearResizeDockSlotTransition = (dockSlot: HTMLElement): void => {
   dockSlot.style.transition = "";
 };
@@ -153,6 +163,70 @@ const applyDockStyles = (
   host.style.flexDirection = "column";
   host.style.flex = "1 1 auto";
 
+  const ownerWindow = shell.ownerDocument.defaultView;
+  const mobileFullscreenEnabled = config?.launcher?.mobileFullscreen ?? true;
+  const mobileBreakpoint = config?.launcher?.mobileBreakpoint ?? 640;
+  const isMobileViewport =
+    ownerWindow != null ? ownerWindow.innerWidth <= mobileBreakpoint : false;
+  const useMobileFullscreen = mobileFullscreenEnabled && isMobileViewport && expanded;
+
+  if (useMobileFullscreen) {
+    shell.dataset.personaDockMobileFullscreen = "true";
+    shell.removeAttribute("data-persona-dock-reveal");
+    clearPushTrackStyles(pushTrack);
+    clearResizeDockSlotTransition(dockSlot);
+    clearMobileFullscreenDockSlotStyles(dockSlot);
+    resetContentSlotFlexSizing(contentSlot);
+    clearEmergeDockStyles(host, dockSlot);
+
+    shell.style.display = "flex";
+    shell.style.flexDirection = "column";
+    shell.style.alignItems = "stretch";
+    shell.style.overflow = "hidden";
+
+    contentSlot.style.flex = "1 1 auto";
+    contentSlot.style.width = "100%";
+    contentSlot.style.minWidth = "0";
+
+    dockSlot.style.display = "flex";
+    dockSlot.style.flexDirection = "column";
+    dockSlot.style.position = "fixed";
+    dockSlot.style.inset = "0";
+    dockSlot.style.width = "100%";
+    dockSlot.style.height = "100%";
+    dockSlot.style.maxWidth = "100%";
+    dockSlot.style.minWidth = "0";
+    dockSlot.style.minHeight = "0";
+    dockSlot.style.overflow = "hidden";
+    dockSlot.style.zIndex = "9999";
+    dockSlot.style.transform = "none";
+    dockSlot.style.transition = "none";
+    dockSlot.style.pointerEvents = "auto";
+    dockSlot.style.flex = "none";
+
+    if (usePush) {
+      pushTrack.style.display = "flex";
+      pushTrack.style.flexDirection = "column";
+      pushTrack.style.width = "100%";
+      pushTrack.style.height = "100%";
+      pushTrack.style.minHeight = "0";
+      pushTrack.style.minWidth = "0";
+      pushTrack.style.flex = "1 1 auto";
+      pushTrack.style.alignItems = "stretch";
+      pushTrack.style.transform = "none";
+      pushTrack.style.transition = "none";
+      contentSlot.style.flex = "1 1 auto";
+      contentSlot.style.width = "100%";
+      contentSlot.style.maxWidth = "100%";
+      contentSlot.style.minWidth = "0";
+    }
+
+    return;
+  }
+
+  shell.removeAttribute("data-persona-dock-mobile-fullscreen");
+  clearMobileFullscreenDockSlotStyles(dockSlot);
+
   if (dock.reveal === "overlay") {
     shell.style.display = "flex";
     shell.style.flexDirection = "row";
@@ -359,6 +433,12 @@ const createDockedLayout = (target: HTMLElement, config?: AgentWidgetConfig): Wi
     syncPushResizeObserver();
   };
 
+  const ownerWindow = shell.ownerDocument.defaultView;
+  const onViewportResize = (): void => {
+    layout();
+  };
+  ownerWindow?.addEventListener("resize", onViewportResize);
+
   if (resolveDockConfig(config).reveal === "push") {
     pushTrack.appendChild(contentSlot);
     pushTrack.appendChild(dockSlot);
@@ -388,6 +468,7 @@ const createDockedLayout = (target: HTMLElement, config?: AgentWidgetConfig): Wi
       layout();
     },
     destroy() {
+      ownerWindow?.removeEventListener("resize", onViewportResize);
       disconnectResizeObserver();
       if (originalParent.isConnected) {
         if (originalNextSibling && originalNextSibling.parentNode === originalParent) {

package/src/runtime/init.test.ts

@@ -301,6 +301,41 @@ describe("initAgentWidget docked mode", () => {
     });
 
     expect(handle.host.shadowRoot).not.toBeNull();
-    expect(handle.host.shadowRoot?.querySelector("#persona-root")).not.toBeNull();
+    expect(handle.host.shadowRoot?.querySelector("[data-persona-root]")).not.toBeNull();
+  });
+
+  it("mounts two widgets with independent roots in light DOM", async () => {
+    const { initAgentWidget } = await import("./init");
+    document.body.innerHTML = `
+      <div id="widget-a"></div>
+      <div id="widget-b"></div>
+    `;
+
+    const handleA = initAgentWidget({
+      target: "#widget-a",
+      config: {
+        launcher: { enabled: false },
+      },
+    });
+
+    const handleB = initAgentWidget({
+      target: "#widget-b",
+      config: {
+        launcher: { enabled: false },
+      },
+    });
+
+    const roots = document.querySelectorAll("[data-persona-root]");
+    expect(roots.length).toBe(2);
+
+    // Each root should be inside its respective target
+    const rootA = document.querySelector("#widget-a [data-persona-root]");
+    const rootB = document.querySelector("#widget-b [data-persona-root]");
+    expect(rootA).not.toBeNull();
+    expect(rootB).not.toBeNull();
+    expect(rootA).not.toBe(rootB);
+
+    handleA.destroy();
+    handleB.destroy();
   });
 });

package/src/runtime/init.ts

@@ -103,7 +103,7 @@ export const initAgentWidget = (
     const launcherEnabled = nextConfig?.launcher?.enabled ?? true;
     const shouldFillHost = !launcherEnabled || isDockedMountMode(nextConfig);
     const mount = ownerDocument.createElement("div");
-    mount.id = "persona-root";
+    mount.setAttribute("data-persona-root", "true");
 
     if (shouldFillHost) {
       mount.style.height = "100%";