IFrame panels

Pass a URL as the first argument to panel.open() and the body becomes an <iframe> loaded from that URL. All standard panel features (drag, resize, minimize, close) work normally. Use handle.navigate(url) to change the URL after opening and handle.reload() to refresh it.

import panel from "../index.js";

// ── basic ─────────────────────────────────────────────────────────────────────
const handle = panel.open("/index.html", "Demo Site", {
  width: 600, height: 420
});

// ── sandboxed (restrict iframe permissions) ───────────────────────────────────
panel.open("/index.html", "Sandboxed", {
  width: 600, height: 420,
  sandbox: "allow-scripts allow-same-origin"
});

// ── navigate & reload ──────────────────────────────────────────────────────────
const nav = panel.open("/index.html", "Navigator", { width: 600, height: 420 });

nav.addEventListener("panelnavigate", e => console.log("navigating to", e.detail.url));
nav.addEventListener("panelload",     e => console.log("loaded",         e.detail.url));

nav.navigate("/demos/index.html");   // panelnavigate fires first, then panelload
nav.reload();                        // same as re-assigning src — cross-origin safe

// ── declarative HTML ──────────────────────────────────────────────────────────
// <button paneltarget="my-frame" paneltargetaction="toggle">Toggle</button>
// <section id="my-frame" panel
//          panel-title="IFrame Demo"
//          panel-url="/index.html"
//          panel-sandbox="allow-scripts allow-same-origin"
//          panel-draggable panel-resizable panel-closable panel-titled panel-escapable>
// </section>