Fix embedded fullscreen expand

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 dist/
 .history/
 docs/plans/
+.env

docs-site/public/examples/vllm/deployment.html

@@ -849,6 +849,7 @@
       }
       const expandIcon = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="9,1 13,1 13,5"/><polyline points="5,13 1,13 1,9"/><line x1="13" y1="1" x2="8" y2="6"/><line x1="1" y1="13" x2="6" y2="8"/></svg>`;
       const collapseIcon = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="1,5 1,1 5,1"/><polyline points="9,13 13,13 13,9"/><line x1="1" y1="1" x2="6" y2="6"/><line x1="13" y1="13" x2="8" y2="8"/></svg>`;
+      const fullscreenTarget = this.getStoryShell() ?? this.canvasWrap ?? this.doc.documentElement;
       const syncIcon = () => {
         const isFs = !!this.doc.fullscreenElement;
         btn.innerHTML = isFs ? collapseIcon : expandIcon;
@@ -861,12 +862,15 @@
       btn.style.justifyContent = "center";
       btn.addEventListener("click", () => {
         if (this.doc.fullscreenElement) {
-          this.doc.exitFullscreen();
+          void this.doc.exitFullscreen();
         } else {
-          this.doc.documentElement.requestFullscreen();
+          void fullscreenTarget.requestFullscreen?.();
         }
       });
-      this.doc.addEventListener("fullscreenchange", syncIcon);
+      this.doc.addEventListener("fullscreenchange", () => {
+        syncIcon();
+        this.onResize?.();
+      });
     }
     destroy() {
       if (this.onResize) window.removeEventListener("resize", this.onResize);

examples/vLLM/deployment.html

@@ -849,6 +849,7 @@
       }
       const expandIcon = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="9,1 13,1 13,5"/><polyline points="5,13 1,13 1,9"/><line x1="13" y1="1" x2="8" y2="6"/><line x1="1" y1="13" x2="6" y2="8"/></svg>`;
       const collapseIcon = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="1,5 1,1 5,1"/><polyline points="9,13 13,13 13,9"/><line x1="1" y1="1" x2="6" y2="6"/><line x1="13" y1="13" x2="8" y2="8"/></svg>`;
