@forgebook/sveltekit 0.0.0-stage → 0.2.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Ensiria
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,153 @@
-# Temporary Holding Version
+# @forgebook/sveltekit
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+SvelteKit for [Forgebook](https://www.npmjs.com/package/forgebook): a SvelteKit app's components and pages drawn in a
+catalogue, with what they read of the app (`$app/state`, `$app/navigation`, `$app/forms`, `$app/paths`, `$app/env`,
+the public environment, `$lib` and a page's `load`) given by each story. Built on
+[`@forgebook/svelte`](https://www.npmjs.com/package/@forgebook/svelte), on Vite.
+
+**Requirements:** SvelteKit 2 or 3 · Svelte 5.46 · `forgebook` · Vite 8 · React in the project, for the catalogue's own
+interface (the frames that draw your components load none) ·
+[MIT licence](https://github.com/ensiria/forgebook/blob/develop/packages/sveltekit/LICENSE)
+
+```sh
+npm install --save-dev forgebook @forgebook/sveltekit react react-dom
+```
+
+The catalogue's configuration names it as its framework, beside the app's `vite.config`:
+
+```ts
+// forgebook.config.ts
+import { sveltekit } from "@forgebook/sveltekit/vite";
+import { defineConfig } from "forgebook";
+
+export default defineConfig({ framework: sveltekit(), title: "My app", stories: ["src/**/*.stories.ts"] });
+```
+
+It reads SvelteKit's options where SvelteKit keeps them (the `sveltekit()` plugin of `vite.config` in SvelteKit 3,
+`svelte.config.js` in SvelteKit 2), Svelte's options with them, and keeps the app's other Vite plugins (Tailwind CSS, an
+i18n compiler), so a component is drawn as the app draws it. `vite.config` is read as `vite dev` reads it, for a
+catalogue's build too, so the app's plugins run there: `keepPlugin` leaves out one only an app's build needs (a
+source-map upload, a service-worker generator). `sveltekit({ dir, viteConfig, keepPlugin })` names another folder or
+configuration; `viteConfig: false` reads only `svelte.config.js`. A SvelteKit 3 project's `tsconfig.json` extends
+`$app/tsconfig`, which `svelte-kit sync` writes: run it before the catalogue, as SvelteKit's templates do on install
+(`"prepare": "svelte-kit sync"`); the catalogue says so when it has not run.
+
+## A story on a page
+
+A story says which page its components are on, under `parameters.sveltekit`:
+
+```ts
+import type { Meta, Story } from "@forgebook/sveltekit";
+
+import SiteNav from "./SiteNav.svelte";
+
+export default { title: "Layout/Site nav", component: SiteNav } satisfies Meta<typeof SiteNav>;
+
+// `page.url` from $app/state, the route `/blog/[slug]` and `page.params.slug` read from src/routes
+export const OnAPost: Story<typeof SiteNav> = { parameters: { sveltekit: { page: { url: "/blog/hello" } } } };
+```
+
+A page is a story too, its data given or loaded as SvelteKit loads it:
+
+```ts
+import { http, HttpResponse } from "msw";
+
+import Post from "./+page.svelte";
+import { load } from "./+page";
+
+export default { title: "Pages/Post", component: Post } satisfies Meta<typeof Post>;
+
+// the page's own load, run in the frame with the story's params; its fetch answered by the story's mock
+export const Loaded: Story<typeof Post> = {
+  parameters: {
+    sveltekit: { page: { url: "/blog/hello" }, load },
+    msw: { handlers: [http.get("/api/posts/:slug", () => HttpResponse.json({ title: "Hello" }))] }
+  }
+};
+
+// or the data as it is, what a server load would have returned
+export const Given: Story<typeof Post> = {
+  parameters: { sveltekit: { page: { url: "/blog/hello", data: { post: { title: "Hello" } } } } }
+};
+```
+
+| `parameters.sveltekit` | What it sets |
+|---|---|
+| `page.url` | The page's address, from the base path (`/blog/hello?tab=1`); the route and params are read from `src/routes`. `/` by default |
+| `page.route`, `page.params` | The route id and params, over what the address gives; a route id with params and no `url` gives the address |
+| `page.data`, `page.form`, `page.state`, `page.status`, `page.error` | The rest of `page` |
+| `load` | The page's universal `load` (or a list, the layouts' first): run before the story is drawn, again after each move and on `invalidate` |
+| `serverData` | What the page's server load returned: the `data` its `load` receives, or the page's data without one |
+| `navigating`, `updated` | What `navigating` and `updated.current` hold |
+| `navigation`, `forms.enhance`, `hrefs` | Callbacks, as Storybook's SvelteKit names them: called with `goto`'s (and the others') arguments; a link whose href `hrefs` entries match (by key, or as a regular expression with `asRegex`) calls each of them instead of moving |
+| `forms.result` | What an enhanced form's action answers (`{ type: "failure", status: 400, data }`); a success by default |
+
+`load` takes the page's own `load`, typed by its `./$types`; one written in the story types its event itself
+(`satisfies PageLoad`). A story that gives page data (`page.data`, `serverData`, `load`) or an action's answer
+(`forms.result`) is a page's: its
+component gets `data`, `form` and `params` as SvelteKit gives a `+page.svelte` them, unless its args set them. Storybook's
+`sveltekit_experimental` is read too (`state.page`, `stores.page`, `navigation`, `forms`, `hrefs`), so stories moved
+with `forgebook init --from storybook` keep their pages.
+
+## What a story's page does
+
+The page really moves, in SvelteKit's order: a link of the app clicked in a story, a GET form, `goto` and a redirect a
+load throws run `beforeNavigate` (which may cancel), load the page's data, run `onNavigate`, change `page.url`, its route
+and params, and run `afterNavigate`. A move a later one overtook is dropped; an error a load throws is the page's, shown
+in place of the story. The frame's address never changes: every link (an SVG one and an `<area>` too) and every form is
+caught, and one outside the app (another origin, or outside the base path) goes nowhere. One frame shows one page: a
+story drawn several times at once (a matrix) shares it. Each move and each call
+(`link`, `goto`, `invalidate`, `invalidateAll`, `refreshAll`, `pushState`, `preloadData`, `enhance`…) is listed in the
+panel's Events. A play reads where the story went:
+
+```ts
+import { storyPage } from "@forgebook/sveltekit/page";
+
+export const GoesToAbout: Story<typeof SiteNav> = {
+  play: async ({ canvas, userEvent }) => {
+    await userEvent.click(canvas.getByRole("link", { name: "About" }));
+    // storyPage().pathname is "/about"; storyPage().calls lists the link
+  }
+};
+```
+
+An enhanced form (`use:enhance`) is sent to no server: the story's `forms.result` is the answer, and `page.form`, the
+status and the form's `form` prop follow it as `applyAction` sets them, a success loads the page's data again; the
+function `use:enhance` takes runs as in the app. A POST form without `use:enhance` is only listed among the events.
+
+| Module | In a story |
+|---|---|
+| `$app/state`, `$app/stores` | The story's page, followed by Svelte; the stores for SvelteKit 2 |
+| `$app/navigation` | `goto`, `invalidate`, `invalidateAll`, `refreshAll`, `preloadData`, `preloadCode`, `pushState`, `replaceState`, the three navigation callbacks; `disableScrollHandling` and `snapshot` do nothing |
+| `$app/forms` | `enhance`, `applyAction`, `deserialize` (JSON) |
+| `$app/paths` | `base`, `assets`, `asset`, `resolve`, `resolveRoute`, `match`, from the app's `paths` and routes |
+| `$app/env`, `$app/environment` | `browser` (false in a server test), `dev`, `building` (false), `version` |
+| `$app/manifest` | The routes and the static files |
+| `$app/env/public` (SvelteKit 3) | The variables `src/env.ts` declares public, checked by their schema (one with none must be set) |
+| `$env/static/public`, `$env/dynamic/public` (SvelteKit 2) | The variables with the public prefix, from the environment and the `.env` files, fixed when a static build is made |
+| `$lib`, the `alias` option | As SvelteKit resolves them; SvelteKit 3's `#lib` is the app's own `imports` |
+| `$app/env/private`, `$env/*/private`, `$app/server`, `$service-worker` | Refused: the story fails with why, and the value never reaches the page |
+| The other SvelteKit's environment | Refused too: SvelteKit 3 has no `$env/*`, so no variable reaches its page by its prefix alone; SvelteKit 2 has no `$app/env/public` |
+
+Generated server tests take `kitRenderer` from `@forgebook/sveltekit/renderer`: a page's `load` runs first, and a server
+render never reaches the network for the page's own origin. A load's `fetch` of a path, or of an address on the story's
+page's origin (`http://localhost` unless `page.url` names another), is answered by the story's `parameters.msw`
+handlers, the ones the frame uses, run in Node by MSW's `getResponse` (MSW 2.11 or later, installed by the project): no
+request is intercepted, so tests running at once keep their own mocks. A mocked redirect is followed through the
+handlers and `HttpResponse.error()` rejects the fetch, as in the frame; `{ once: true }` handlers answer again in each
+render. When no handler answers, or one answers `passthrough()`, the story fails with the address and what to give
+instead: a handler, or the page's data (`serverData`, `page.data`); it fails even when the load catches the error. An
+address on another origin, `127.0.0.1` beside a `localhost` page among them, is fetched as it is.
+
+## Not drawn
+
+Remote functions (`*.remote.ts`, `query`, `form`, `command`) need SvelteKit's server and are not given. A page's layouts
+(`+layout.svelte`) and `+error.svelte` are not drawn around it: a story draws its component, and a decorator adds a
+layout. A param's matcher is not run (any value matches), the history is the story's own (`history.back()` is the
+frame's), and `beforeNavigate` sees no `leave` navigation. The `tracing` field of a load's event is not given.
+
+`@forgebook/sveltekit` exports the story types (`Meta`, `Story`, `Preview`, and `StorySveltekit`, `StoryPageParameters`,
+`StoryKitLoad`, `StoryActionResult` for the parameters), `@forgebook/sveltekit/vite` the adapter, `@forgebook/sveltekit/page`
+`storyPage()`. The rest of its exports (`./app/*`, `./frame`, `./code`, `./docs`, `./renderer`) are what the catalogue
+loads itself, not for stories. Getting started, the catalogue's features and its commands:
+[Forgebook's README](https://github.com/ensiria/forgebook/blob/develop/packages/forgebook/README.md).

package/dist/src/app/env.d.ts

@@ -0,0 +1,8 @@
+/** Whether the code runs in the browser: `false` in a generated server test. */
+export declare const browser: boolean;
+/** Whether the catalogue's dev server runs, as SvelteKit's dev server would. */
+export declare const dev: boolean;
+/** Whether the app is being built or prerendered: a catalogue never runs it there. */
+export declare const building = false;
+/** The project's `version.name`. */
+export declare const version: string;

package/dist/src/app/env.js

@@ -0,0 +1,15 @@
+/**
+ * `$app/env` (SvelteKit 3) and `$app/environment` (SvelteKit 2) in a catalogue: in the browser in a frame, on the
+ * server in a generated server test, in development under `forgebook dev`, never building.
+ *
+ * @module
+ */
+import { appSettings } from "../appSettings.js";
+/** Whether the code runs in the browser: `false` in a generated server test. */
+export const browser = !import.meta.env.SSR;
+/** Whether the catalogue's dev server runs, as SvelteKit's dev server would. */
+export const dev = import.meta.env.DEV;
+/** Whether the app is being built or prerendered: a catalogue never runs it there. */
+export const building = false;
+/** The project's `version.name`. */
+export const version = appSettings().version;

package/dist/src/app/forms.d.ts

@@ -0,0 +1,68 @@
+/**
+ * `$app/forms` in a catalogue: a form with `use:enhance` is submitted to no server. The submission is listed among the
+ * story's events, the story's `forms.result` (a success by default) is what the action answers, and the page's `form`,
+ * status or error follow it as SvelteKit's `applyAction` sets them.
+ *
+ * @module
+ */
+import { type KitActionResult } from "../kitParameters.ts";
+/** What `use:enhance`'s function receives as the form is submitted. */
+export type SubmitInput = {
+    /** The action's address (`?/login`, from the page). */
+    readonly action: URL;
+    /** The form's values. */
+    readonly formData: FormData;
+    /** The form. */
+    readonly formElement: HTMLFormElement;
+    /** Aborts the submission. */
+    readonly controller: AbortController;
+    /** The button that submitted the form, or `null`. */
+    readonly submitter: HTMLElement | null;
+    /** Stops the submission. */
+    readonly cancel: () => void;
+};
+/** What the function `use:enhance`'s function returns receives, once the action answered. */
+export type SubmitResultInput = Omit<SubmitInput, "controller" | "submitter" | "cancel"> & {
+    /** What the action answered. */
+    readonly result: KitActionResult;
+    /**
+     * Does what SvelteKit does without a function: after a success, resets the form and loads the page's data again;
+     * applies the result.
+     */
+    readonly update: (options?: UpdateOptions) => Promise<void>;
+};
+/** What `update` may leave out: the reset (`reset: false`), the new load (`invalidateAll` or `refreshAll: false`). */
+export type UpdateOptions = {
+    /** Whether a success resets the form; `true` by default. */
+    readonly reset?: boolean;
+    /** Whether a success loads the page's data again (SvelteKit 2's name); `true` by default. */
+    readonly invalidateAll?: boolean;
+    /** Whether a success loads the page's data again (SvelteKit 3's name); `true` by default. */
+    readonly refreshAll?: boolean;
+};
+/** `use:enhance`'s function. */
+export type SubmitFunction = (input: SubmitInput) => unknown;
+/**
+ * Applies an action's result to the page, as SvelteKit's does: a success or failure sets `page.form` and the status,
+ * a redirect moves the page, an error sets `page.error`.
+ *
+ * @param result - the result.
+ */
+export declare const applyAction: (result: KitActionResult) => Promise<void>;
+/**
+ * An action's answer read from its text, as SvelteKit writes it: its data in JSON (SvelteKit writes it with
+ * `devalue`, which a value JSON can write reads the same with).
+ *
+ * @param text - the answer's text.
+ */
+export declare const deserialize: (text: string) => KitActionResult;
+/**
+ * Submits a form to no server: what `use:enhance` does in a story.
+ *
+ * @param form - the form.
+ * @param submit - the function called as it is submitted; what it returns is called with the result.
+ * @returns what removes the behaviour.
+ */
+export declare const enhance: (form: HTMLFormElement, submit?: SubmitFunction) => {
+    readonly destroy: () => void;
+};

package/dist/src/app/forms.js

@@ -0,0 +1,125 @@
+/**
+ * `$app/forms` in a catalogue: a form with `use:enhance` is submitted to no server. The submission is listed among the
+ * story's events, the story's `forms.result` (a success by default) is what the action answers, and the page's `form`,
+ * status or error follow it as SvelteKit's `applyAction` sets them.
+ *
+ * @module
+ */
+import { actionResultOf, errorOf } from "../kitParameters.js";
+import { currentStore } from "../kitStore.js";
+/**
+ * Applies an action's result to the story's page.
+ *
+ * @param store - the story's page.
+ * @param result - the result.
+ */
+const applied = async (store, result) => {
+    switch (result.type) {
+        case "success":
+        case "failure":
+            store.setPage({ form: result.data ?? null, status: result.status });
+            return;
+        case "redirect":
+            await store.navigate("goto", result.location);
+            return;
+        case "error":
+            store.setPage({
+                error: errorOf(result.error) ?? { message: String(result.error) },
+                status: result.status ?? 500
+            });
+    }
+};
+/**
+ * Applies an action's result to the page, as SvelteKit's does: a success or failure sets `page.form` and the status,
+ * a redirect moves the page, an error sets `page.error`.
+ *
+ * @param result - the result.
+ */
+export const applyAction = async (result) => {
+    const store = currentStore();
+    store.record("applyAction", [result]);
+    await applied(store, result);
+};
+/**
+ * An action's answer read from its text, as SvelteKit writes it: its data in JSON (SvelteKit writes it with
+ * `devalue`, which a value JSON can write reads the same with).
+ *
+ * @param text - the answer's text.
+ */
+export const deserialize = (text) => {
+    const parsed = JSON.parse(text);
+    if (typeof parsed !== "object" || parsed === null || Array.isArray(parsed))
+        return { type: "error", error: new Error("The answer is not an action's result") };
+    const fields = Object.fromEntries(Object.entries(parsed));
+    const { data } = fields;
+    return actionResultOf({ ...fields, data: typeof data === "string" ? JSON.parse(data) : data });
+};
+/**
+ * A form's values, as the catalogue lists them: files by their name.
+ *
+ * @param formData - the values.
+ */
+const listedValues = (formData) => Object.fromEntries([...formData].map(([name, value]) => [name, typeof value === "string" ? value : value.name]));
+/**
+ * Submits a form to no server: what `use:enhance` does in a story.
+ *
+ * @param form - the form.
+ * @param submit - the function called as it is submitted; what it returns is called with the result.
+ * @returns what removes the behaviour.
+ */
+export const enhance = (form, submit) => {
+    const onSubmit = async (event) => {
+        const store = currentStore();
+        // SvelteKit enhances a POST form only: another is the browser's (the story's frame keeps it, as for a link)
+        const method = (event.submitter?.getAttribute("formmethod") ?? form.method).toLowerCase();
+        if (method !== "post")
+            return;
+        event.preventDefault();
+        // only a button of this form adds its value to the form's: FormData refuses any other
+        const { submitter: sent } = event;
+        const submitter = (sent instanceof HTMLButtonElement || sent instanceof HTMLInputElement) && sent.form === form
+            ? sent
+            : null;
+        const target = submitter?.getAttribute("formaction") ?? form.getAttribute("action") ?? "";
+        const action = new URL(target, store.page().url);
+        const formData = new FormData(form, submitter);
+        store.record("enhance", [`${action.pathname}${action.search}`, listedValues(formData)]);
+        store.kit.forms.enhance?.();
+        let isCancelled = false;
+        const controller = new AbortController();
+        const after = await submit?.({
+            action,
+            formData,
+            formElement: form,
+            controller,
+            submitter,
+            cancel: () => {
+                isCancelled = true;
+            }
+        });
+        if (isCancelled)
+            return;
+        const result = store.kit.forms.result ?? { type: "success", status: 200 };
+        const update = async (options = {}) => {
+            if (result.type === "success") {
+                if (options.reset !== false)
+                    form.reset();
+                // a success loads the page's data again, as SvelteKit's does, unless told not to
+                if (options.invalidateAll !== false && options.refreshAll !== false)
+                    await store.reload();
+            }
+            await applied(store, result);
+        };
+        if (typeof after === "function")
+            await after({ action, formData, formElement: form, result, update });
+        else
+            await update();
+    };
+    const listener = (event) => {
+        void onSubmit(event);
+    };
+    form.addEventListener("submit", listener);
+    return {
+        destroy: () => form.removeEventListener("submit", listener)
+    };
+};

package/dist/src/app/manifest.d.ts

@@ -0,0 +1,21 @@
+/**
+ * `$app/manifest` in a catalogue (SvelteKit 3): the project's routes, from `src/routes`, and its static files, from
+ * `static`. A catalogue builds no app, so nothing is immutable or prerendered.
+ *
+ * @module
+ */
+import { type AppRoute } from "../appSettings.ts";
+/** The app's built files: none, as a catalogue builds no app. */
+export declare const immutable: readonly {
+    readonly path: string;
+}[];
+/** The project's static files. */
+export declare const assets: readonly {
+    readonly path: string;
+}[];
+/** The prerendered pages: none. */
+export declare const prerendered: readonly {
+    readonly path: string;
+}[];
+/** The project's routes, with whether each has a page and an endpoint. */
+export declare const routes: readonly AppRoute[];

package/dist/src/app/manifest.js

@@ -0,0 +1,17 @@
+/**
+ * `$app/manifest` in a catalogue (SvelteKit 3): the project's routes, from `src/routes`, and its static files, from
+ * `static`. A catalogue builds no app, so nothing is immutable or prerendered.
+ *
+ * @module
+ */
+import { appSettings } from "../appSettings.js";
+/** The app's built files: none, as a catalogue builds no app. */
+export const immutable = [];
+/** The project's static files. */
+export const assets = appSettings().staticFiles.map((path) => ({
+    path
+}));
+/** The prerendered pages: none. */
+export const prerendered = [];
+/** The project's routes, with whether each has a page and an endpoint. */
+export const routes = appSettings().routes;

package/dist/src/app/navigation.d.ts

@@ -0,0 +1,97 @@
+import type { KitNavigation } from "../kitParameters.ts";
+import { type BeforeNavigation } from "../kitStore.ts";
+/**
+ * `goto`'s options: the new page's state is read; the others (`replaceState`, `noScroll`, `keepFocus`…) are kept for
+ * the call's record, since a story's page has no history, scroll or focus of its own to keep.
+ */
+export type GotoOptions = {
+    /** The new page's state. */
+    readonly state?: Readonly<Record<string, unknown>>;
+    /** Any of SvelteKit's other options. */
+    readonly [option: string]: unknown;
+};
+/** What `preloadData` resolves with: the data the story's loads give the href, or what they threw. */
+export type PreloadResult = {
+    /** The loads ran, or there are none. */
+    readonly type: "loaded";
+    /** The status: 200. */
+    readonly status: number;
+    /** The data. */
+    readonly data: Readonly<Record<string, unknown>>;
+} | {
+    /** A load threw. */
+    readonly type: "error";
+    /** What it threw. */
+    readonly error: unknown;
+};
+/**
+ * Goes to an address, as a story's page: its route, params and data follow, the navigation callbacks run.
+ *
+ * @param url - where to go, from the page's address.
+ * @param options - the new page's state; the page's data is loaded again at every move.
+ * @returns resolves once the page moved; rejects for an address outside the app, as SvelteKit does.
+ */
+export declare const goto: (url: string | URL, options?: GotoOptions) => Promise<void>;
+/**
+ * Loads the page's data again, as when something it depends on changed.
+ *
+ * @param resource - what changed: an address, a dependency's name, or a test of an address.
+ */
+export declare const invalidate: (resource: string | URL | ((url: URL) => boolean)) => Promise<void>;
+/** Loads the page's data again (SvelteKit 2). */
+export declare const invalidateAll: () => Promise<void>;
+/** Loads the page's data again, keeping its state (SvelteKit 3). */
+export declare const refreshAll: () => Promise<void>;
+/**
+ * Loads an address's data without going there.
+ *
+ * @param href - the address.
+ */
+export declare const preloadData: (href: string) => Promise<PreloadResult>;
+/**
+ * Loads a route's code: a story's code is loaded already.
+ *
+ * @param pathnames - the routes.
+ */
+export declare const preloadCode: (...pathnames: readonly string[]) => Promise<void>;
+/**
+ * Sets the page's state without a navigation (shallow routing).
+ *
+ * @param url - the address the state belongs to; recorded.
+ * @param state - the page's new state.
+ */
+export declare const pushState: (url: string | URL, state: Readonly<Record<string, unknown>>) => void;
+/**
+ * Replaces the page's state without a navigation (shallow routing).
+ *
+ * @param url - the address the state belongs to; recorded.
+ * @param state - the page's new state.
+ */
+export declare const replaceState: (url: string | URL, state: Readonly<Record<string, unknown>>) => void;
+/** Leaves the scroll as it is after a navigation: a story's page never scrolls on its own. */
+export declare const disableScrollHandling: () => void;
+/**
+ * Captures and restores a component's state across the history (SvelteKit 3): a story's history is its own, so there
+ * is nothing to restore.
+ */
+export declare const snapshot: () => void;
+/**
+ * Runs a callback when the component is drawn, with the page's first navigation, and after every navigation of the
+ * story's page. Called while a component is set up.
+ *
+ * @param callback - the callback.
+ */
+export declare const afterNavigate: (callback: (navigation: KitNavigation) => void) => void;
+/**
+ * Runs a callback before every navigation of the story's page, which it may cancel. Called while a component is set up.
+ *
+ * @param callback - the callback.
+ */
+export declare const beforeNavigate: (callback: (navigation: BeforeNavigation) => void) => void;
+/**
+ * Runs a callback as every navigation of the story's page starts; a function it returns runs once it is done. Called
+ * while a component is set up.
+ *
+ * @param callback - the callback.
+ */
+export declare const onNavigate: (callback: (navigation: KitNavigation) => unknown) => void;