@botiverse/porthole 0.1.0 → 0.1.1

package/src/host/outcome.ts

@@ -0,0 +1,159 @@
+import { FRAME_STATUS_METHOD, type FrameSource } from "../isolation/types.ts";
+import type { Surface } from "../platform/types.ts";
+import type { FrameBlock, FrameOutcome } from "./types.ts";
+
+/**
+ * How a display's first document went (P040). A frame's content is another origin's, so the host
+ * can't look inside; it goes by what it can see:
+ *
+ * - a shell or view that speaks for itself is loaded when it finishes its handshake;
+ * - a page of Porthole's `/server` says how it went (`porthole/notifications/frame-status`): it is
+ *   entering an app, or blocked (its ticket used, no cookie kept in a frame, the app down); a url
+ *   app is loaded when its document loads after the entry page;
+ * - a load from which nothing ever spoke, where something should have, is a page that never ran:
+ *   framing refused;
+ * - an app from a host's own gateway is loaded on its first load, unless its page says it is
+ *   blocked (the gateway may send the same message);
+ * - nothing settled in `timeoutMs`: a timeout.
+ */
+
+/** How long after a load the frame's word may still arrive. */
+const SETTLE_MS = 400;
+
+const BLOCKS: readonly FrameBlock[] = [
+  "framing",
+  "cookies",
+  "session",
+  "upstream",
+  "not-found",
+  "error",
+];
+
+interface FrameStatus {
+  readonly state: "entering" | "blocked";
+  readonly reason?: FrameBlock;
+  readonly status?: number;
+}
+
+/** A frame-status message, or null for anything else. */
+export function parseFrameStatus(data: unknown): FrameStatus | null {
+  if (data === null || typeof data !== "object") {
+    return null;
+  }
+  const message = data as { jsonrpc?: unknown; method?: unknown; params?: unknown };
+  if (message.jsonrpc !== "2.0" || message.method !== FRAME_STATUS_METHOD) {
+    return null;
+  }
+  const params = message.params as { state?: unknown; reason?: unknown; status?: unknown } | null;
+  if (params === null || typeof params !== "object") {
+    return null;
+  }
+  if (params.state === "entering") {
+    return { state: "entering" };
+  }
+  if (params.state !== "blocked") {
+    return null;
+  }
+  const reason = BLOCKS.includes(params.reason as FrameBlock)
+    ? (params.reason as FrameBlock)
+    : "error";
+  return {
+    state: "blocked",
+    reason,
+    ...(typeof params.status === "number" && Number.isInteger(params.status)
+      ? { status: params.status }
+      : {}),
+  };
+}
+
+export interface OutcomeWatch {
+  /** The frame finished its handshake. */
+  initialized(): void;
+  stop(): void;
+}
+
+export function watchOutcome(options: {
+  readonly surface: Surface;
+  readonly source: FrameSource;
+  /** Whether the frame speaks for itself (a shell or a view): then its handshake is the proof. */
+  readonly speaks: boolean;
+  readonly timeoutMs: number;
+  readonly onOutcome: (outcome: FrameOutcome) => void;
+}): OutcomeWatch {
+  const { surface, source, speaks } = options;
+  const reports = source.kind === "url" && source.reports === true;
+  let decided = false;
+  let heard = false;
+  let entering = false;
+  let loads = 0;
+  const timers = new Set<ReturnType<typeof setTimeout>>();
+  const later = (ms: number, run: () => void) => {
+    const timer = setTimeout(() => {
+      timers.delete(timer);
+      run();
+    }, ms);
+    timers.add(timer);
+  };
+  const stop = () => {
+    for (const timer of timers) {
+      clearTimeout(timer);
+    }
+    timers.clear();
+    unlisten();
+    unload();
+  };
+  const decide = (outcome: FrameOutcome) => {
+    if (!decided) {
+      decided = true;
+      stop();
+      options.onOutcome(outcome);
+    }
+  };
+  const unlisten = surface.transport.listen((data) => {
+    heard = true;
+    const status = parseFrameStatus(data);
+    if (status?.state === "entering") {
+      entering = true;
+    } else if (status?.state === "blocked") {
+      decide({
+        state: "blocked",
+        reason: status.reason ?? "error",
+        ...(status.status === undefined ? {} : { status: status.status }),
+      });
+    }
+  });
+  const neverRan = () =>
+    later(SETTLE_MS, () => {
+      if (!heard) {
+        decide({ state: "blocked", reason: "framing" });
+      }
+    });
+  const unload = surface.onLoad(() => {
+    loads += 1;
+    if (decided) {
+      return;
+    }
+    if (speaks) {
+      // A served shell or view says something before its first load ends; one that never did
+      // never ran. (An opaque srcdoc frame always runs: its handshake decides.)
+      if (source.kind === "url") {
+        neverRan();
+      }
+      return;
+    }
+    if (!reports) {
+      later(SETTLE_MS, () => decide({ state: "loaded" }));
+      return;
+    }
+    if (entering && loads >= 2) {
+      decide({ state: "loaded" });
+    } else if (!entering) {
+      neverRan();
+    }
+  });
+  later(options.timeoutMs, () => decide({ state: "timeout" }));
+  return {
+    initialized: () => decide({ state: "loaded" }),
+    stop,
+  };
+}

