rei-kit 0.15.0 → 0.16.0

package/dist/app/index.d.ts

@@ -13,8 +13,17 @@
 export { default as AuthForm } from './AuthForm.vue';
 export type { AuthFormLabels, AuthFormValues } from './auth-form';
 export { default as AuthShell } from './AuthShell.vue';
+export { default as FabButton } from './FabButton.vue';
 export { default as LocaleSheet } from './LocaleSheet.vue';
+export { default as OfflineBanner } from './OfflineBanner.vue';
+export { default as TabShell } from './TabShell.vue';
 export { default as TourShell } from './TourShell.vue';
+export { createAuthGuard, createTitleGuard } from './guards';
+export type { AuthGuardOptions } from './guards';
+export { createQueryDefaults } from './query-defaults';
+export type { QueryDefaultsOverrides } from './query-defaults';
+export { createWriteReport } from './write-report';
+export type { WriteReport, WriteReportMessages } from './write-report';
 export { fieldErrors } from './field-errors';
 export type { SafeParsable } from './field-errors';
 export { createTabTransition } from './use-tab-transition';

package/dist/app/query-defaults.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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() })
+ * ```
+ */
+export declare function createQueryDefaults(overrides?: QueryDefaultsOverrides): {
+    queries: {
+        staleTime: number;
+        gcTime: number;
+        refetchOnWindowFocus: boolean;
+        retry: number;
+    };
+    mutations: {
+        retry: number;
+    };
+};
+export type QueryDefaultsOverrides = {
+    /** How long a result is served without refetching. Default 60s. */
+    staleTime?: number | undefined;
+    /** How long an unused result is kept before eviction. Default 5m. */
+    gcTime?: number | undefined;
+    /** Attempts for a failed *query*. Mutations are never retried. Default 2. */
+    retry?: number | undefined;
+};

package/dist/app/use-tab-transition.d.ts

@@ -33,6 +33,18 @@ export type SlideDirection = 'forward' | 'backward' | 'none';
 export declare function createTabTransition<K extends string>(order: readonly K[]): {
     /** Direction of the current tab change. Read by the route transition. */
     direction: Readonly<import('vue').Ref<SlideDirection, SlideDirection>>;
+    /**
+     * 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: import('vue').ComputedRef<string>;
     /**
      * Resolves the direction for a navigation. Call once per route change.
      *

package/dist/app/write-report.d.ts

@@ -0,0 +1,43 @@
+/**
+ * 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'),
+ * })
+ * ```
+ */
+export declare function createWriteReport(messages: WriteReportMessages): WriteReport;
+/**
+ * Functions, not strings.
+ *
+ * A string would be read once, when the report is built, and would then keep
+ * whichever language was active at that moment for the life of the app. Called
+ * per report, the wording follows a language switch.
+ */
+export type WriteReportMessages = {
+    saved: () => string;
+    deleted: () => string;
+    failed: () => string;
+};
+export type WriteReport = {
+    saved: () => void;
+    deleted: () => void;
+    failed: () => void;
+};

package/dist/app.js

@@ -1,14 +1,14 @@
-import { f as useTheme, i as BaseInput_default, l as isThemePreference, n as BaseCheckbox_default, o as BaseAlert_default, r as BaseSheet_default, t as GoogleButton_default } from "./GoogleButton-BQSsm0hp.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, 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$3 = { class: "flex flex-col gap-5" };
-var _hoisted_2$3 = {
+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$3 = { class: "text-ink-soft text-xs" };
+var _hoisted_3$5 = { class: "text-ink-soft text-xs" };
 //#endregion
 //#region src/app/AuthForm.vue
 var AuthForm_default = /* @__PURE__ */ defineComponent({
@@ -64,7 +64,7 @@ var AuthForm_default = /* @__PURE__ */ defineComponent({
 			emit("submit", payload);
 		}
 		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", _hoisted_1$3, [
+			return openBlock(), createElementBlock("div", _hoisted_1$6, [
 				renderSlot(_ctx.$slots, "header"),
 				renderSlot(_ctx.$slots, "oauth", {}, () => [__props.labels.google ? (openBlock(), createBlock(GoogleButton_default, {
 					key: 0,
@@ -72,9 +72,9 @@ var AuthForm_default = /* @__PURE__ */ defineComponent({
 					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$3, [
+				__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$3, toDisplayString(__props.labels.or), 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", {
@@ -155,9 +155,9 @@ var AuthForm_default = /* @__PURE__ */ defineComponent({
 });
 //#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"
 };
@@ -179,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({
@@ -227,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",
@@ -240,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"
@@ -266,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" };
@@ -403,6 +507,142 @@ 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.
@@ -470,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.
@@ -533,6 +785,6 @@ function useThemeSync(stored) {
 	}, { immediate: true });
 }
 //#endregion
-export { AuthForm_default as AuthForm, AuthShell_default as AuthShell, LocaleSheet_default as LocaleSheet, TourShell_default as TourShell, createTabTransition, fieldErrors, 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