@jwcarman/roux-web 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,201 @@
+Apache License
+Version 2.0, January 2004
+http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+   "License" shall mean the terms and conditions for use, reproduction,
+   and distribution as defined by Sections 1 through 9 of this document.
+
+   "Licensor" shall mean the copyright owner or entity authorized by
+   the copyright owner that is granting the License.
+
+   "Legal Entity" shall mean the union of the acting entity and all
+   other entities that control, are controlled by, or are under common
+   control with that entity. For the purposes of this definition,
+   "control" means (i) the power, direct or indirect, to cause the
+   direction or management of such entity, whether by contract or
+   otherwise, or (ii) ownership of fifty percent (50%) or more of the
+   outstanding shares, or (iii) beneficial ownership of such entity.
+
+   "You" (or "Your") shall mean an individual or Legal Entity
+   exercising permissions granted by this License.
+
+   "Source" form shall mean the preferred form for making modifications,
+   including but not limited to software source code, documentation
+   source, and configuration files.
+
+   "Object" form shall mean any form resulting from mechanical
+   transformation or translation of a Source form, including but
+   not limited to compiled object code, generated documentation,
+   and conversions to other media types.
+
+   "Work" shall mean the work of authorship, whether in Source or
+   Object form, made available under the License, as indicated by a
+   copyright notice that is included in or attached to the work
+   (an example is provided in the Appendix below).
+
+   "Derivative Works" shall mean any work, whether in Source or Object
+   form, that is based on (or derived from) the Work and for which the
+   editorial revisions, annotations, elaborations, or other modifications
+   represent, as a whole, an original work of authorship. For the purposes
+   of this License, Derivative Works shall not include works that remain
+   separable from, or merely link (or bind by name) to the interfaces of,
+   the Work and Derivative Works thereof.
+
+   "Contribution" shall mean any work of authorship, including
+   the original version of the Work and any modifications or additions
+   to that Work or Derivative Works thereof, that is intentionally
+   submitted to Licensor for inclusion in the Work by the copyright owner
+   or by an individual or Legal Entity authorized to submit on behalf of
+   the copyright owner. For the purposes of this definition, "submitted"
+   means any form of electronic, verbal, or written communication sent
+   to the Licensor or its representatives, including but not limited to
+   communication on electronic mailing lists, source code control systems,
+   and issue tracking systems that are managed by, or on behalf of, the
+   Licensor for the purpose of discussing and improving the Work, but
+   excluding communication that is conspicuously marked or otherwise
+   designated in writing by the copyright owner as "Not a Contribution."
+
+   "Contributor" shall mean Licensor and any individual or Legal Entity
+   on behalf of whom a Contribution has been received by Licensor and
+   subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   copyright license to reproduce, prepare Derivative Works of,
+   publicly display, publicly perform, sublicense, and distribute the
+   Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+   this License, each Contributor hereby grants to You a perpetual,
+   worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+   (except as stated in this section) patent license to make, have made,
+   use, offer to sell, sell, import, and otherwise transfer the Work,
+   where such license applies only to those patent claims licensable
+   by such Contributor that are necessarily infringed by their
+   Contribution(s) alone or by combination of their Contribution(s)
+   with the Work to which such Contribution(s) was submitted. If You
+   institute patent litigation against any entity (including a
+   cross-claim or counterclaim in a lawsuit) alleging that the Work
+   or a Contribution incorporated within the Work constitutes direct
+   or contributory patent infringement, then any patent licenses
+   granted to You under this License for that Work shall terminate
+   as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+   Work or Derivative Works thereof in any medium, with or without
+   modifications, and in Source or Object form, provided that You
+   meet the following conditions:
+
+   (a) You must give any other recipients of the Work or
+       Derivative Works a copy of this License; and
+
+   (b) You must cause any modified files to carry prominent notices
+       stating that You changed the files; and
+
+   (c) You must retain, in the Source form of any Derivative Works
+       that You distribute, all copyright, patent, trademark, and
+       attribution notices from the Source form of the Work,
+       excluding those notices that do not pertain to any part of
+       the Derivative Works; and
+
+   (d) If the Work includes a "NOTICE" text file as part of its
+       distribution, then any Derivative Works that You distribute must
+       include a readable copy of the attribution notices contained
+       within such NOTICE file, excluding those notices that do not
+       pertain to any part of the Derivative Works, in at least one
+       of the following places: within a NOTICE text file distributed
+       as part of the Derivative Works; within the Source form or
+       documentation, if provided along with the Derivative Works; or,
+       within a display generated by the Derivative Works, if and
+       wherever such third-party notices normally appear. The contents
+       of the NOTICE file are for informational purposes only and
+       do not modify the License. You may add Your own attribution
+       notices within Derivative Works that You distribute, alongside
+       or as an addendum to the NOTICE text from the Work, provided
+       that such additional attribution notices cannot be construed
+       as modifying the License.
+
+   You may add Your own copyright statement to Your modifications and
+   may provide additional or different license terms and conditions
+   for use, reproduction, or distribution of Your modifications, or
+   for any such Derivative Works as a whole, provided Your use,
+   reproduction, and distribution of the Work otherwise complies with
+   the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+   any Contribution intentionally submitted for inclusion in the Work
+   by You to the Licensor shall be under the terms and conditions of
+   this License, without any additional terms or conditions.
+   Notwithstanding the above, nothing herein shall supersede or modify
+   the terms of any separate license agreement you may have executed
+   with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+   names, trademarks, service marks, or product names of the Licensor,
+   except as required for reasonable and customary use in describing the
+   origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+   agreed to in writing, Licensor provides the Work (and each
+   Contributor provides its Contributions) on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+   implied, including, without limitation, any warranties or conditions
+   of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+   PARTICULAR PURPOSE. You are solely responsible for determining the
+   appropriateness of using or redistributing the Work and assume any
+   risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+   whether in tort (including negligence), contract, or otherwise,
+   unless required by applicable law (such as deliberate and grossly
+   negligent acts) or agreed to in writing, shall any Contributor be
+   liable to You for damages, including any direct, indirect, special,
+   incidental, or consequential damages of any character arising as a
+   result of this License or out of the use or inability to use the
+   Work (including but not limited to damages for loss of goodwill,
+   work stoppage, computer failure or malfunction, or any and all
+   other commercial damages or losses), even if such Contributor
+   has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+   the Work or Derivative Works thereof, You may choose to offer,
+   and charge a fee for, acceptance of support, warranty, indemnity,
+   or other liability obligations and/or rights consistent with this
+   License. However, in accepting such obligations, You may act only
+   on Your own behalf and on Your sole responsibility, not on behalf
+   of any other Contributor, and only if You agree to indemnify,
+   defend, and hold each Contributor harmless for any liability
+   incurred by, or claims asserted against, such Contributor by reason
+   of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+   To apply the Apache License to your work, attach the following
+   boilerplate notice, with the fields enclosed by brackets "[]"
+   replaced with your own identifying information. (Don't include
+   the brackets!)  The text should be enclosed in the appropriate
+   comment syntax for the file format. We also recommend that a
+   file or class name and description of purpose be included on the
+   same "printed page" as the copyright notice for easier
+   identification within third-party archives.
+
+Copyright 2026 James Carman
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -1,3 +1,22 @@
-# Temporary Holding Version
+# @jwcarman/roux-web
 
