rei-kit 0.14.1 → 0.16.0

package/dist/app.js

@@ -1,11 +1,163 @@
-import { i as isThemePreference, s as useTheme, t as BaseSheet_default } from "./BaseSheet-CLIhXDwe.js";
+import { _ as toRedirectPath, d as isThemePreference, g as safeRedirect, h as tapFeedback, i as BaseInput_default, l as useOnline, m as useTheme, n as BaseCheckbox_default, o as BaseAlert_default, r as BaseSheet_default, s as useToast, t as GoogleButton_default } from "./GoogleButton-BxsrxZdX.js";
 import { n as _plugin_vue_export_helper_default, r as BaseButton_default, t as SettingsRow_default } from "./SettingsRow-MnVleeTR.js";
-import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, onUnmounted, openBlock, readonly, ref, renderList, renderSlot, toDisplayString, unref, useModel, watch, withCtx } from "vue";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, onUnmounted, openBlock, reactive, readonly, ref, renderList, renderSlot, toDisplayString, unref, useModel, watch, withCtx, withModifiers } from "vue";
 import { Check, Languages } from "lucide-vue-next";
+//#region src/app/AuthForm.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$6 = { class: "flex flex-col gap-5" };
+var _hoisted_2$5 = {
+	key: 0,
+	class: "flex items-center gap-3"
+};
+var _hoisted_3$5 = { class: "text-ink-soft text-xs" };
+//#endregion
+//#region src/app/AuthForm.vue
+var AuthForm_default = /* @__PURE__ */ defineComponent({
+	__name: "AuthForm",
+	props: /*@__PURE__*/ mergeModels({
+		mode: {},
+		labels: {},
+		busy: {
+			type: Boolean,
+			default: false
+		},
+		error: { default: "" },
+		validate: { type: Function }
+	}, {
+		"remember": {
+			type: Boolean,
+			default: true
+		},
+		"rememberModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels(["submit", "google"], ["update:remember"]),
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		const remember = useModel(__props, "remember");
+		/**
+		* Remember-me belongs on sign-in, and only where the app has words for it.
+		*
+		* A brand-new account has nothing to remember, so offering the choice on
+		* sign-up is a question with one answer. Keyed off the label rather than a
+		* `showRemember` flag because Vue casts an absent Boolean prop to `false`,
+		* which makes "not passed" and "passed false" the same value — a flag that
+		* cannot express its own default is worse than no flag.
+		*/
+		const wantsRemember = computed(() => __props.mode === "signIn" && Boolean(__props.labels.rememberMe));
+		const values = reactive({
+			email: "",
+			password: "",
+			confirmPassword: ""
+		});
+		const errors = ref({});
+		watch(() => __props.mode, () => {
+			errors.value = {};
+		});
+		function submit() {
+			const payload = {
+				email: values.email,
+				password: values.password,
+				confirmPassword: __props.mode === "signUp" ? values.confirmPassword : ""
+			};
+			const found = __props.validate?.(payload) ?? null;
+			errors.value = found ?? {};
+			if (found) return;
+			emit("submit", payload);
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$6, [
+				renderSlot(_ctx.$slots, "header"),
+				renderSlot(_ctx.$slots, "oauth", {}, () => [__props.labels.google ? (openBlock(), createBlock(GoogleButton_default, {
+					key: 0,
+					label: __props.labels.google,
+					disabled: __props.busy,
+					onClick: _cache[0] || (_cache[0] = ($event) => emit("google"))
+				}, null, 8, ["label", "disabled"])) : createCommentVNode("", true)]),
+				__props.labels.or ? (openBlock(), createElementBlock("div", _hoisted_2$5, [
+					_cache[5] || (_cache[5] = createElementVNode("span", { class: "bg-hair h-px flex-1" }, null, -1)),
+					createElementVNode("span", _hoisted_3$5, toDisplayString(__props.labels.or), 1),
+					_cache[6] || (_cache[6] = createElementVNode("span", { class: "bg-hair h-px flex-1" }, null, -1))
+				])) : createCommentVNode("", true),
+				createElementVNode("form", {
+					novalidate: "",
+					class: "flex flex-col gap-4",
+					onSubmit: withModifiers(submit, ["prevent"])
+				}, [
+					createVNode(BaseInput_default, {
+						modelValue: values.email,
+						"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => values.email = $event),
+						type: "email",
+						label: __props.labels.email,
+						error: errors.value["email"],
+						placeholder: __props.labels.emailPlaceholder,
+						autocomplete: "email"
+					}, null, 8, [
+						"modelValue",
+						"label",
+						"error",
+						"placeholder"
+					]),
+					createVNode(BaseInput_default, {
+						modelValue: values.password,
+						"onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => values.password = $event),
+						type: "password",
+						label: __props.labels.password,
+						error: errors.value["password"],
+						hint: __props.mode === "signUp" ? __props.labels.passwordHint : void 0,
+						autocomplete: __props.mode === "signUp" ? "new-password" : "current-password"
+					}, null, 8, [
+						"modelValue",
+						"label",
+						"error",
+						"hint",
+						"autocomplete"
+					]),
+					__props.mode === "signUp" ? (openBlock(), createBlock(BaseInput_default, {
+						key: 0,
+						modelValue: values.confirmPassword,
+						"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => values.confirmPassword = $event),
+						type: "password",
+						label: __props.labels.confirmPassword,
+						error: errors.value["confirmPassword"],
+						autocomplete: "new-password"
+					}, null, 8, [
+						"modelValue",
+						"label",
+						"error"
+					])) : createCommentVNode("", true),
+					wantsRemember.value ? (openBlock(), createBlock(BaseCheckbox_default, {
+						key: 1,
+						modelValue: remember.value,
+						"onUpdate:modelValue": _cache[4] || (_cache[4] = ($event) => remember.value = $event),
+						size: "sm",
+						label: __props.labels.rememberMe ?? ""
+					}, null, 8, ["modelValue", "label"])) : createCommentVNode("", true),
+					__props.error ? (openBlock(), createBlock(BaseAlert_default, {
+						key: 2,
+						tone: "danger",
+						assertive: ""
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.error), 1)]),
+						_: 1
+					})) : createCommentVNode("", true),
+					createVNode(BaseButton_default, {
+						type: "submit",
+						class: "w-full",
+						loading: __props.busy
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.busy && __props.labels.submitBusy || __props.labels.submit), 1)]),
+						_: 1
+					}, 8, ["loading"])
+				], 32),
+				renderSlot(_ctx.$slots, "foot")
+			]);
+		};
+	}
+});
+//#endregion
 //#region src/app/AuthShell.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$2 = { class: "flex min-h-0 w-full flex-1 flex-col items-center gap-8 overflow-y-auto px-6 pt-10 pb-10" };