+      const fullscreenTarget = this.getStoryShell() ?? this.canvasWrap ?? this.doc.documentElement;
       const syncIcon = () => {
         const isFs = !!this.doc.fullscreenElement;
         btn.innerHTML = isFs ? collapseIcon : expandIcon;
@@ -861,12 +862,15 @@
       btn.style.justifyContent = "center";
       btn.addEventListener("click", () => {
         if (this.doc.fullscreenElement) {
-          this.doc.exitFullscreen();
+          void this.doc.exitFullscreen();
         } else {
-          this.doc.documentElement.requestFullscreen();
+          void fullscreenTarget.requestFullscreen?.();
         }
       });
-      this.doc.addEventListener("fullscreenchange", syncIcon);
+      this.doc.addEventListener("fullscreenchange", () => {
+        syncIcon();
+        this.onResize?.();
+      });
     }
     destroy() {
       if (this.onResize) window.removeEventListener("resize", this.onResize);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@biolytics.ai/diascope",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Turn D2 diagrams into narrated interactive stories",
   "homepage": "https://diascope.biolytics.ai",
   "repository": {

src/viewer/viewer.ts

@@ -364,6 +364,10 @@ export class DiaScopeViewer {
     }
     const expandIcon = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="9,1 13,1 13,5"/><polyline points="5,13 1,13 1,9"/><line x1="13" y1="1" x2="8" y2="6"/><line x1="1" y1="13" x2="6" y2="8"/></svg>`;
     const collapseIcon = `<svg width="14" height="14" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"><polyline points="1,5 1,1 5,1"/><polyline points="9,13 13,13 13,9"/><line x1="1" y1="1" x2="6" y2="6"/><line x1="13" y1="13" x2="8" y2="8"/></svg>`;
+    const fullscreenTarget =
+      (this.getStoryShell() ?? this.canvasWrap ?? this.doc.documentElement) as (Element & {
+        requestFullscreen?: () => Promise<void>;
+      });
     const syncIcon = () => {
       const isFs = !!this.doc.fullscreenElement;
       btn!.innerHTML = isFs ? collapseIcon : expandIcon;
@@ -376,12 +380,15 @@ export class DiaScopeViewer {
     btn.style.justifyContent = "center";
     btn.addEventListener("click", () => {
       if (this.doc.fullscreenElement) {
-        this.doc.exitFullscreen();
+        void this.doc.exitFullscreen();
       } else {
-        this.doc.documentElement.requestFullscreen();
+        void fullscreenTarget.requestFullscreen?.();
       }
     });
-    this.doc.addEventListener("fullscreenchange", syncIcon);
+    this.doc.addEventListener("fullscreenchange", () => {
+      syncIcon();
+      this.onResize?.();
+    });
   }
 
   destroy(): void {

tests/viewer.test.ts

@@ -0,0 +1,120 @@
+import { describe, expect, it, vi } from "vitest";
+import { DiaScopeViewer } from "../src/viewer/viewer.js";
+
+class FakeElement {
+  readonly style: Record<string, string> = {};
+  readonly children: FakeElement[] = [];
+  readonly listeners = new Map<string, Array<() => void>>();
+  readonly attributes = new Map<string, string>();
+  innerHTML = "";
+  title = "";
+  id = "";
+  requestFullscreen = vi.fn(() => Promise.resolve());
+
+  constructor(private readonly doc: FakeDocument, id = "") {
+    this.id = id;
+    if (id) this.attributes.set("id", id);
+  }
+
+  setAttribute(name: string, value: string): void {
+    this.attributes.set(name, value);
+    if (name === "id") {
+      this.id = value;
+      this.doc.register(this);
+    }
+  }
+
+  getAttribute(name: string): string | null {
+    return this.attributes.get(name) ?? null;
+  }
+
+  appendChild(child: FakeElement): void {
+    this.children.push(child);
+    if (child.id) this.doc.register(child);
+  }
+
+  addEventListener(type: string, listener: () => void): void {
+    const current = this.listeners.get(type) ?? [];
+    current.push(listener);
+    this.listeners.set(type, current);
+  }
+
+  click(): void {
+    for (const listener of this.listeners.get("click") ?? []) listener();
+  }
+}
+
+class FakeDocument {
+  readonly elements = new Map<string, FakeElement>();
+  readonly listeners = new Map<string, Array<() => void>>();
+  readonly documentElement = new FakeElement(this, "document-element");
+  fullscreenElement: FakeElement | null = null;
+  exitFullscreen = vi.fn(() => {
+    this.fullscreenElement = null;
+    this.dispatch("fullscreenchange");
+    return Promise.resolve();
+  });
+
+  register(element: FakeElement): FakeElement {
+    if (element.id) this.elements.set(element.id, element);
+    return element;
+  }
+
+  createElement(): FakeElement {
+    return new FakeElement(this);
+  }
+
+  getElementById(id: string): FakeElement | null {
+    return this.elements.get(id) ?? null;
+  }
+
+  querySelector(selector: string): FakeElement | null {
+    if (!selector.startsWith("#")) return null;
+    return this.getElementById(selector.slice(1));
+  }
+
+  addEventListener(type: string, listener: () => void): void {
+    const current = this.listeners.get(type) ?? [];
+    current.push(listener);
+    this.listeners.set(type, current);
+  }
+
+  dispatch(type: string): void {
+    for (const listener of this.listeners.get(type) ?? []) listener();
+  }
+}
+
+describe("DiaScopeViewer expand button", () => {
+  it("fullscreens the viewer shell instead of the whole document when embedded", () => {
+    const doc = new FakeDocument();
+    const canvasWrap = doc.register(new FakeElement(doc, "canvas-wrap"));
+    const storyShell = doc.register(new FakeElement(doc, "story-shell"));
+    const resizeSpy = vi.fn();
+
+    storyShell.requestFullscreen.mockImplementation(() => {
+      doc.fullscreenElement = storyShell;
+      doc.dispatch("fullscreenchange");
+      return Promise.resolve();
+    });
+
+    doc.documentElement.requestFullscreen.mockImplementation(() => {
+      doc.fullscreenElement = doc.documentElement;
+      doc.dispatch("fullscreenchange");
+      return Promise.resolve();
+    });
+
+    const viewer = new DiaScopeViewer({
+      document: doc as unknown as Document,
+      svgPanZoom: (() => null) as never,
+    });
+    viewer.canvasWrap = canvasWrap as unknown as HTMLElement;
+    viewer.onResize = resizeSpy;
+
+    viewer.setupExpandButton();
+    doc.getElementById("btn-expand")?.click();
+
+    expect(storyShell.requestFullscreen).toHaveBeenCalledTimes(1);
+    expect(doc.documentElement.requestFullscreen).not.toHaveBeenCalled();
+    expect(resizeSpy).toHaveBeenCalledTimes(1);
+  });
+});