-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.
+The web half of [roux](https://github.com/jwcarman/roux): the React plumbing a roux application needs, written
+once. It is ESM-only and has one subpath per concern.
+
+## Subpaths
+
+- `@jwcarman/roux-web/problem`: types and helpers for RFC 9457 Problem Details.
+- `@jwcarman/roux-web/api`: the API client, server actions, and error notification.
+- `@jwcarman/roux-web/paging`: paging types and helpers.
+- `@jwcarman/roux-web/table`: a TanStack Table wrapper driven by a query.
+- `@jwcarman/roux-web/feedback`: toasts, confirmation dialogs and error messages.
+- `@jwcarman/roux-web/form`: TanStack Form fields and dialogs.
+
+## Peer dependencies
+
+The app supplies `@chakra-ui/react`, `@emotion/react`, `@tanstack/react-form`, `@tanstack/react-query`,
+`@tanstack/react-table`, `react` and `react-icons`.
+
+See the [repository README](https://github.com/jwcarman/roux#readme) for the Java modules and how to use roux.
+
+Licensed under the Apache License 2.0.

package/dist/api/client.d.ts

@@ -0,0 +1,17 @@
+import { type Problem } from "../problem/problem";
+export declare class ApiError extends Error {
+    readonly status: number;
+    readonly problem: Problem;
+    constructor(status: number, problem?: Problem);
+}
+/** True when the error is an API call that failed because the session is gone. */
+export declare function isSessionLost(error: unknown): boolean;
+/**
+ * Calls the listener whenever an `/api/**` call (under the configured `sessionPathPrefix`) answers 401: the session expired, was signed out
+ * elsewhere, or lost the credential it signed in with. The session provider listens and refreshes,
+ * which sends the user to sign in; pages need not handle it. Returns the unsubscribe function.
+ */
+export declare function onSessionLost(listener: () => void): () => void;
+export declare function get(path: string): Promise<Response>;
+export declare function send(method: "POST" | "PUT" | "DELETE", path: string, body?: unknown): Promise<Response>;
+export declare function getJson<T>(path: string): Promise<T>;

package/dist/api/client.js

@@ -0,0 +1,57 @@
+import { problemOf as e } from "../problem/problem.js";
+import { apiSettings as t } from "./config.js";
+// src/api/client.ts
+var n = class extends Error {
+	status;
+	problem;
+	constructor(e, t = {
+		type: "about:blank",
+		title: "",
+		status: e
+	}) {
+		super(t.detail ?? `Request failed with status ${e}`), this.status = e, this.problem = t;
+	}
+};
+function r(e) {
+	return e instanceof n && e.status === 401;
+}
+var i = /* @__PURE__ */ new Set();
+function a(e) {
+	return i.add(e), () => i.delete(e);
+}
+function o(e, n) {
+	return n.status === 401 && e.startsWith(t().sessionPathPrefix) && i.forEach((e) => e()), n;
+}
+function s() {
+	let e = document.cookie.split("; ").find((e) => e.startsWith("XSRF-TOKEN="));
+	return e === void 0 ? void 0 : decodeURIComponent(e.slice(11));
+}
+async function c() {
+	s() === void 0 && await fetch(t().csrfBootstrapPath, { credentials: "same-origin" });
+	let e = s();
+	return e === void 0 ? {} : { "X-XSRF-TOKEN": e };
+}
+async function l(e) {
+	return o(e, await fetch(e, {
+		credentials: "same-origin",
+		headers: { Accept: "application/json" }
+	}));
+}
+async function u(e, t, n) {
+	let r = {
+		Accept: "application/json",
+		...await c()
+	};
+	return n !== void 0 && (r["Content-Type"] = "application/json"), o(t, await fetch(t, {
+		method: e,
+		credentials: "same-origin",
+		headers: r,
+		body: JSON.stringify(n)
+	}));
+}
+async function d(t) {
+	let r = await l(t);
+	if (!r.ok) throw new n(r.status, await e(r));
+	return await r.json();
+}
+export { n as ApiError, l as get, d as getJson, r as isSessionLost, a as onSessionLost, u as send };

package/dist/api/config.d.ts

@@ -0,0 +1,11 @@
+/** Where the API client finds the CSRF token and which paths' 401s mean the session is lost. */
+export interface ApiSettings {
+    /** What the client calls, before its first write, to get the CSRF cookie. */
+    csrfBootstrapPath: string;
+    /** The paths whose 401 means the session is lost. */
+    sessionPathPrefix: string;
+}
+/** Changes the settings named in `settings`, keeping the others. */
+export declare function configureApi(settings: Partial<ApiSettings>): void;
+/** The settings in force: who's paths (`/who/me` and `/api/`) unless {@link configureApi} changed them. */
+export declare function apiSettings(): ApiSettings;

package/dist/api/config.js

@@ -0,0 +1,15 @@
+// src/api/config.ts
+var e = {
+	csrfBootstrapPath: "/who/me",
+	sessionPathPrefix: "/api/"
+};
+function t(t) {
+	e = {
+		...e,
+		...t
+	};
+}
+function n() {
+	return { ...e };
+}
+export { n as apiSettings, t as configureApi };

package/dist/api/index.d.ts

@@ -0,0 +1,3 @@
+export { ApiError, get, getJson, isSessionLost, onSessionLost, send } from "./client";
+export { apiSettings, configureApi, type ApiSettings } from "./config";
+export { useServerAction, type ServerAction, type ServerActionOptions } from "./serverAction";

package/dist/api/index.js

@@ -0,0 +1,4 @@
+import { ApiError as e, get as t, getJson as n, isSessionLost as r, onSessionLost as i, send as a } from "./client.js";
+import { apiSettings as o, configureApi as s } from "./config.js";
+import { useServerAction as c } from "./serverAction.js";
+export { e as ApiError, o as apiSettings, s as configureApi, t as get, n as getJson, r as isSessionLost, i as onSessionLost, a as send, c as useServerAction };

package/dist/api/serverAction.d.ts

@@ -0,0 +1,23 @@
+import { type QueryKey } from "@tanstack/react-query";
+export interface ServerActionOptions<Variables> {
+    /** Sends the request, such as `(skill) => send("POST", `/api/skills/${skill.id}/archive`)`. */
+    request: (variables: Variables) => Promise<Response>;
+    /** What the user reads when the server gives no reason, such as `Could not archive Oi-zuki`. */
+    failure: (variables: Variables) => string;
+    /** The queries to refresh once the request is answered, refused or not: a refusal often means the page is out of date. */
+    refreshes?: (variables: Variables) => QueryKey[];
+    /** Runs once the request succeeds, before the refresh: a success toast, closing a dialog. */
+    onSuccess?: (response: Response, variables: Variables) => void | Promise<void>;
+}
+export interface ServerAction<Variables> {
+    /** Sends the request; true when it succeeded. A refusal has already been shown to the user. */
+    run: (variables: Variables) => Promise<boolean>;
+    /** Whether a request is out, for a button's loading state. */
+    pending: boolean;
+}
+/**
+ * One request that changes something, as a TanStack Query mutation. A refusal tells the user the
+ * server's reason (its Problem Detail), or `failure` when it gave none; either way the queries
+ * named by `refreshes` are refreshed. For a form's submission, use `showProblem` instead.
+ */
+export declare function useServerAction<Variables = void>(options: ServerActionOptions<Variables>): ServerAction<Variables>;

package/dist/api/serverAction.js

@@ -0,0 +1,28 @@
+import { ApiError as e } from "./client.js";
+import { notify as t } from "../feedback/notify.js";
+import { problemOf as n } from "../problem/problem.js";
+import { useMutation as r, useQueryClient as i } from "@tanstack/react-query";
+// src/api/serverAction.ts
+function a(a) {
+	let o = i(), s = r({
+		mutationFn: async (t) => {
+			let r = await a.request(t);
+			if (!r.ok) throw new e(r.status, await n(r));
+			return r;
+		},
+		onSuccess: (e, t) => a.onSuccess?.(e, t),
+		onError: (n, r) => {
+			let i = a.failure(r);
+			n instanceof e ? t.problem(n.problem, i) : t.error(i);
+		},
+		onSettled: async (e, t, n) => {
+			let r = a.refreshes?.(n) ?? [];
+			await Promise.all(r.map((e) => o.invalidateQueries({ queryKey: e })));
+		}
+	});
+	return {
+		run: (e) => s.mutateAsync(e).then(() => !0, () => !1),
+		pending: s.isPending
+	};
+}
+export { a as useServerAction };

package/dist/feedback/ConfirmProvider.d.ts

@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+export interface ConfirmOptions {
+    title: string;
+    message: string;
+    /** The confirming button's label: the action, such as "Deactivate". */
+    confirmLabel: string;
+    /** Colors the confirming button as a destructive action. */
+    destructive?: boolean;
+}
+type Confirm = (options: ConfirmOptions) => Promise<boolean>;
+/**
+ * Asks before an action with consequences: `if (await confirm({...})) deactivate()`. Resolves true
+ * when confirmed, false on Cancel, Escape or closing. Cancel has focus first, so Enter alone never
+ * confirms.
+ */
+export declare function useConfirm(): Confirm;
+/** The app's one confirmation dialog, for `useConfirm`. */
+export declare function ConfirmProvider({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};

package/dist/feedback/ConfirmProvider.js

@@ -0,0 +1,50 @@
+import { Button as e, CloseButton as t, Dialog as n, Portal as r } from "@chakra-ui/react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+import { createContext as o, useContext as s, useRef as c, useState as l } from "react";
+// src/feedback/ConfirmProvider.tsx
+var u = "red", d = o(null);
+function f() {
+	let e = s(d);
+	if (e === null) throw Error("useConfirm outside ConfirmProvider");
+	return e;
+}
+function p({ children: o }) {
+	let [s, f] = l(null), p = c(null), [m] = l(() => (e) => new Promise((t) => f({
+		options: e,
+		resolve: t
+	})));
+	function h(e) {
+		s?.resolve(e), f(null);
+	}
+	return /* @__PURE__ */ a(d, {
+		value: m,
+		children: [o, /* @__PURE__ */ i(n.Root, {
+			role: "alertdialog",
+			open: s !== null,
+			onOpenChange: () => h(!1),
+			initialFocusEl: () => p.current,
+			children: /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(n.Backdrop, {}), /* @__PURE__ */ i(n.Positioner, { children: /* @__PURE__ */ a(n.Content, { children: [
+				/* @__PURE__ */ i(n.Header, { children: /* @__PURE__ */ i(n.Title, { children: s?.options.title }) }),
+				/* @__PURE__ */ i(n.Body, { children: s?.options.message }),
+				/* @__PURE__ */ a(n.Footer, { children: [/* @__PURE__ */ i(e, {
+					ref: p,
+					variant: "outline",
+					onClick: () => h(!1),
+					children: "Cancel"
+				}), /* @__PURE__ */ i(e, {
+					colorPalette: s?.options.destructive ? u : void 0,
+					onClick: () => h(!0),
+					children: s?.options.confirmLabel
+				})] }),
+				/* @__PURE__ */ i(n.CloseTrigger, {
+					asChild: !0,
+					children: /* @__PURE__ */ i(t, {
+						size: "sm",
+						"aria-label": "Close"
+					})
+				})
+			] }) })] })
+		})]
+	});
+}
+export { p as ConfirmProvider, f as useConfirm };