-var _hoisted_2$2 = { class: "w-full max-w-[22rem]" };
-var _hoisted_3$2 = {
+var _hoisted_1$5 = { class: "flex min-h-0 w-full flex-1 flex-col items-center gap-8 overflow-y-auto px-6 pt-10 pb-10" };
+var _hoisted_2$4 = { class: "w-full max-w-[22rem]" };
+var _hoisted_3$4 = {
 	key: 0,
 	class: "mt-auto"
 };
@@ -27,19 +179,48 @@ var AuthShell_default = /* @__PURE__ */ defineComponent({
 		* somebody who does not read the browser's language cannot get to one.
 		*/
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$2, [
+			return openBlock(), createElementBlock("div", _hoisted_1$5, [
 				renderSlot(_ctx.$slots, "brand"),
-				createElementVNode("main", _hoisted_2$2, [renderSlot(_ctx.$slots, "default")]),
-				_ctx.$slots.foot ? (openBlock(), createElementBlock("div", _hoisted_3$2, [renderSlot(_ctx.$slots, "foot")])) : createCommentVNode("", true)
+				createElementVNode("main", _hoisted_2$4, [renderSlot(_ctx.$slots, "default")]),
+				_ctx.$slots.foot ? (openBlock(), createElementBlock("div", _hoisted_3$4, [renderSlot(_ctx.$slots, "foot")])) : createCommentVNode("", true)
 			]);
 		};
 	}
 });
 //#endregion
+//#region src/app/FabButton.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$4 = { class: "rk-fab-slot" };
+var _hoisted_2$3 = {
+	class: "rk-fab-icon",
+	"aria-hidden": "true"
+};
+var _hoisted_3$3 = { class: "rk-fab-label" };
+//#endregion
+//#region src/app/FabButton.vue
+var FabButton_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "FabButton",
+	props: { label: {} },
+	emits: ["click"],
+	setup(__props, { emit: __emit }) {
+		const emit = __emit;
+		function press() {
+			tapFeedback();
+			emit("click");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$4, [createElementVNode("button", {
+				type: "button",
+				class: "rk-fab",
+				onClick: press
+			}, [createElementVNode("span", _hoisted_2$3, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), createElementVNode("span", _hoisted_3$3, toDisplayString(__props.label), 1)])]);
+		};
+	}
+}), [["__scopeId", "data-v-8f94cb0b"]]);
+//#endregion
 //#region src/app/LocaleSheet.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$1 = { class: "text-ink-soft text-sm" };
