@orieljs/live 0.1.0-alpha.10

package/dist/index.d.ts

@@ -0,0 +1,519 @@
+import * as _orieljs_contracts from '@orieljs/contracts';
+import { Class, RouteName, RouteArguments, Rules, InferValidatedType, MessageBag, LiveEffects, Htmlable, LiveSnapshot, LiveManager, Application, HttpRequest, LiveUpdateRequest, LiveUpdateResponse, OrielError, ErrorKind, UploadedFile, MiddlewareClass, Router } from '@orieljs/contracts';
+import { ServiceProvider } from '@orieljs/support';
+
+/** Marks Live component classes (Symbol.for, so two copies of the package agree). */
+declare const COMPONENT: unique symbol;
+/** A browser event queued by dispatch(). `to` is resolved to a component name when the effects are built. */
+interface QueuedDispatch {
+    name: string;
+    params: Record<string, unknown>;
+    self?: true;
+    to?: string | Class<Component>;
+}
+/** The validation errors of a component (Laravel's MessageBag), for render(): `this.errors.first('title')`. */
+declare class ErrorBag implements MessageBag {
+    #private;
+    private readonly messages;
+    constructor(messages: Record<string, string[]>);
+    /** Adds to the component's errors, as addError() does. */
+    add(key: string, message: string): void;
+    has(key: string): boolean;
+    first(key?: string): string | undefined;
+    get(key: string): string[];
+    all(): string[];
+    any(): boolean;
+    isEmpty(): boolean;
+    count(): number;
+    toObject(): Record<string, string[]>;
+}
+/** What dispatch() returns: `this.dispatch('saved').self()` or `.to(Sidebar)`. */
+declare class PendingEvent {
+    private readonly event;
+    constructor(event: QueuedDispatch);
+    /** Only this component's own listeners receive the event. */
+    self(): this;
+    /** Only components of this class (or registered name) receive the event. */
+    to(component: string | Class<Component>): this;
+}
+/**
+ * A Live component (Livewire 3): public fields are its state, public methods are actions the browser can call, and
+ * render() returns its TSX. Lifecycle hooks, all optional: `boot()`, `mount(params)`, `hydrate()`, `dehydrate()`,
+ * `updating(name, value)`/`updated(name, value)` and per property `updatingTitle(value)`/`updatedTitle(value)`,
+ * `rendering()`/`rendered(html)`. Fields that must not be state use `#private` syntax.
+ */
+declare abstract class Component {
+    static readonly [COMPONENT] = true;
+    /** The view that wraps a full-page component (default: config `live.layout`). */
+    static layout?: string;
+    /** The page title passed to the layout as `title`. */
+    static title?: string;
+    /**
+     * Livewire's #[Lazy]: every embed (and the full page) renders the placeholder first and mounts once the browser shows
+     * it. `<Live component={…} lazy={false} />` mounts one at once. The placeholder is the component's
+     * `placeholder(params)` method (TSX), else the `live.lazy_placeholder` view, else an empty `<div>`: give it the root
+     * element the component renders.
+     */
+    static lazy?: boolean;
+    /** Static fallbacks for runtimes without decorators: { event: 'method' }, locked names, computed getter names. */
+    static listeners?: Record<string, string>;
+    static locked?: string[];
+    static computed?: string[];
+    abstract render(): unknown;
+    getId(): string;
+    getName(): string;
+    /** Dispatches a browser event; every component listening for it (@On) runs its handler. */
+    dispatch(name: string, params?: Record<string, unknown>): PendingEvent;
+    /** Sends the browser to `url` after this request; `navigate` uses o:navigate instead of a full page load. */
+    redirect(url: string, options?: {
+        navigate?: boolean;
+    }): void;
+    /**
+     * redirect() to a named route: `this.redirectRoute('posts.show', post, { navigate: true })`. Once `oriel
+     * route:types` has run, the name and the route's parameters are checked, as route()'s are.
+     */
+    redirectRoute<N extends RouteName>(name: N, ...args: RouteArguments<N, [options?: {
+        navigate?: boolean;
+    }]>): void;
+    /**
+     * Validates the public state. On success clears the error bag and returns the validated data, typed from the rules
+     * (`await this.validate({ title: 'required|string' })` is `{ title: string }`); on failure fills the error bag and
+     * throws (the rest of the action is skipped and the component re-renders with `errors`).
+     */
+    validate<const R extends Rules>(rules: R, messages?: Record<string, string>, attributes?: Record<string, string>): Promise<InferValidatedType<R>>;
+    addError(key: string, message: string): void;
+    /** Clears every error, or only those of `keys`. */
+    resetErrorBag(...keys: string[]): void;
+    get errors(): ErrorBag;
+    /** Puts public properties (all of them when none are named) back to their initial values. */
+    reset(...properties: string[]): void;
+    /** Keeps the current HTML: the response carries the new state but no `html` effect. */
+    skipRender(): void;
+    /**
+     * An action for an `o:` directive, typed against its method: `o:click={this.$action(this.delete, tag.id)}` writes
+     * `delete(5)`, and a string where `delete` takes a number is a type error. The arguments are written as JSON, the
+     * trailing `undefined` ones left out so the method's defaults apply. The method must be one of this component's
+     * actions (a public method of its class, not a hook and not @Locked); anything else throws while rendering.
+     */
+    $action<P extends unknown[]>(method: (...params: P) => unknown, ...params: NoInfer<P>): string;
+    /** A full-page component as a route action: Route.get('/counter', Counter). Route parameters go to mount(). */
+    __invoke(): Promise<unknown>;
+}
+
+/** @On('post-created'): calls the method when the event is dispatched (by this or any component, or the browser). */
+declare function On(event: string): (_method: unknown, context: ClassMethodDecoratorContext) => void;
+/** @Locked: a property the browser can't change, or a method the browser can't call. */
+declare function Locked(_target: unknown, context: ClassFieldDecoratorContext | ClassMethodDecoratorContext): void;
+/** @Computed: a getter cached for the rest of the request, never part of the component's state. */
+declare function Computed<T>(getter: (this: object) => T, context: ClassGetterDecoratorContext): (this: object) => T;
+
+/**
+ * Runs Live.test()'s mount and each update. The testing package binds one for every test, so they run in a request
+ * scope like the test's HTTP requests (a request, the carried session, actingAs users) and what they change carries
+ * on to the next request. Without one they run in the current scope.
+ */
+type TestRequestScope = <T>(run: () => Promise<T>) => Promise<T>;
+declare const TestRequestScope: _orieljs_contracts.Token<TestRequestScope>;
+/**
+ * Livewire's Livewire::test(): drives one component through the real mount → snapshot → checksum → update pipeline
+ * (no HTTP), inside the test's request scope. Actions are async (`await counter.call('increment')`); assertions are
+ * sync and return `this`.
+ */
+declare class Testable<C extends Component = Component> {
+    #private;
+    private readonly manager;
+    private readonly scope;
+    private constructor();
+    /**
+     * Mounts `component` with `params`, as `<Live component={…} {...params} />` would. A lazy component mounts at once
+     * (Livewire's withoutLazyLoading()); `{ lazy: true }` renders its placeholder, and `call('__lazyLoad', …)` loads it.
+     */
+    static create<C extends Component>(component: Class<C> | string, params?: Record<string, unknown>): Promise<Testable<C>>;
+    /** The component instance after the last request. */
+    instance(): C;
+    /** A public property (dotted paths reach into arrays and objects). */
+    get<T = unknown>(path: string): T;
+    /** The last rendered HTML, without the o:id, o:snapshot and o:effects attributes (Livewire strips them too). */
+    html(): string;
+    /** The effects of the last request. */
+    effects(): LiveEffects;
+    /**
+     * Sets public properties through an update. A file (a FakeFile) or an array of files is uploaded as `o:model` on a
+     * file input does it: the upload rules, the temporary disk, then a TemporaryUploadedFile (or an array) in the
+     * property, or the upload's errors on it (Livewire's).
+     */
+    set(path: string | Record<string, unknown>, value?: unknown): Promise<this>;
+    /** Uploads `files` into the property `name` (an array when `multiple`), as the browser's upload calls do. */
+    upload(name: string, files: readonly Blob[], multiple?: boolean): Promise<this>;
+    call(method: string, ...params: unknown[]): Promise<this>;
+    toggle(path: string): Promise<this>;
+    /** Dispatches an event to this component, as the browser does for its listeners. */
+    dispatch(event: string, params?: Record<string, unknown>): Promise<this>;
+    refresh(): Promise<this>;
+    assertSet(path: string, value: unknown): this;
+    assertNotSet(path: string, value: unknown): this;
+    /** Each value, HTML-escaped, appears in the rendered HTML. */
+    assertSee(...values: string[]): this;
+    assertDontSee(...values: string[]): this;
+    /** Each value appears in the rendered HTML as written (not escaped). */
+    assertSeeHtml(...values: string[]): this;
+    /** Each value, HTML-escaped, appears in the rendered text: the HTML with its tags stripped (Livewire's assertSeeText). */
+    assertSeeText(...values: string[]): this;
+    assertDontSeeText(...values: string[]): this;
+    assertDispatched(name: string, params?: Record<string, unknown>): this;
+    assertNotDispatched(name: string): this;
+    /** The error bag has errors for every key given (or any error at all with no keys). */
+    assertHasErrors(keys?: string | string[]): this;
+    /** No errors for the keys given (or none at all with no keys). */
+    assertHasNoErrors(keys?: string | string[]): this;
+    assertRedirect(url?: string): this;
+    assertNoRedirect(): this;
+    /** The last call returned `value`. */
+    assertReturned(value: unknown): this;
+}
+
+/** Props of `<Live component={Counter} count={3} o:key="c1" />`: the rest become mount params. */
+interface LiveProps {
+    component: Class<Component> | string;
+    /** Identifies a child inside its parent across re-renders (Livewire's :key / wire:key). */
+    'o:key'?: string | number;
+    /**
+     * Renders the placeholder and mounts the component once it scrolls into view (`'on-load'`: once the page starts);
+     * `false` mounts a `static lazy` component at once.
+     */
+    lazy?: boolean | 'on-load';
+    [param: string]: unknown;
+}
+/** Blade's @livewire('counter', ['count' => 3], key('c1')): the component's first render, as trusted HTML. */
+declare function live(component: Class<Component> | string, params?: Record<string, unknown>, key?: string | number): Promise<Htmlable>;
+/** `<Live component={Counter} />` in any view or component. */
+declare function LiveComponent({ component, 'o:key': key, children: _children, ...params }: LiveProps): Promise<Htmlable>;
+/** The `<Live />` element, and the Live facade: Live.component(name, Class), Live.test(Component). */
+declare const Live: typeof LiveComponent & {
+    /** Registers a component under a name (components in app/Live are registered at boot). */
+    component(name: string, component: Class<Component>): void;
+    /** Livewire::test(): mounts `component` for assertions. */
+    test<C extends Component>(component: Class<C> | string, params?: Record<string, unknown>): Promise<Testable<C>>;
+};
+
+type Call = {
+    method: string;
+    params: unknown[];
+};
+/** One component after a mount or an update: the live instance (for Live.test), its snapshot, effects and HTML. */
+interface ComponentResult {
+    instance: Component;
+    snapshot: LiveSnapshot;
+    effects: LiveEffects;
+    /** The rendered HTML with o:id (and, after a mount, o:snapshot/o:effects); undefined after skipRender(). */
+    html?: string;
+    tag?: string;
+}
+/** Livewire's update request handling and first render, on Oriel's contracts. */
+declare class LiveComponentManager implements LiveManager {
+    private readonly app;
+    constructor(app: Application);
+    /** The request scope when there is one (sessions, the current route), else the application. */
+    private container;
+    private registry;
+    /** Live.component('counter', Counter): registers a component under a name the snapshots use. */
+    register(component: Class<unknown>, name?: string): void;
+    /** The registered name of a component class, registering it under its kebab-case class name the first time. */
+    nameOf(component: Class<Component>): string;
+    resolve(name: string): Class<Component>;
+    isLiveRequest(request: HttpRequest): boolean;
+    /** The first render: HTML with o:id, o:snapshot and o:effects on the root element. */
+    mount(component: string | Class<unknown>, params?: Record<string, unknown>, key?: string): Promise<string>;
+    /**
+     * Mounts a component: boot(), the params into its properties, mount(params), then its first render. A lazy one
+     * (`lazy` in the params, or `static lazy`) renders its placeholder instead and mounts when the browser loads it.
+     */
+    mountComponent(component: string | Class<unknown>, embedParams?: Record<string, unknown>, existing?: Component): Promise<ComponentResult>;
+    /**
+     * A lazy component's first render (Livewire's): its placeholder, with the state it has before mount() and the mount
+     * params signed for the `__lazyLoad` call the browser makes when it shows it (`o:lazy`, or `o:lazy-on-load`).
+     */
+    private mountPlaceholder;
+    /** Applies each component's updates and calls, re-renders it and returns its new snapshot and effects. */
+    update(request: LiveUpdateRequest): Promise<LiveUpdateResponse>;
+    updateComponent(snapshotJson: string, updates: Record<string, unknown>, calls: Call[]): Promise<ComponentResult>;
+    /**
+     * The mount params and placeholder tag of a `__lazyLoad` request, or undefined for any other update. The load comes
+     * alone (no updates, no other call: the browser sends it in a request of its own) and its payload must be the one
+     * signed for this component: anything else is refused as corrupt (a 403) before the component boots.
+     */
+    private lazyLoad;
+    /**
+     * The route action of POST /oriel/live/update. Each component's update runs behind the persistent middleware of the
+     * route that rendered its page (Livewire's): `auth`, `verified`, `guest` and `can`, with the page route's parameters
+     * bound again. A signed-out tab gets a 401, a revoked ability a 403 and a deleted model a 404, before the component
+     * hydrates. When a middleware answers instead (a redirect), that is the response. A key first flashed during the
+     * update shows in this response only, unless the update redirects.
+     */
+    handle(request: HttpRequest): Promise<LiveUpdateResponse | Response>;
+    /** A full-page component (Route.get('/counter', Counter)): mounted with the route parameters, inside the layout. */
+    page(component: Component): Promise<unknown>;
+    /** Parses and checks a snapshot: a bad checksum throws before anything is hydrated. */
+    private verify;
+    private key;
+    /** The request body, read from the raw JSON when the request has it, so TrimStrings can't alter typed values. */
+    private payload;
+    /** Makes every computed getter (static `computed` too) cache its value for the rest of the request. */
+    private prepareComputed;
+    private applyUpdate;
+    /** Runs one call from the browser: a magic action, an event, an upload call, or a public method. Returns its return value. */
+    private call;
+    /**
+     * Renders the component (rendering/rendered hooks, nested children tracked) and checks for a single root. A
+     * WithPagination component's page and page URL are what paginate() reads while it renders, as in its mount() and in
+     * its update's hooks and actions.
+     */
+    private render;
+    /** The absolute URL of the page a memo path belongs to, on the current request's origin ('/' + path without one). */
+    private pageUrl;
+    /** Dispatches, redirects: the effects every response carries. */
+    private effects;
+    /** dehydrate() hook, then the state as snapshot data, the error bag, and the checksum over both. */
+    private snapshot;
+}
+
+/** The URI the client runtime posts updates to. */
+declare const UPDATE_URI = "/oriel/live/update";
+/**
+ * Binds the LiveManager and the PaginationState that WithPagination components answer, merges the `live` config,
+ * registers POST /oriel/live/update (named `live.update`, in the `web` group: sessions and CSRF apply), the upload and
+ * preview routes of WithFileUploads (`live.upload-file`, `live.preview-file`), the make:live command, and the
+ * components under app/Live.
+ */
+declare class LiveServiceProvider extends ServiceProvider {
+    register(): void;
+    boot(): Promise<void>;
+}
+
+/** A component's Livewire name from its path under app/Live: Posts/CreatePost.tsx → posts.create-post. */
+declare function componentName(file: string): string;
+/** Component files under `directory` (recursive), relative paths with `/`. Test and declaration files are skipped. */
+declare function componentFiles(directory: string): string[];
+
+/**
+ * What the browser may do with a component class, for editors (`oriel ide:info`): the actions it may call and the
+ * properties it may set, each sorted. The instance is built as mounting builds one, and none of its hooks run.
+ */
+declare function describeComponent(cls: new () => Component): {
+    actions: string[];
+    properties: string[];
+};
+
+/** A Live programming error (unsupported state, a missing root element, an unknown component): a 500. */
+declare class LiveError extends Error implements OrielError {
+    readonly name: string;
+    readonly kind: ErrorKind;
+    readonly status: number;
+}
+/** A snapshot whose checksum doesn't match (tampered with, or signed with another APP_KEY). Nothing is hydrated. */
+declare class CorruptComponentPayloadError extends LiveError {
+    readonly name: string;
+    readonly kind: ErrorKind;
+    readonly status: number;
+    constructor(component?: string);
+}
+/** The browser asked for a method that isn't a public action of the component. */
+declare class MethodNotCallableError extends LiveError {
+    readonly name: string;
+    readonly kind: ErrorKind;
+    readonly status: number;
+    constructor(method: string, component: string);
+}
+/** The browser tried to set a property that is locked, computed, private (`_x`) or not declared. */
+declare class PropertyNotUpdatableError extends LiveError {
+    readonly name: string;
+    readonly kind: ErrorKind;
+    readonly status: number;
+    constructor(path: string, component: string);
+}
+/** A snapshot names a component that isn't registered. */
+declare class LiveComponentNotFoundError extends LiveError {
+    readonly name: string;
+    readonly kind: ErrorKind;
+    readonly status: number;
+    constructor(component: string);
+}
+/** An update request without the X-Oriel-Live header or with a malformed body. */
+declare class InvalidLiveRequestError extends LiveError {
+    readonly name: string;
+    readonly kind: ErrorKind;
+    readonly status: number;
+}
+/** An upload or preview URL whose signature is missing, wrong or expired (Livewire's 401). Nothing is read or stored. */
+declare class InvalidUploadSignatureError extends LiveError {
+    readonly name: string;
+    readonly kind: ErrorKind;
+    readonly status: number;
+    constructor();
+}
+/** A preview of a temporary upload that is no longer on the disk (cleaned up, or stored and deleted). */
+declare class TemporaryFileNotFoundError extends LiveError {
+    readonly name: string;
+    readonly kind: ErrorKind;
+    readonly status: number;
+    constructor(filename: string);
+}
+/** temporaryUrl() on an upload whose type has no preview (live.temporary_file_upload.preview_mimes). */
+declare class FileNotPreviewableError extends LiveError {
+    readonly name: string;
+    constructor(extension: string);
+}
+/** The errors an upload came back with (`_uploadErrored`): the component re-renders with them on the property. */
+declare class UploadValidationError extends LiveError {
+    readonly errors: Record<string, string[]>;
+    readonly name: string;
+    readonly kind: ErrorKind;
+    readonly status: number;
+    readonly errorBag: string;
+    constructor(errors: Record<string, string[]>);
+}
+
+/**
+ * Livewire's `temporary_file_upload` settings, read from config `live.temporary_file_upload.*` (each one falls back on
+ * its own): the disk (the default filesystem disk), the directory on it, the rules every upload must pass, the upload
+ * route's middleware, the types a preview is served for, how long an upload URL lasts (minutes), and whether a finished
+ * upload removes the temporary files older than a day.
+ */
+declare const TEMPORARY_UPLOAD_DEFAULTS: {
+    disk: string | null;
+    directory: string;
+    rules: string | string[];
+    middleware: string | string[];
+    preview_mimes: string[];
+    max_upload_time: number;
+    cleanup: boolean;
+};
+/** What a temporary upload is: its stored name on the temporary disk and what the browser sent (signed with it). */
+interface TemporaryFileData {
+    /** A random 40-character name with the extension its bytes showed: `live-tmp/<filename>` on the temporary disk. */
+    filename: string;
+    /** The name the browser gave the file. */
+    name: string;
+    size: number;
+    /** The MIME type the browser claimed. */
+    type: string;
+    /** The extension of the upload's own type (its bytes, else a plain claimed extension), or ''. */
+    extension: string;
+}
+/**
+ * Livewire's TemporaryUploadedFile: a file the browser uploaded to the temporary directory before an action stores
+ * it. A WithFileUploads component's property holds one (or an array of them) once `o:model` on a file input has
+ * uploaded it: validate it like any upload (`'photo' => 'image|max:1024'`), preview it with `temporaryUrl()`, then
+ * `store()` it. It travels in the component's snapshot as its data, signed with the rest.
+ */
+declare class TemporaryUploadedFile implements UploadedFile {
+    #private;
+    readonly filename: string;
+    readonly clientName: string;
+    readonly mimeType: string;
+    readonly size: number;
+    constructor(data: TemporaryFileData);
+    /** What the snapshot carries. */
+    toData(): TemporaryFileData;
+    /** The file's path on the temporary disk. */
+    get path(): string;
+    /** The extension of the upload's own type, as FormUploadedFile's extension(): what putFile() names a stored copy by. */
+    extension(): string;
+    /** The extension of the name the browser gave the file, lower-cased ('' without one). */
+    clientExtension(): string;
+    /** A random 40-character name with extension(), as FormUploadedFile's. */
+    hashName(): string;
+    arrayBuffer(): Promise<ArrayBuffer>;
+    text(): Promise<string>;
+    /** The file's bytes from the temporary disk, opened on the first read. */
+    stream(): ReadableStream<Uint8Array>;
+    /** Stores a copy under a random name in `directory`, on `disk` (by default the temporary disk, as Livewire's). */
+    store(directory: string, disk?: string): Promise<string>;
+    storeAs(directory: string, name: string, disk?: string): Promise<string>;
+    exists(): Promise<boolean>;
+    /** Removes the temporary file (a stored copy stays). */
+    delete(): Promise<boolean>;
+    /** Whether temporaryUrl() serves this file: its type is in `live.temporary_file_upload.preview_mimes`. */
+    isPreviewable(): boolean;
+    /**
+     * A signed link to the file for `<img src>` or `<video src>` before it is stored. It lasts until the end of the hour
+     * at least 30 minutes away (Livewire's), so a re-render keeps the same link and the browser doesn't reload it.
+     */
+    temporaryUrl(): string;
+}
+
+/** Where the browser POSTs a WithFileUploads component's files (Livewire's /livewire/upload-file), named live.upload-file. */
+declare const UPLOAD_URI = "/oriel/live/upload-file";
+/** Where temporaryUrl() links lead (Livewire's /livewire/preview-file/{filename}), named live.preview-file. */
+declare const PREVIEW_URI = "/oriel/live/preview-file";
+
+/** The route middleware an update re-applies by default (config live.persistent_middleware), by alias. */
+declare const PERSISTENT_MIDDLEWARE: string[];
+/** A route middleware after alias and group expansion: 'auth:web' → { cls: Authenticate, parameters: ['web'] }. */
+interface PersistentMiddleware {
+    readonly cls: MiddlewareClass;
+    readonly parameters: readonly string[];
+}
+/**
+ * Livewire's persistent middleware: the middleware among `persistent` (aliases) that the page route (the component's
+ * memo path and method) ran, in the order an update runs them. A path no route matches has none.
+ */
+declare function persistentMiddleware(router: Router, persistent: readonly string[], method: string, path: string): PersistentMiddleware[];
+
+type ComponentConstructor = abstract new (...args: any[]) => Component;
+/** What WithPagination() adds to a component: its page and the actions that move it. */
+interface Paginated {
+    /** The current page. The browser may set it; Live reads it as a page number. */
+    page: number;
+    nextPage(): Promise<void>;
+    previousPage(): Promise<void>;
+    gotoPage(page: number | string): Promise<void>;
+    resetPage(): Promise<void>;
+    setPage(page: number | string): Promise<void>;
+}
+/**
+ * Livewire's WithPagination: `class Posts extends WithPagination(Component)`. The public `page` (1 to start; there
+ * is no address-bar sync) is what `paginate()` shows in the component (in `render()`, `mount()`, `hydrate()`, the
+ * update hooks and actions, or in a `@Computed` getter any of them reads), and its page links are built on the
+ * page's URL. The actions move it: `o:click="nextPage"`, `previousPage`, `gotoPage(3)`, `setPage(3)`,
+ * `resetPage` (call it from `updatedSearch()` so a new search starts on page 1). `updatingPage(page)` and
+ * `updatedPage(page)` run around every change. One paginator per component: other page names read the request.
+ */
+declare function WithPagination<TBase extends ComponentConstructor>(Base: TBase): TBase & (abstract new (...args: any[]) => Paginated);
+
+/**
+ * Livewire's WithFileUploads: `class Profile extends WithFileUploads(Component)`. A file input with `o:model="photo"`
+ * uploads the file to the temporary directory as soon as it is picked, then sets `photo` to a TemporaryUploadedFile
+ * (`<input type="file" multiple>` sets an array), through `updatingPhoto()`/`updatedPhoto()` like any update. Validate
+ * it with the file rules, preview it with `temporaryUrl()`, store it with `store()`.
+ */
+declare function WithFileUploads<TBase extends ComponentConstructor>(Base: TBase): TBase;
+
+/**
+ * What <Pagination> reads from a paginator. Structural, since Live can't import Database: paginate()'s
+ * LengthAwarePaginator (with lastPage(), so page buttons) and simplePaginate()'s Paginator (Previous and Next only).
+ */
+interface PaginationSource {
+    currentPage(): number;
+    lastPage?(): number;
+    hasMorePages(): boolean;
+    onFirstPage(): boolean;
+    /** Page buttons on each side of the current one (the paginator's onEachSide(), 3 by default). */
+    readonly onEachSideCount?: number;
+    /** Not cursorPaginate(): its pages are cursors, which a component's page number can't follow. */
+    readonly nextCursor?: never;
+}
+interface PaginationProps {
+    paginator: PaginationSource;
+    /** Classes for the <nav>, such as its layout ("flex gap-2"); in your file, so Tailwind generates them. */
+    class?: string;
+}
+/**
+ * Livewire's pagination links for a WithPagination component: `<Pagination paginator={posts} />` in render(). A
+ * <nav aria-label="Pagination"> with « Previous, the page buttons and Next » as Live actions (previousPage,
+ * gotoPage(n), nextPage), the current page marked aria-current="page", the ends disabled, the kits' theme classes
+ * (btn, btn-secondary). Nothing when everything fits on one page. The address bar is left alone.
+ */
+declare function Pagination({ paginator, class: className }: PaginationProps): Htmlable;
+
+export { Component, type ComponentResult, Computed, CorruptComponentPayloadError, ErrorBag, FileNotPreviewableError, InvalidLiveRequestError, InvalidUploadSignatureError, Live, LiveComponentManager, LiveComponentNotFoundError, LiveError, type LiveProps, LiveServiceProvider, Locked, MethodNotCallableError, On, PERSISTENT_MIDDLEWARE, PREVIEW_URI, type Paginated, Pagination, type PaginationProps, type PaginationSource, PendingEvent, type PersistentMiddleware, PropertyNotUpdatableError, TEMPORARY_UPLOAD_DEFAULTS, type TemporaryFileData, TemporaryFileNotFoundError, TemporaryUploadedFile, TestRequestScope, Testable, UPDATE_URI, UPLOAD_URI, UploadValidationError, WithFileUploads, WithPagination, componentFiles, componentName, describeComponent, live, persistentMiddleware };