package/dist/feedback/ErrorMessage.d.ts

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+export interface ErrorMessageProps {
+    title?: string;
+    children: ReactNode;
+}
+/** An error alert (`role="alert"`), announced when it appears. */
+export declare function ErrorMessage({ title, children }: ErrorMessageProps): import("react").JSX.Element;

package/dist/feedback/ErrorMessage.js

@@ -0,0 +1,11 @@
+import { Alert as e } from "@chakra-ui/react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+// src/feedback/ErrorMessage.tsx
+function r({ title: r, children: i }) {
+	return /* @__PURE__ */ n(e.Root, {
+		status: "error",
+		role: "alert",
+		children: [/* @__PURE__ */ t(e.Indicator, {}), /* @__PURE__ */ n(e.Content, { children: [r && /* @__PURE__ */ t(e.Title, { children: r }), /* @__PURE__ */ t(e.Description, { children: i })] })]
+	});
+}
+export { r as ErrorMessage };

package/dist/feedback/index.d.ts

@@ -0,0 +1,4 @@
+export { ConfirmProvider, useConfirm, type ConfirmOptions } from "./ConfirmProvider";
+export { ErrorMessage, type ErrorMessageProps } from "./ErrorMessage";
+export { notify } from "./notify";
+export { Toaster, toaster } from "./toaster";

