/**
* ImageGeneration — the place an image will be, while it is being made.
*
* ```tsx
*
*
*
* ```
*
* A generated image arrives seconds after it is asked for, and arrives at a
* size nobody knew in advance. Left to itself that is a screen that reflows
* under the reader's thumb at the moment they were about to tap something —
* so this reserves the box first, at the aspect ratio the image will have, and
* fills it with something to watch.
*
* ## The dot field
*
* A grid of dots with a soft light moving through it, drawn as three layers:
* the field at rest, and two copies of the lit dots fading into one another.
*
* Every picture the loop will ever draw is built when the box is measured, so
* running it hands over a string that already exists. That leaves twenty-four
* pictures to spread across the pass, which on its own is a flipbook — a new
* one every 175ms, however fast the screen refreshes. The two layers are what
* fills the gap: one holds the frame being left and one the frame being
* arrived at, and only their opacities move, which the compositor animates at
* the display's own rate without the drawing being touched.
*
* They are opacities on views rather than on the dots, and that is not a
* detail. A value that changes every frame sitting beside the path string
* pushes the path every frame too, and every push of a path is a re-parse of
* several hundred subpaths — which is the cost this whole arrangement exists
* to avoid. Kept apart, the path is pushed only when it actually changes.
*
* ## What arrives, and when
*
* `status` moves the picture through the work rather than switching it: the
* field fades as the image fades in, and for one step in the middle both are
* visible at once. That overlap is the point — an image that appears the
* instant the field vanishes has been swapped in, and one that surfaces
* through it has been developed.
*
* ## Reduced motion
*
* The light stops, and the field holds wherever the clock was left. A
* placeholder that shows nothing is indistinguishable from a component that
* failed to load, so this is a quieter picture rather than an empty one.
*/
import { type ReactNode } from 'react';
import { type ViewProps } from 'react-native';
import { type DotFieldAnimation } from './dot-field.js';
/** How far the generation has got. */
export type ImageGenerationStatus = 'queued' | 'generating' | 'refining' | 'complete' | 'error';
export interface ImageGenerationFieldProps extends Omit {
className?: string;
/** Holds the light still, at one representative frame. */
paused?: boolean;
/**
* How the light moves through the field.
*
* `drift` wanders around the middle; `pulse` is a ring leaving the centre;
* `scan` crosses as a band. All three cost the same.
*/
animation?: DotFieldAnimation;
}
/**
* The dot field on its own, for a placeholder that is not an image.
*
* It fills its parent absolutely rather than sizing to its contents, because
* what it draws has no intrinsic height — laid out normally it measures to
* nothing and draws a single row of dots along the top.
*
* ## What it costs
*
* Two paths: the resting grid, and the lit dots over it. Both are built when
* the box is measured — every frame of the loop at once — so running it is
* handing over a string that already exists, and a page of these costs the
* same as a page of static drawings plus one property assignment each.
*/
declare function ImageGenerationField({ className, paused, animation, style, ...props }: ImageGenerationFieldProps): import("react").JSX.Element;
declare namespace ImageGenerationField {
var displayName: string;
}
export interface ImageGenerationProps extends Omit {
className?: string;
/** How far the generation has got. Defaults to `generating`. */
status?: ImageGenerationStatus;
/**
* What the box is, for a screen reader. Defaults to the status text, with
* the prompt after it where there is one.
*/
label?: string;
/** The instruction the image was made from. Shown under the status. */
prompt?: string;
/** Shown in the corner of the frame. Pass an empty string to drop it. */
resolution?: string;
/**
* The box's shape, as width over height. Defaults to `1` — square, which is
* what most models return, and what the frame must be before there is an
* image to measure.
*/
aspectRatio?: number;
/** `compact` caps the width at a thumbnail and centres it; `fluid` fills. */
size?: 'compact' | 'fluid';
/**
* How the light behind the dots moves while there is work outstanding.
* `drift` wanders, `pulse` leaves the centre as a ring, `scan` crosses as a
* band. All three cost the same.
*/
animation?: DotFieldAnimation;
/** Replaces the sentence under the frame. */
statusText?: string;
/** Hides the status line, leaving the frame and the prompt. */
showStatus?: boolean;
/** Shown as a button under an `error`. Without it there is no button. */
onRetry?: () => void;
/** Extra classes for the frame — its radius, ground and aspect. */
frameClassName?: string;
/** Extra classes for the layer the image sits in. */
mediaClassName?: string;
/** Extra classes for the status line. */
statusClassName?: string;
/** The finished image. Anything that fills its parent — an `Image`, a video. */
children?: ReactNode;
}
declare function ImageGenerationRoot({ className, status, label, prompt, resolution, aspectRatio, size, animation, statusText, showStatus, onRetry, frameClassName, mediaClassName, statusClassName, children, ...props }: ImageGenerationProps): import("react").JSX.Element;
declare namespace ImageGenerationRoot {
var displayName: string;
}
export declare const ImageGeneration: typeof ImageGenerationRoot & {
Field: typeof ImageGenerationField;
};
export {};
//# sourceMappingURL=index.d.ts.map