package/src/host/types.ts

@@ -52,9 +52,35 @@ export interface MountOptions {
 }
 
 /** What a display reports, by event name. */
+/** Why a display's frame showed nothing of its content (`FrameOutcome`). */
+export type FrameBlock =
+  /** The page that frames it isn't one its server allows (frame-ancestors), or it never ran. */
+  | "framing"
+  /** The browser keeps no cookie for it inside a frame (WebKit, P025): open it on a tab. */
+  | "cookies"
+  /** Its ticket was used or its session ended. */
+  | "session"
+  /** Its app didn't answer. */
+  | "upstream"
+  | "not-found"
+  | "error";
+
+/**
+ * How a display's first document went, once per run: it loaded (a shell or view finished its
+ * handshake; a url-mode app's document loaded), it was blocked (and why), or nothing settled in
+ * `limits.loadTimeoutMs`. A host shows its own fallback ("Open in a new tab") on anything but
+ * loaded.
+ */
+export type FrameOutcome =
+  | { readonly state: "loaded" }
+  | { readonly state: "blocked"; readonly reason: FrameBlock; readonly status?: number }
+  | { readonly state: "timeout" };
+
 export interface DisplayEvents {
-  /** The frame finished its handshake. */
+  /** The frame finished its handshake (url mode, which has none: its first document loaded). */
   readonly initialized: undefined;
+  /** How the frame's first document went (`FrameOutcome`). */
+  readonly outcome: FrameOutcome;
   /** The content's size, after the config's limits. */
   readonly resize: { readonly height: number; readonly width?: number };
   /** What the content threw, or what the sandbox blocked (its own words: untrusted). */
@@ -69,8 +95,13 @@ export interface DisplayEvents {
 
 export interface DisplayControls {
   readonly displayId: string;
-  /** The theme flipped: the frame is re-themed in place, without a reload. */
+  /**
+   * The theme flipped: the frame is re-themed in place, without a reload. The host's values are
+   * read two animation frames later, once a host that restyles its page asynchronously has.
+   */
   setTheme(scheme: ColorScheme): void;
+  /** The host's theme values changed (same scheme): read them now and re-theme the frame. */
+  refreshTheme(): void;
   on<E extends keyof DisplayEvents>(
     event: E,
     listener: (detail: DisplayEvents[E]) => void,

package/src/index.ts

@@ -31,7 +31,15 @@ export type {
   ThemeConfig,
   ThemeValue,
 } from "./config/schema.ts";
-export { BUILT_IN_TOPICS, ConfigError, isOriginSource, validateConfig } from "./config/validate.ts";
+export {
+  BUILT_IN_TOPICS,
+  ConfigError,
+  isOriginSource,
+  originSourceProblem,
+  validateConfig,
+} from "./config/validate.ts";
+export { URL_SANDBOX_EXTRAS, type UrlSandboxExtra } from "./config/schema.ts";
+export { hostOriginProblem, isHostOrigin } from "./isolation/served.ts";
 
 // Presets.
 export {
@@ -103,7 +111,9 @@ export type {
   CapabilityHandler,
   CapabilityHandlers,
   Confirm,
+  ConfirmAnswer,
   ConfirmRequest,
+  Proceed,
   HostFunctionBridge,
   Refusal,
 } from "./bridge/types.ts";

package/src/isolation/served.ts

@@ -32,6 +32,30 @@ export function isExactOrigin(origin: unknown): origin is string {
   return typeof origin === "string" && parseOrigin(origin) !== null;
 }
 
+/**
+ * A host page's origin, exactly as `location.origin` and a message's `event.origin` give it:
+ * `scheme://host[:port]`, lowercase, any scheme (an Electron or Tauri app's own registered scheme,
+ * `ferry://app`, `app://local`), never `"null"` (an opaque origin isn't one origin: every opaque
+ * page says "null") and never a path. The shell takes messages only from these, exactly.
+ */
+const HOST_ORIGIN =
+  /^[a-z][a-z0-9+.-]*:\/\/([a-z0-9]([a-z0-9-]*[a-z0-9])?(\.[a-z0-9]([a-z0-9-]*[a-z0-9])?)*|\[[0-9a-f:.]+\])(:\d{1,5})?$/u;
+
+export function isHostOrigin(origin: unknown): origin is string {
+  return typeof origin === "string" && origin.length <= 300 && HOST_ORIGIN.test(origin);
+}
+
+/** Why `origin` can't be a host origin, in words a host's developer can act on; null if it can. */
+export function hostOriginProblem(origin: unknown): string | null {
+  if (isHostOrigin(origin)) {
+    return null;
+  }
+  if (origin === "null") {
+    return 'the host page\'s origin is opaque ("null"): serve it from a real origin (an Electron custom protocol must be registered as standard, and file: pages have none)';
+  }
+  return `${JSON.stringify(origin)} is not an exact origin (scheme://host[:port], lowercase, no path)`;
+}
+
 /**
  * Whether two hosts may be the same site. Without the public-suffix list this errs one way only:
  * it says "same site" whenever the hosts are equal or share their last two labels, so a pair it

package/src/isolation/types.ts

@@ -57,8 +57,17 @@ export interface FrameLocation {
   readonly url: string;
   /** Its origin: the host takes messages only from this origin, from this frame. */
   readonly origin: string;
+  /**
+   * Whether the pages there report how loading went (`porthole/notifications/frame-status`):
+   * Porthole's `/server` does, so a page that never ran (refused framing) can be told apart from
+   * one that loaded. A host's own gateway may send the same message without this.
+   */
+  readonly reports?: boolean;
 }
 
+/** The message a served page sends its host about loading (own-prefixed, P040). */
+export const FRAME_STATUS_METHOD = "porthole/notifications/frame-status";
+
 /**
  * Turns an instance into the URL its frame loads. Implemented by the host, usually by asking its
  * own backend (which authenticates the viewer and calls `PortholeServer.issue`). Called on every
@@ -74,4 +83,9 @@ export interface InstanceLocator {
  */
 export type FrameSource =
   | { readonly kind: "srcdoc"; readonly html: string }
-  | { readonly kind: "url"; readonly url: string; readonly origin: string };
+  | {
+      readonly kind: "url";
+      readonly url: string;
+      readonly origin: string;
+      readonly reports?: boolean;
+    };

package/src/platform/types.ts

@@ -17,6 +17,11 @@ export interface SurfaceSpec {
   readonly allow: string;
   readonly referrerPolicy: "no-referrer";
   readonly colorScheme: ColorScheme;
+  /**
+   * Fill the container's height (a url-mode app, which reports no size), at least
+   * `initialHeightPx`, instead of taking the content's.
+   */
+  readonly fill?: boolean;
   /** The height to start at (a remembered height, so a frame mounting again doesn't jump). */
   readonly initialHeightPx: number;
 }
@@ -38,6 +43,8 @@ export interface Surface {
    * framework starts it again from its content and reports it.
    */
   onNavigated(listener: () => void): () => void;
+  /** Every load of the frame's document, the first included. */
+  onLoad(listener: () => void): () => void;
   destroy(): void;
 }
 

package/src/platform/web.ts

@@ -26,7 +26,9 @@ export const webPlatform: PlatformHost = {
       border: "0",
       background: "transparent",
       colorScheme: spec.colorScheme,
-      height: `${Math.max(0, Math.round(spec.initialHeightPx))}px`,
+      ...(spec.fill === true
+        ? { height: "100%", minHeight: `${Math.max(0, Math.round(spec.initialHeightPx))}px` }
+        : { height: `${Math.max(0, Math.round(spec.initialHeightPx))}px` }),
     });
     const origin = spec.source.kind === "srcdoc" ? "null" : spec.source.origin;
     if (spec.source.kind === "srcdoc") {
@@ -36,9 +38,13 @@ export const webPlatform: PlatformHost = {
     }
 
     const navigated = new Set<() => void>();
+    const loaded = new Set<() => void>();
     let loads = 0;
     frame.addEventListener("load", () => {
       loads += 1;
+      for (const listener of loaded) {
+        listener();
+      }
       if (loads > 1) {
         for (const listener of navigated) {
           listener();
@@ -53,7 +59,9 @@ export const webPlatform: PlatformHost = {
       transport,
       element: frame,
       setHeight(px: number) {
-        frame.style.height = `${Math.max(0, Math.round(px))}px`;
+        if (spec.fill !== true) {
+          frame.style.height = `${Math.max(0, Math.round(px))}px`;
+        }
       },
       setColorScheme(scheme: ColorScheme) {
         frame.style.colorScheme = scheme;
@@ -64,12 +72,17 @@ export const webPlatform: PlatformHost = {
         ).userActivation;
         return activation === undefined ? undefined : activation.isActive;
       },
+      onLoad(listener) {
+        loaded.add(listener);
+        return () => loaded.delete(listener);
+      },
       onNavigated(listener) {
         navigated.add(listener);
         return () => navigated.delete(listener);
       },
       destroy() {
         navigated.clear();
+        loaded.clear();
         transport.close();
         frame.remove();
       },

package/src/presets/presets.ts

@@ -10,6 +10,7 @@ import type {
   Limits,
   PortholeConfig,
   ThemeValue,
+  UrlSandboxExtra,
 } from "../config/schema.ts";
 import { validateConfig } from "../config/validate.ts";
 import { DEFAULT_THEME_EVENT, DEFAULT_THEME_VARIABLES } from "../theme/variables.ts";
@@ -27,10 +28,14 @@ export interface PresetOptions {
   readonly capabilities?: { readonly [N in CapabilityName]?: CapabilityConfig | false };
   /** Origins to open, added to the preset's (closed) egress. */
   readonly egress?: EgressConfig;
-  /** Theme defaults to change or variables to add, and the theme event's name. */
+  /**
+   * Theme defaults to change, variables to add, or (null) defaults to drop; the theme event's
+   * name; and whether whole documents follow the person's scheme (`ThemeConfig.documents`).
+   */
   readonly theme?: {
-    readonly variables?: Readonly<Record<string, ThemeValue>>;
+    readonly variables?: Readonly<Record<string, ThemeValue | null>>;
     readonly event?: string;
+    readonly documents?: "declared" | "always";
   };
   readonly limits?: Partial<Limits>;
   readonly layout?: Partial<LayoutConfig>;
@@ -44,6 +49,8 @@ export interface PresetOptions {
 /** The url preset's options: where the app is served, and the embedding page's extra frames. */
 export interface UrlPresetOptions {
   readonly contentOrigins: readonly string[];
+  /** Sandbox tokens to add for the app (popups for an OAuth flow, modals, downloads; P037). */
+  readonly sandbox?: readonly UrlSandboxExtra[];
   readonly limits?: Partial<Limits>;
   readonly layout?: Partial<LayoutConfig>;
   readonly embedder?: EmbedderConfig;
@@ -116,6 +123,21 @@ const mergeEgress = (base: EgressConfig, extra: EgressConfig | undefined): Egres
   return merged;
 };
 
+/** The default variables, with the host's changes and additions, less those it dropped (null). */
+function themeVariables(
+  changes: Readonly<Record<string, ThemeValue | null>> | undefined,
+): Record<string, ThemeValue> {
+  const variables: Record<string, ThemeValue> = { ...DEFAULT_THEME_VARIABLES };
+  for (const [name, value] of Object.entries(changes ?? {})) {
+    if (value === null) {
+      delete variables[name];
+    } else {
+      variables[name] = value;
+    }
+  }
+  return variables;
+}
+
 function build(
   mode: PortholeConfig["mode"],
   defaults: { readonly limits?: Partial<Limits> },
@@ -140,8 +162,9 @@ function build(
     capabilities,
     egress: mergeEgress({}, options.egress),
     theme: {
-      variables: { ...DEFAULT_THEME_VARIABLES, ...options.theme?.variables },
+      variables: themeVariables(options.theme?.variables),
       event: options.theme?.event ?? DEFAULT_THEME_EVENT,
+      ...(options.theme?.documents === undefined ? {} : { documents: options.theme.documents }),
     },
     limits: { ...BASE_LIMITS, ...defaults.limits, ...options.limits },
     layout: { ...BASE_LAYOUT, ...options.layout },
@@ -187,6 +210,7 @@ export const presets = {
       guide: {},
       contentOrigins: options.contentOrigins,
       embedder: options.embedder ?? {},
+      ...(options.sandbox === undefined ? {} : { sandbox: options.sandbox }),
     }),
 } as const;
 

package/src/react/frame.tsx

@@ -18,13 +18,15 @@ import type {
   CallContext,
   CapabilityHandlers,
   Confirm,
+  ConfirmAnswer,
   ConfirmRequest,
+  Proceed,
   Refusal,
 } from "../bridge/types.ts";
 import type { CapabilityName } from "../config/capabilities.ts";
 import type { ColorScheme, PortholeConfig } from "../config/schema.ts";
 import { createHost } from "../host/create-host.ts";
-import type { DisplayEvents, DisplayHandle } from "../host/types.ts";
+import type { DisplayEvents, DisplayHandle, FrameOutcome } from "../host/types.ts";
 import type { InstanceLocator, InstanceRef } from "../isolation/types.ts";
 import { ConfirmDialog } from "./dialog.tsx";
 import { createLiveFrames, type FrameState, type LiveFrames } from "./live.ts";
@@ -72,7 +74,8 @@ export interface PortholeProviderProps {
 
 interface Pending {
   readonly request: ConfirmRequest;
-  readonly resolve: (accepted: boolean) => void;
+  readonly resolve: (answer: ConfirmAnswer) => void;
+  readonly proceed: Proceed;
 }
 
 export function PortholeProvider(props: PortholeProviderProps): ReactElement {
@@ -85,11 +88,11 @@ export function PortholeProvider(props: PortholeProviderProps): ReactElement {
     own.current = props.confirm;
   });
   const confirm = useCallback<Confirm>(
-    (request) =>
+    (request, proceed) =>
       own.current !== undefined
-        ? own.current(request)
-        : new Promise<boolean>((resolve) =>
-            setQueue((waiting) => [...waiting, { request, resolve }]),
+        ? own.current(request, proceed)
+        : new Promise<ConfirmAnswer>((resolve) =>
+            setQueue((waiting) => [...waiting, { request, resolve, proceed }]),
           ),
     [],
   );
@@ -113,7 +116,11 @@ export function PortholeProvider(props: PortholeProviderProps): ReactElement {
           request={current?.request ?? null}
           {...(props.dialogClassName === undefined ? {} : { className: props.dialogClassName })}
           onAnswer={(accepted) => {
-            current?.resolve(accepted);
+            // A yes runs the effect inside this very click (a window it opens is the person's).
+            if (accepted) {
+              current?.proceed();
+            }
+            current?.resolve(accepted ? "accepted" : "declined");
             setQueue((waiting) => waiting.slice(1));
           }}
         />
@@ -164,6 +171,21 @@ export interface PortholeFrameProps {
   readonly onRefused?: (capability: CapabilityName, refusal: Refusal) => void;
   /** Too many declines: the display stops asking until it runs again. */
   readonly onMuted?: () => void;
+  /**
+   * How the frame's first document went: loaded, blocked (and why), or a timeout. A host shows its
+   * own fallback (a url-mode app "Open in a new tab") on anything but loaded.
+   */
+  readonly onOutcome?: (outcome: FrameOutcome) => void;
+  /**
+   * Other ids this display had (the call's id, before the display's own settled): its remembered
+   * height is found under them, for a frame that mounts again under its new id.
+   */
+  readonly aliases?: readonly string[];
+  /**
+   * Change it when the host's theme values change without a scheme flip (or after an async
+   * restyle): the running frame reads them again.
+   */
+  readonly themeKey?: string | number;
   /** Draws the placeholder instead of the default one. */
   readonly renderPlaceholder?: (props: PlaceholderProps) => ReactNode;
   readonly className?: string;
@@ -198,6 +220,21 @@ function DefaultPlaceholder({ state, title, run }: PlaceholderProps): ReactEleme
   );
 }
 
+/** A display's remembered height: under its id, else under the first of its other ids that has one. */
+function rememberedHeight(
+  heights: ReadonlyMap<string, number>,
+  displayId: string,
+  aliases: readonly string[] | undefined,
+): number {
+  for (const id of [displayId, ...(aliases ?? [])]) {
+    const height = heights.get(id);
+    if (height !== undefined) {
+      return height;
+    }
+  }
+  return 0;
+}
+
 export function PortholeFrame(props: PortholeFrameProps): ReactElement {
   const page = useContext(Page);
   const key = useId();
@@ -240,7 +277,17 @@ export function PortholeFrame(props: PortholeFrameProps): ReactElement {
     };
   }, [page, key, max, eager]);
 
-  const height = page.heights.get(props.displayId) ?? 0;
+  const height = rememberedHeight(page.heights, props.displayId, props.aliases);
+  // A display renamed while it runs (its id settled) keeps its height under its new id.
+  const previousId = useRef(props.displayId);
+  useLayoutEffect(() => {
+    const before = previousId.current;
+    previousId.current = props.displayId;
+    const kept = page.heights.get(before);
+    if (before !== props.displayId && kept !== undefined && !page.heights.has(props.displayId)) {
+      page.heights.set(props.displayId, kept);
+    }
+  }, [page, props.displayId]);
   const run = () => page.live.admit(key, max);
   const placeholder = props.renderPlaceholder ?? DefaultPlaceholder;
   return (
@@ -290,6 +337,7 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
   // The height this display started at: later reports don't make it start again.
   const [startHeight] = useState(initialHeightPx);
   const { config, document: view, instance, content, partial, scheme } = frame;
+  const fills = config.mode === "url";
 
   // The latest props, read when the display calls back (never during render).
   const latest = useEffectEvent(() => frame);
@@ -320,6 +368,9 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
         case "muted":
           frame.onMuted?.();
           return;
+        case "outcome":
+          frame.onOutcome?.(detail as DisplayEvents["outcome"]);
+          return;
       }
     },
   );
@@ -353,11 +404,11 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
         handlers,
         ...(asks
           ? {
-              confirm: (request: ConfirmRequest) =>
-                (latest().confirm ?? page.confirm ?? (() => Promise.resolve(false)))({
-                  ...request,
-                  display: { id: latest().displayId, title: latest().title },
-                }),
+              confirm: (request: ConfirmRequest, proceed: Proceed) =>
+                (latest().confirm ?? page.confirm ?? (() => Promise.resolve(false)))(
+                  { ...request, display: { id: latest().displayId, title: latest().title } },
+                  proceed,
+                ),
             }
           : {}),
         theme: (each) => latest().theme?.(each) ?? {},
@@ -383,6 +434,7 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
       "navigated",
       "refused",
       "muted",
+      "outcome",
     ];
     for (const event of events) {
       display.on(event, (detail) => notify(event, detail));
@@ -406,16 +458,28 @@ function Mount({ frame, page, initialHeightPx, placeholder, run }: MountProps):
   useEffect(() => {
     handle.current?.setTheme(scheme);
   }, [scheme]);
+  const { themeKey } = frame;
+  useEffect(() => {
+    if (themeKey !== undefined) {
+      handle.current?.refreshTheme();
+    }
+  }, [themeKey]);
 
   return (
     <div
       data-porthole-ready={String(ready)}
       style={{
         position: "relative",
+        // A url-mode app fills the frame's box (give PortholeFrame a height); the rest size to content.
+        ...(fills ? { height: "100%" } : {}),
         ...(ready ? {} : { minHeight: Math.max(startHeight, PLACEHOLDER_HEIGHT_PX) }),
       }}
     >
-      <div ref={holder} data-porthole-mount="" style={{ opacity: ready ? 1 : 0 }} />
+      <div
+        ref={holder}
+        data-porthole-mount=""
+        style={{ opacity: ready ? 1 : 0, ...(fills ? { height: "100%" } : {}) }}
+      />
       {ready ? null : placeholder({ state: "loading", title: frame.title, run })}
     </div>
   );