package/dist/feedback/index.js

@@ -0,0 +1,5 @@
+import { ConfirmProvider as e, useConfirm as t } from "./ConfirmProvider.js";
+import { ErrorMessage as n } from "./ErrorMessage.js";
+import { notify as r } from "./notify.js";
+import { Toaster as i, toaster as a } from "./toaster.js";
+export { e as ConfirmProvider, n as ErrorMessage, i as Toaster, r as notify, a as toaster, t as useConfirm };

package/dist/feedback/notify.d.ts

@@ -0,0 +1,16 @@
+import type { Problem } from "../problem";
+/**
+ * Tells the user how an action went: `notify.success("Invitation sent")`,
+ * `notify.error("Couldn't save", detail)`. For the outcome of an action; a field's mistake stays under
+ * the field.
+ */
+export declare const notify: {
+    /** `action` adds a button to the toast, such as Undo. */
+    success(title: string, action?: {
+        label: string;
+        onClick: () => void;
+    }): void;
+    error(title: string, detail?: string): void;
+    /** A failed request: the problem's detail, or `fallback`; a server error adds its reference. */
+    problem(problem: Problem, fallback: string): void;
+};

package/dist/feedback/notify.js

@@ -0,0 +1,27 @@
+import { toaster as e } from "./toaster.js";
+// src/feedback/notify.ts
+var t = {
+	success(t, n) {
+		e.create({
+			type: "success",
+			title: t,
+			action: n
+		});
+	},
+	error(t, n) {
+		e.create({
+			type: "error",
+			title: t,
+			description: n
+		});
+	},
+	problem(t, n) {
+		let r = t.errorId === void 0 ? void 0 : `Reference: ${t.errorId}`;
+		e.create({
+			type: "error",
+			title: t.detail ?? n,
+			description: r
+		});
+	}
+};
+export { t as notify };

