PreviewFrame

1"use client";
2 
3import type { ComponentProps, ReactNode } from "react";
4import { useState } from "react";
5 
6import { AnimatedWash } from "@/components/animated-wash/animated-wash";
7import { NeonLoader } from "@/components/neon-loader/neon-loader";
8import { Button, buttonVariants } from "@/components/ui/button";
9import { cn } from "@/lib/utils";
10 
11export type PreviewFrameState = "ready" | "sleeping" | "waking" | "error";
12 
13export type PreviewFrameProps = Omit<ComponentProps<"div">, "title"> & {
14  /** The sandbox URL the frame renders. */
15  src: string;
16  /**
17   * What the header readout shows when the real src is an internal
18   * sandbox host. Defaults to src.
19   */
20  displaySrc?: string;
21  /** Accessible name for the iframe, e.g. the app's name. */
22  title: string;
23  /**
24   * Lifecycle state: "ready" shows the app, "sleeping" dims it behind
25   * a wake-on-click scrim, "waking" covers it with the loader while
26   * the sandbox spins up, "error" offers a restart.
27   */
28  state?: PreviewFrameState;
29  /** Renders the wake action in the sleeping state. */
30  onWake?: () => void;
31  /** One line under the sleeping title. */
32  sleepingDetail?: string;
33  /**
34   * Bump this number to force a reload from outside — e.g. after the
35   * agent finishes an edit. Merged with the internal refresh count.
36   */
37  reloadSignal?: number;
38  /** Renders the restart action (header and error panel). */
39  onRestart?: () => void;
40  /** Notified after the built-in refresh action reloads the frame. */
41  onRefresh?: () => void;
42  /** One line of detail under the error title. */
43  errorDetail?: string;
44  /** Copy under the loader while waking. */
45  wakingLabel?: string;
46  /** Extra actions rendered before the built-in header buttons. */
47  actions?: ReactNode;
48  /**
49   * The agent is editing the app right now: the header dot breathes and a
50   * quiet "editing…" readout joins the URL. The app stays visible — it is
51   * still live and hot-reloading under the changes.
52   */
53  working?: boolean;
54  /** The iframe sandbox policy. */
55  sandbox?: string;
56};
57 
58/* ─────────────────────────────────────────────────────────
59 * LIFECYCLE STORYBOARD
60 *
61 * The chrome stays constant; only the stage changes. Every
62 * overlay is absolute, so the frame never changes height.
63 *
64 *  ready    the app, full bleed; the header dot holds
65 *           primary and the URL reads in mono
66// … truncated