-var _hoisted_2$1 = { class: "flex flex-col" };
-var _hoisted_3$1 = { class: "flex-1 text-base" };
+var _hoisted_1$3 = { class: "text-ink-soft text-sm" };
+var _hoisted_2$2 = { class: "flex flex-col" };
+var _hoisted_3$2 = { class: "flex-1 text-base" };
 //#endregion
 //#region src/app/LocaleSheet.vue
 var LocaleSheet_default = /* @__PURE__ */ defineComponent({
@@ -75,7 +256,7 @@ var LocaleSheet_default = /* @__PURE__ */ defineComponent({
 				interactive: "",
 				onClick: _cache[0] || (_cache[0] = ($event) => open.value = true)
 			}, {
-				default: withCtx(() => [createElementVNode("span", _hoisted_1$1, toDisplayString(current.value), 1)]),
+				default: withCtx(() => [createElementVNode("span", _hoisted_1$3, toDisplayString(current.value), 1)]),
 				_: 1
 			}, 8, [
 				"label",
@@ -88,14 +269,14 @@ var LocaleSheet_default = /* @__PURE__ */ defineComponent({
 				subtitle: __props.hint,
 				"close-label": __props.closeLabel
 			}, {
-				default: withCtx(() => [createElementVNode("ul", _hoisted_2$1, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
+				default: withCtx(() => [createElementVNode("ul", _hoisted_2$2, [(openBlock(true), createElementBlock(Fragment, null, renderList(rows.value, (row) => {
 					return openBlock(), createElementBlock("li", { key: row.value }, [createVNode(BaseButton_default, {
 						variant: "row",
 						class: "rounded-xl",
 						pressed: model.value === row.value,
 						onClick: ($event) => select(row.value)
 					}, {
-						default: withCtx(() => [createElementVNode("span", _hoisted_3$1, toDisplayString(row.label), 1), model.value === row.value ? (openBlock(), createBlock(unref(Check), {
+						default: withCtx(() => [createElementVNode("span", _hoisted_3$2, toDisplayString(row.label), 1), model.value === row.value ? (openBlock(), createBlock(unref(Check), {
 							key: 0,
 							class: "text-primary size-5 shrink-0",
 							"aria-hidden": "true"
@@ -114,6 +295,81 @@ var LocaleSheet_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/app/OfflineBanner.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$2 = {
+	key: 0,
+	role: "status",
+	class: "rk-offline-banner"
+};
+//#endregion
+//#region src/app/OfflineBanner.vue
+var OfflineBanner_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "OfflineBanner",
+	props: { label: {} },
+	setup(__props) {
+		const isOnline = useOnline();
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, { name: "rk-offline" }, {
+				default: withCtx(() => [!unref(isOnline) ? (openBlock(), createElementBlock("p", _hoisted_1$2, toDisplayString(__props.label), 1)) : createCommentVNode("", true)]),
+				_: 1
+			});
+		};
+	}
+}), [["__scopeId", "data-v-0781b5b6"]]);
+//#endregion
+//#region src/app/TabShell.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1$1 = { class: "rk-screen" };
+var _hoisted_2$1 = {
+	key: 0,
+	class: "rk-screen-aside"
+};
+var _hoisted_3$1 = { class: "shell-frame rk-shell" };
+//#endregion
+//#region src/app/TabShell.vue
+var TabShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "TabShell",
+	setup(__props) {
+		/**
+		* The phone frame the whole app sits inside.
+		*
+		* On a phone this is invisible — the shell fills the screen and there is
+		* nothing around it. On a desktop it is the bordered, rounded card in the
+		* middle of a textured field, which is what makes a phone-shaped app look
+		* deliberate on a wide screen rather than stretched or abandoned.
+		*
+		* Both phone apps had this at 120 lines, differing in the product name, two
+		* colour variables and one hover colour. None of those is a reason to own a
+		* frame, so the colours are custom properties and the name is a slot.
+		*
+		* ## What stays in the app
+		*
+		* Which layout a route uses, and the `RouterView` inside it. That is the one
+		* part that genuinely differs — an app with no auth screens has no layout
+		* switch — and it is also the part that must stay in the app so a page that
+		* throws does not take the tab bar with it.
+		*
+		* @example
+		* ```vue
+		* <TabShell>
+		*   <template #aside><AppCredits /></template>
+		*   <template #chrome><UpdatePrompt /></template>
+		*
+		*   <component :is="layoutComponent">
+		*     <RouterView v-slot="{ Component, route }">
+		*       <Transition :name="tabTransition.name.value">
+		*         <component :is="Component" :key="route.path" :class="pageClass" />
+		*       </Transition>
+		*     </RouterView>
+		*   </component>
+		* </TabShell>
+		* ```
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1$1, [_ctx.$slots.aside ? (openBlock(), createElementBlock("aside", _hoisted_2$1, [renderSlot(_ctx.$slots, "aside", {}, void 0, true)])) : createCommentVNode("", true), createElementVNode("div", _hoisted_3$1, [renderSlot(_ctx.$slots, "chrome", {}, void 0, true), renderSlot(_ctx.$slots, "default", {}, void 0, true)])]);
+		};
+	}
+}), [["__scopeId", "data-v-f19fd72a"]]);
+//#endregion
 //#region src/app/TourShell.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = ["aria-label"];
 var _hoisted_2 = { class: "shell-frame md:rounded-shell bg-canvas relative flex flex-col overflow-hidden" };
@@ -251,6 +507,171 @@ var TourShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PU
 	}
 }), [["__scopeId", "data-v-1b9e7f4d"]]);
 //#endregion
+//#region src/app/guards.ts
+/**
+* The route guard three apps had written separately.
+*
+* It answers two questions and nothing else: may this visitor see this route,
+* and where do they go if not. Everything that differs between the apps — the
+* name of the login route, whether the return path travels as `redirect` or
+* `next`, whether a session has to be restored first — is an option, because
+* each of those is a decision about the app rather than about guarding.
+*
+* It does nothing while prerendering. Every prerendered route is public, the
+* server has no session to read, and a guard that redirected there would write
+* a login page into a file meant to be content.
+*
+* The return path goes through `toRedirectPath`, so an OAuth fragment is
+* dropped rather than copied into a query string the server will see.
+*
+* @example
+* ```ts
+* router.beforeEach(
+*   createAuthGuard({
+*     isAuthenticated: () => useAuthStore().isAuthenticated,
+*     signIn: { name: 'LoginView' },
+*   }),
+* )
+* ```
+*/
+function createAuthGuard(options) {
+	const { isAuthenticated, signIn, home, redirectQuery = "redirect", ready } = options;
+	return async (to) => {
+		if ({
+			"BASE_URL": "/",
+			"DEV": false,
+			"MODE": "production",
+			"PROD": true,
+			"SSR": false
+		}["SSR"]) return true;
+		await ready?.();
+		if (to.meta["requiresAuth"] && !isAuthenticated()) return {
+			...typeof signIn === "string" ? { path: signIn } : signIn,
+			query: { [redirectQuery]: toRedirectPath(to.fullPath) }
+		};
+		if (to.meta["guestOnly"] && isAuthenticated()) return home ?? safeRedirect(to.query[redirectQuery]);
+		return true;
+	};
+}
+/**
+* The document title, which a single-page app has to set for itself.
+*
+* An `afterEach` rather than a `beforeEach`: the title describes where the
+* visitor arrived, and a guard that can still cancel has not arrived anywhere.
+*
+* @example
+* ```ts
+* router.afterEach(createTitleGuard('Kakei'))  // "Ledger · Kakei"
+* ```
+*/
+function createTitleGuard(suffix, separator = "·") {
+	return (to) => {
+		const title = to.meta["title"];
+		document.title = title ? `${String(title)} ${separator} ${suffix}` : suffix;
+	};
+}
+//#endregion
+//#region src/app/query-defaults.ts
+/**
+* The cache settings two apps had picked independently and identically.
+*
+* Returned as a plain object rather than a built `QueryClient`, so the kit does
+* not depend on TanStack Query. An app that uses a different cache — or none —
+* pays nothing for this file, and the app keeps the client as its own
+* module-level singleton, which is what lets non-Vue code reach it (the auth
+* store calls `clear()` on sign-out).
+*
+* The numbers are not arbitrary and they are not TanStack's defaults:
+*
+* - `staleTime: 60_000` — the default is 0, which refetches on every mount. A
+*   phone app remounts a screen every time a tab is touched, so the default
+*   turns a tab bar into a network request per tap.
+* - `refetchOnWindowFocus` — left on. Coming back to a backgrounded phone app
+*   is exactly when the data is most likely to be stale.
+* - `retry: 2` on queries, `0` on mutations. Retrying a read is free; retrying
+*   a write that may already have landed is how a double charge happens.
+*
+* @example
+* ```ts
+* export const queryClient = new QueryClient({ defaultOptions: createQueryDefaults() })
+* ```
+*/
+function createQueryDefaults(overrides = {}) {
+	const { staleTime = 6e4, gcTime = 3e5, retry = 2 } = overrides;
+	return {
+		queries: {
+			staleTime,
+			gcTime,
+			refetchOnWindowFocus: true,
+			retry
+		},
+		mutations: { retry: 0 }
+	};
+}
+//#endregion
+//#region src/app/write-report.ts
+/**
+* Saying that a write happened.
+*
+* In one place so every mutation reports the same way. Both phone apps had
+* written this, and both had written it because before it existed none of their
+* mutations reported at all: a row was added, a row was deleted, and the only
+* evidence was that nothing had visibly broken.
+*
+* Deliberately generic. A message naming the thing that was saved reads better
+* once and worse every time after, and these are screens somebody uses dozens
+* of times in a sitting.
+*
+* Form validation does **not** come through here: a rejected field says so
+* beside itself, where the eye already is and where it stays until fixed. These
+* are for what has already happened.
+*
+* @example
+* ```ts
+* export const report = createWriteReport({
+*   saved: () => t('common.saved'),
+*   deleted: () => t('common.deleted'),
+*   failed: () => t('common.failed'),
+* })
+* ```
+*/
+function createWriteReport(messages) {
+	return {
+		saved: () => useToast().success(messages.saved()),
+		deleted: () => useToast().success(messages.deleted()),
+		failed: () => useToast().danger(messages.failed())
+	};
+}
+//#endregion
+//#region src/app/field-errors.ts
+/**
+* Field errors keyed by field name, or null when the values are valid.
+*
+* Zod's own error shape is a tree; a form needs one message per input, and
+* flattening it here keeps that reshaping out of every component that has a
+* form in it. The first issue per field wins — a field shows one message, and
+* the first is the one the reader can act on.
+*
+* Null rather than an empty object, so `if (errors)` is the guard and a caller
+* cannot accidentally treat "no errors" as a failure.
+*
+* @example
+* ```ts
+* const found = fieldErrors(signupSchema(), values)
+* if (found) return (errors.value = found)
+* ```
+*/
+function fieldErrors(schema, values) {
+	const result = schema.safeParse(values);
+	if (result.success) return null;
+	const errors = {};
+	for (const issue of result.error.issues) {
+		const field = String(issue.path[0] ?? "");
+		if (field && !errors[field]) errors[field] = issue.message;
+	}
+	return errors;
+}
+//#endregion
 //#region src/app/use-tab-transition.ts
 /**
 * Which way a tabbed app is moving.
@@ -289,6 +710,18 @@ function createTabTransition(order) {
 		/** Direction of the current tab change. Read by the route transition. */
 		direction: readonly(direction),
 		/**
+		* The `<Transition>` name for the current direction, ready to bind.
+		*
+		* Empty when there is nothing to slide, which is how a `<Transition>` is
+		* told to do nothing — an unnamed transition still runs a default `v-*`
+		* animation, so the empty string matters.
+		*
+		* Both phone apps derived this from `direction` in their `App.vue`, in the
+		* same three lines, and the names match the classes shipped in
+		* `rei-kit/shell/mobile.css`.
+		*/
+		name: computed(() => direction.value === "none" ? "" : `slide-${direction.value}`),
+		/**
 		* Resolves the direction for a navigation. Call once per route change.
 		*
 		* @param to - Tab being entered, if the route has one.
@@ -352,6 +785,6 @@ function useThemeSync(stored) {
 	}, { immediate: true });
 }
 //#endregion
-export { AuthShell_default as AuthShell, LocaleSheet_default as LocaleSheet, TourShell_default as TourShell, createTabTransition, useThemeSync };
+export { AuthForm_default as AuthForm, AuthShell_default as AuthShell, FabButton_default as FabButton, LocaleSheet_default as LocaleSheet, OfflineBanner_default as OfflineBanner, TabShell_default as TabShell, TourShell_default as TourShell, createAuthGuard, createQueryDefaults, createTabTransition, createTitleGuard, createWriteReport, fieldErrors, useThemeSync };
 
 //# sourceMappingURL=app.js.map