package/dist/feedback/toaster.d.ts

@@ -0,0 +1,7 @@
+/** The app's one toaster; show toasts through `notify`, not this directly. */
+export declare const toaster: import("@ark-ui/react").CreateToasterReturn<import("react").ReactNode>;
+/**
+ * Where toasts appear, mounted once beside the app. A failure is an alert, announced at once; any
+ * other toast is a status, announced when the reader is idle.
+ */
+export declare function Toaster(): import("react").JSX.Element;

package/dist/feedback/toaster.js

@@ -0,0 +1,29 @@
+import { Portal as e, Stack as t, Toast as n, Toaster as r, createToaster as i } from "@chakra-ui/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+// src/feedback/toaster.tsx
+var s = i({
+	placement: "bottom-end",
+	pauseOnPageIdle: !0
+});
+function c() {
+	return /* @__PURE__ */ a(e, { children: /* @__PURE__ */ a(r, {
+		toaster: s,
+		insetInline: { mdDown: "4" },
+		children: (e) => /* @__PURE__ */ o(n.Root, {
+			width: { md: "sm" },
+			role: e.type === "error" ? "alert" : "status",
+			children: [
+				/* @__PURE__ */ a(n.Indicator, {}),
+				/* @__PURE__ */ o(t, {
+					gap: "1",
+					flex: "1",
+					maxWidth: "100%",
+					children: [e.title && /* @__PURE__ */ a(n.Title, { children: e.title }), e.description && /* @__PURE__ */ a(n.Description, { children: e.description })]
+				}),
+				e.action && /* @__PURE__ */ a(n.ActionTrigger, { children: e.action.label }),
+				/* @__PURE__ */ a(n.CloseTrigger, {})
+			]
+		})
+	}) });
+}
+export { c as Toaster, s as toaster };

