/** * 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