package/dist/form/FormDialog.d.ts

@@ -0,0 +1,34 @@
+import { type ComponentType, type ReactElement, type ReactNode } from "react";
+/** What FormDialog needs of a `useAppForm` form. */
+interface DialogForm {
+    AppForm: ComponentType<{
+        children?: ReactNode;
+    }>;
+    Form: ComponentType<{
+        children: ReactNode;
+    }>;
+    SubmitButton: ComponentType<{
+        children?: ReactNode;
+    }>;
+    reset: () => void;
+}
+export interface FormDialogProps {
+    /** The caller's `useAppForm` form; its `onSubmit` saves, and closes the dialog on success. */
+    form: DialogForm;
+    title: string;
+    /** The button that opens the dialog; focus returns to it when the dialog closes. */
+    trigger: ReactElement;
+    submitLabel: string;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    /** The form's fields. */
+    children: ReactNode;
+}
+/**
+ * A form in a dialog: create or edit something without leaving the page. The submit button sits in
+ * the footer beside Cancel; Escape, Cancel and the close button close it; it opens empty each time.
+ * Errors stay in the open dialog; the caller closes it when the save succeeds, as the last step of
+ * `onSubmit`: the form is still submitting (its button disabled) until `onSubmit` returns.
+ */
+export declare function FormDialog({ form, title, trigger, submitLabel, open, onOpenChange, children }: FormDialogProps): import("react").JSX.Element;
+export {};

package/dist/form/FormDialog.js

@@ -0,0 +1,36 @@
+import { Button as e, CloseButton as t, Dialog as n, Portal as r, Stack as i } from "@chakra-ui/react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useEffect as s } from "react";
+// src/form/FormDialog.tsx
+function c({ form: c, title: l, trigger: u, submitLabel: d, open: f, onOpenChange: p, children: m }) {
+	return s(() => {
+		f || c.reset();
+	}, [f, c]), /* @__PURE__ */ o(n.Root, {
+		open: f,
+		onOpenChange: (e) => p(e.open),
+		children: [/* @__PURE__ */ a(n.Trigger, {
+			asChild: !0,
+			children: u
+		}), /* @__PURE__ */ o(r, { children: [/* @__PURE__ */ a(n.Backdrop, {}), /* @__PURE__ */ a(n.Positioner, { children: /* @__PURE__ */ o(n.Content, { children: [/* @__PURE__ */ a(c.AppForm, { children: /* @__PURE__ */ o(c.Form, { children: [
+			/* @__PURE__ */ a(n.Header, { children: /* @__PURE__ */ a(n.Title, { children: l }) }),
+			/* @__PURE__ */ a(n.Body, { children: /* @__PURE__ */ a(i, {
+				gap: "4",
+				children: m
+			}) }),
+			/* @__PURE__ */ o(n.Footer, { children: [/* @__PURE__ */ a(n.ActionTrigger, {
+				asChild: !0,
+				children: /* @__PURE__ */ a(e, {
+					variant: "outline",
+					children: "Cancel"
+				})
+			}), /* @__PURE__ */ a(c.SubmitButton, { children: d })] })
+		] }) }), /* @__PURE__ */ a(n.CloseTrigger, {
+			asChild: !0,
+			children: /* @__PURE__ */ a(t, {
+				size: "sm",
+				"aria-label": "Close"
+			})
+		})] }) })] })]
+	});
+}
+export { c as FormDialog };