rei-kit 0.13.0 → 0.14.0

package/dist/app.js

@@ -1,9 +1,11 @@
-import { a as useTheme, n as isThemePreference } from "./use-theme-_MnaDD5v.js";
-import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, readonly, ref, renderSlot, watch } from "vue";
+import { i as isThemePreference, s as useTheme, t as BaseSheet_default } from "./BaseSheet-CLIhXDwe.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 { Check, Languages } from "lucide-vue-next";
 //#region src/app/AuthShell.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = { 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 = { class: "w-full max-w-[22rem]" };
-var _hoisted_3 = {
+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 = {
 	key: 0,
 	class: "mt-auto"
 };
@@ -25,15 +27,230 @@ 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, [
+			return openBlock(), createElementBlock("div", _hoisted_1$2, [
 				renderSlot(_ctx.$slots, "brand"),
-				createElementVNode("main", _hoisted_2, [renderSlot(_ctx.$slots, "default")]),
-				_ctx.$slots.foot ? (openBlock(), createElementBlock("div", _hoisted_3, [renderSlot(_ctx.$slots, "foot")])) : createCommentVNode("", true)
+				createElementVNode("main", _hoisted_2$2, [renderSlot(_ctx.$slots, "default")]),
+				_ctx.$slots.foot ? (openBlock(), createElementBlock("div", _hoisted_3$2, [renderSlot(_ctx.$slots, "foot")])) : createCommentVNode("", true)
 			]);
 		};
 	}
 });
 //#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" };
+//#endregion
+//#region src/app/LocaleSheet.vue
+var LocaleSheet_default = /* @__PURE__ */ defineComponent({
+	__name: "LocaleSheet",
+	props: /*@__PURE__*/ mergeModels({
+		label: {},
+		hint: { default: "" },
+		systemLabel: {},
+		options: {},
+		closeLabel: { default: "" }
+	}, {
+		"modelValue": { required: true },
+		"modelModifiers": {}
+	}),
+	emits: ["update:modelValue"],
+	setup(__props) {
+		const model = useModel(__props, "modelValue");
+		const open = ref(false);
+		const rows = computed(() => [{
+			value: "system",
+			label: __props.systemLabel
+		}, ...__props.options]);
+		const current = computed(() => rows.value.find((row) => row.value === model.value)?.label ?? __props.systemLabel);
+		function select(value) {
+			model.value = value;
+			open.value = false;
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [createVNode(SettingsRow_default, {
+				label: __props.label,
+				description: __props.hint,
+				icon: unref(Languages),
+				interactive: "",
+				onClick: _cache[0] || (_cache[0] = ($event) => open.value = true)
+			}, {
+				default: withCtx(() => [createElementVNode("span", _hoisted_1$1, toDisplayString(current.value), 1)]),
+				_: 1
+			}, 8, [
+				"label",
+				"description",
+				"icon"
+			]), createVNode(BaseSheet_default, {
+				modelValue: open.value,
+				"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => open.value = $event),
+				title: __props.label,
+				subtitle: __props.hint,
+				"close-label": __props.closeLabel
+			}, {
+				default: withCtx(() => [createElementVNode("ul", _hoisted_2$1, [(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), {
+							key: 0,
+							class: "text-primary size-5 shrink-0",
+							"aria-hidden": "true"
+						})) : createCommentVNode("", true)]),
+						_: 2
+					}, 1032, ["pressed", "onClick"])]);
+				}), 128))])]),
+				_: 1
+			}, 8, [
+				"modelValue",
+				"title",
+				"subtitle",
+				"close-label"
+			])], 64);
+		};
+	}
+});
+//#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" };
+var _hoisted_3 = { class: "relative flex shrink-0 items-center justify-between gap-3 px-6 pt-6" };
+var _hoisted_4 = { class: "text-ink-soft text-xs font-semibold tabular-nums" };
+var _hoisted_5 = { class: "relative flex min-h-0 flex-1 flex-col justify-center overflow-y-auto px-6 py-6" };
+var _hoisted_6 = { class: "relative flex shrink-0 flex-col gap-4 px-6 pt-4 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]" };
+var _hoisted_7 = ["aria-label"];
+var _hoisted_8 = { class: "flex gap-2" };
+//#endregion
+//#region src/app/TourShell.vue
+var TourShell_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
+	__name: "TourShell",
+	props: /*@__PURE__*/ mergeModels({
+		index: {},
+		total: {},
+		dialogLabel: {},
+		skipLabel: {},
+		backLabel: {},
+		nextLabel: {},
+		lastLabel: {},
+		stepLabel: { type: Function },
+		teleportTo: { default: "body" }
+	}, {
+		"modelValue": {
+			type: Boolean,
+			required: true
+		},
+		"modelModifiers": {}
+	}),
+	emits: /*@__PURE__*/ mergeModels([
+		"next",
+		"back",
+		"dismiss",
+		"goTo"
+	], ["update:modelValue"]),
+	setup(__props, { emit: __emit }) {
+		const open = useModel(__props, "modelValue");
+		const emit = __emit;
+		const dialog = ref(null);
+		/** Direction, so a jump backwards still animates backwards. */
+		const transitionName = ref("tour-forward");
+		watch(() => __props.index, (next, previous) => {
+			transitionName.value = next >= previous ? "tour-forward" : "tour-backward";
+		});
+		const isLast = computed(() => __props.index >= __props.total - 1);
+		watch(open, async (isOpen) => {
+			if (typeof document === "undefined") return;
+			document.getElementById("app")?.toggleAttribute("inert", isOpen);
+			if (!isOpen) return;
+			await nextTick();
+			dialog.value?.focus();
+		}, { immediate: true });
+		onUnmounted(() => {
+			if (typeof document !== "undefined") document.getElementById("app")?.removeAttribute("inert");
+		});
+		function onKeydown(event) {
+			if (event.key === "ArrowRight") emit("next");
+			if (event.key === "ArrowLeft") emit("back");
+			if (event.key === "Escape") emit("dismiss");
+		}
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Teleport, { to: __props.teleportTo }, [createVNode(Transition, {
+				name: "tour",
+				appear: ""
+			}, {
+				default: withCtx(() => [open.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					ref_key: "dialog",
+					ref: dialog,
+					class: "fixed inset-0 z-[60] flex items-center justify-center outline-none",
+					role: "dialog",
+					"aria-modal": "true",
+					"aria-label": __props.dialogLabel,
+					tabindex: "-1",
+					onKeydown
+				}, [createElementVNode("div", _hoisted_2, [
+					renderSlot(_ctx.$slots, "wash", {}, void 0, true),
+					createElementVNode("header", _hoisted_3, [createElementVNode("span", _hoisted_4, toDisplayString(__props.stepLabel(__props.index + 1)), 1), createVNode(BaseButton_default, {
+						pill: "",
+						size: "sm",
+						variant: "quiet",
+						onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("dismiss"))
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.skipLabel), 1)]),
+						_: 1
+					})]),
+					createElementVNode("div", _hoisted_5, [createVNode(Transition, {
+						name: transitionName.value,
+						mode: "out-in"
+					}, {
+						default: withCtx(() => [renderSlot(_ctx.$slots, "default", { index: __props.index }, void 0, true)]),
+						_: 3
+					}, 8, ["name"])]),
+					createElementVNode("footer", _hoisted_6, [createElementVNode("div", {
+						class: "-my-2 flex items-center gap-1",
+						role: "tablist",
+						"aria-label": __props.stepLabel(__props.index + 1)
+					}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.total, (position) => {
+						return openBlock(), createBlock(BaseButton_default, {
+							key: position,
+							variant: "unstyled",
+							role: "tab",
+							"aria-selected": position - 1 === __props.index,
+							"aria-label": __props.stepLabel(position),
+							class: "group flex flex-1 items-center py-2.5",
+							onClick: ($event) => _ctx.$emit("goTo", position - 1)
+						}, {
+							default: withCtx(() => [createElementVNode("span", { class: normalizeClass(["h-1 w-full rounded-full transition-colors duration-300", position - 1 <= __props.index ? "bg-primary" : "bg-hair group-hover:bg-ink-soft/40"]) }, null, 2)]),
+							_: 2
+						}, 1032, [
+							"aria-selected",
+							"aria-label",
+							"onClick"
+						]);
+					}), 128))], 8, _hoisted_7), createElementVNode("div", _hoisted_8, [__props.index > 0 ? (openBlock(), createBlock(BaseButton_default, {
+						key: 0,
+						variant: "ghost",
+						class: "shrink-0 px-5",
+						onClick: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("back"))
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.backLabel), 1)]),
+						_: 1
+					})) : createCommentVNode("", true), createVNode(BaseButton_default, {
+						class: "flex-1",
+						onClick: _cache[2] || (_cache[2] = ($event) => _ctx.$emit("next"))
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(isLast.value ? __props.lastLabel : __props.nextLabel), 1)]),
+						_: 1
+					})])])
+				])], 40, _hoisted_1)) : createCommentVNode("", true)]),
+				_: 3
+			})], 8, ["to"]);
+		};
+	}
+}), [["__scopeId", "data-v-75292716"]]);
+//#endregion
 //#region src/app/use-tab-transition.ts
 /**
 * Which way a tabbed app is moving.
@@ -135,6 +352,6 @@ function useThemeSync(stored) {
 	}, { immediate: true });
 }
 //#endregion
-export { AuthShell_default as AuthShell, createTabTransition, useThemeSync };
+export { AuthShell_default as AuthShell, LocaleSheet_default as LocaleSheet, TourShell_default as TourShell, createTabTransition, useThemeSync };
 
 //# sourceMappingURL=app.js.map

package/dist/app.js.map

@@ -1 +1 @@
-{"version":3,"file":"app.js","names":["$slots"],"sources":["../src/app/AuthShell.vue","../src/app/AuthShell.vue","../src/app/use-tab-transition.ts","../src/app/use-theme-sync.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The frame every sign-in screen sits in.\n *\n * A brand mark, a narrow column, and the language links pinned to the bottom.\n * The two phone apps had this file character for character — thirty-seven\n * lines, no difference at all — and the only thing either would want to change\n * is what goes in the slots.\n *\n * The language links matter more than they look. Sign-in is the first screen a\n * new user sees and Settings is behind it, so without a way to switch here,\n * somebody who does not read the browser's language cannot get to one.\n */\ndefineSlots<{\n  /** The brand mark. */\n  brand?: () => unknown\n  /** The form. */\n  default: () => unknown\n  /** The language links, or anything else that belongs at the foot. */\n  foot?: () => unknown\n}>()\n</script>\n\n<template>\n  <div\n    class=\"flex min-h-0 w-full flex-1 flex-col items-center gap-8 overflow-y-auto px-6 pt-10 pb-10\"\n  >\n    <slot name=\"brand\" />\n\n    <main class=\"w-full max-w-[22rem]\">\n      <slot />\n    </main>\n\n    <div v-if=\"$slots.foot\" class=\"mt-auto\">\n      <slot name=\"foot\" />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * The frame every sign-in screen sits in.\n *\n * A brand mark, a narrow column, and the language links pinned to the bottom.\n * The two phone apps had this file character for character — thirty-seven\n * lines, no difference at all — and the only thing either would want to change\n * is what goes in the slots.\n *\n * The language links matter more than they look. Sign-in is the first screen a\n * new user sees and Settings is behind it, so without a way to switch here,\n * somebody who does not read the browser's language cannot get to one.\n */\ndefineSlots<{\n  /** The brand mark. */\n  brand?: () => unknown\n  /** The form. */\n  default: () => unknown\n  /** The language links, or anything else that belongs at the foot. */\n  foot?: () => unknown\n}>()\n</script>\n\n<template>\n  <div\n    class=\"flex min-h-0 w-full flex-1 flex-col items-center gap-8 overflow-y-auto px-6 pt-10 pb-10\"\n  >\n    <slot name=\"brand\" />\n\n    <main class=\"w-full max-w-[22rem]\">\n      <slot />\n    </main>\n\n    <div v-if=\"$slots.foot\" class=\"mt-auto\">\n      <slot name=\"foot\" />\n    </div>\n  </div>\n</template>\n","import { readonly, ref } from 'vue'\n\n/** Which way the screens slide during a tab change. */\nexport type SlideDirection = 'forward' | 'backward' | 'none'\n\n/**\n * Which way a tabbed app is moving.\n *\n * A phone app slides sideways between its tabs, and the direction has to come\n * from somewhere: going from the second tab to the fourth is forward, the\n * other way is back, and arriving from nowhere is neither. That is index\n * arithmetic over the tab order, and it was written twice, identically, in the\n * two phone apps this kit came from — thirty-four lines each, byte for byte\n * the same.\n *\n * Generic over the tab key, so the app keeps its own union and the kit never\n * learns what a tab is called.\n *\n * @example\n * ```ts\n * // shared/lib/tabs.ts\n * export const tabs = createTabTransition(['today', 'week', 'year', 'profile'] as const)\n *\n * // the router guard\n * router.afterEach((to, from) => tabs.resolve(to.meta.tab, from.meta.tab))\n *\n * // App.vue\n * const name = computed(() =>\n *   tabs.direction.value === 'none' ? '' : `slide-${tabs.direction.value}`,\n * )\n * ```\n *\n * The `slide-forward-*` and `slide-backward-*` classes those names refer to\n * ship in `rei-kit/shell/mobile.css`.\n */\nexport function createTabTransition<K extends string>(order: readonly K[]) {\n  const direction = ref<SlideDirection>('none')\n  let override: SlideDirection | null = null\n\n  return {\n    /** Direction of the current tab change. Read by the route transition. */\n    direction: readonly(direction),\n\n    /**\n     * Resolves the direction for a navigation. Call once per route change.\n     *\n     * @param to - Tab being entered, if the route has one.\n     * @param from - Tab being left, if the route had one.\n     */\n    resolve(to: K | undefined, from: K | undefined): void {\n      if (override) {\n        direction.value = override\n        override = null\n\n        return\n      }\n\n      if (!to || !from || to === from) {\n        direction.value = 'none'\n\n        return\n      }\n\n      direction.value = order.indexOf(to) > order.indexOf(from) ? 'forward' : 'backward'\n    },\n\n    /**\n     * Forces the next navigation's direction, whatever the indices say.\n     *\n     * For the navigations that are not a tab change at heart: going back from\n     * a detail screen, or being sent to sign-in. Without it, leaving a detail\n     * page under the fourth tab for the first tab slides backward, which is\n     * right, and arriving there slides forward, which is not.\n     */\n    force(next: SlideDirection): void {\n      override = next\n    },\n  }\n}\n","import { watch } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { isThemePreference, useTheme } from '../composables/use-theme'\n\n/**\n * Adopts the theme stored on the account, once, as soon as it arrives.\n *\n * Two things make this worth a component rather than four lines at a call\n * site, and both are about *once*.\n *\n * It has to run at the app root rather than on the settings screen, or a user\n * on a fresh device keeps the system theme until they happen to open Profile.\n * And it has to run once and never again, or a later refetch of the profile\n * undoes a choice the user has just made locally — the theme flips back under\n * them a second after they set it, which reads as the app fighting them.\n *\n * The source is a ref rather than a query, so the kit never learns what a\n * profile is or where it came from.\n *\n * @example\n * ```ts\n * const { data: profile } = useProfile()\n * useThemeSync(computed(() => profile.value?.theme))\n * ```\n */\nexport function useThemeSync(stored: Ref<string | null | undefined>): void {\n  const theme = useTheme()\n\n  let adopted = false\n\n  watch(\n    stored,\n    (next) => {\n      if (adopted || next === null || next === undefined) return\n\n      adopted = true\n\n      if (isThemePreference(next) && next !== theme.value) {\n        theme.value = next\n      }\n    },\n    { immediate: true },\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;GAwBE,OAAA,UAAA,GAAA,mBAYM,OAZN,YAYM;IATJ,WAAqB,KAAA,QAAA,OAAA;IAErB,mBAEO,QAFP,YAEO,CADL,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA;IAGCA,KAAAA,OAAO,QAAlB,UAAA,GAAA,mBAEM,OAFN,YAEM,CADJ,WAAoB,KAAA,QAAA,MAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AEC1B,SAAgB,oBAAsC,OAAqB;CACzE,MAAM,YAAY,IAAoB,MAAM;CAC5C,IAAI,WAAkC;CAEtC,OAAO;;EAEL,WAAW,SAAS,SAAS;;;;;;;EAQ7B,QAAQ,IAAmB,MAA2B;GACpD,IAAI,UAAU;IACZ,UAAU,QAAQ;IAClB,WAAW;IAEX;GACF;GAEA,IAAI,CAAC,MAAM,CAAC,QAAQ,OAAO,MAAM;IAC/B,UAAU,QAAQ;IAElB;GACF;GAEA,UAAU,QAAQ,MAAM,QAAQ,EAAE,IAAI,MAAM,QAAQ,IAAI,IAAI,YAAY;EAC1E;;;;;;;;;EAUA,MAAM,MAA4B;GAChC,WAAW;EACb;CACF;AACF;;;;;;;;;;;;;;;;;;;;;;;;ACpDA,SAAgB,aAAa,QAA8C;CACzE,MAAM,QAAQ,SAAS;CAEvB,IAAI,UAAU;CAEd,MACE,SACC,SAAS;EACR,IAAI,WAAW,SAAS,QAAQ,SAAS,KAAA,GAAW;EAEpD,UAAU;EAEV,IAAI,kBAAkB,IAAI,KAAK,SAAS,MAAM,OAC5C,MAAM,QAAQ;CAElB,GACA,EAAE,WAAW,KAAK,CACpB;AACF"}
+{"version":3,"file":"app.js","names":["$slots","$emit"],"sources":["../src/app/AuthShell.vue","../src/app/AuthShell.vue","../src/app/LocaleSheet.vue","../src/app/LocaleSheet.vue","../src/app/TourShell.vue","../src/app/TourShell.vue","../src/app/use-tab-transition.ts","../src/app/use-theme-sync.ts"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * The frame every sign-in screen sits in.\n *\n * A brand mark, a narrow column, and the language links pinned to the bottom.\n * The two phone apps had this file character for character — thirty-seven\n * lines, no difference at all — and the only thing either would want to change\n * is what goes in the slots.\n *\n * The language links matter more than they look. Sign-in is the first screen a\n * new user sees and Settings is behind it, so without a way to switch here,\n * somebody who does not read the browser's language cannot get to one.\n */\ndefineSlots<{\n  /** The brand mark. */\n  brand?: () => unknown\n  /** The form. */\n  default: () => unknown\n  /** The language links, or anything else that belongs at the foot. */\n  foot?: () => unknown\n}>()\n</script>\n\n<template>\n  <div\n    class=\"flex min-h-0 w-full flex-1 flex-col items-center gap-8 overflow-y-auto px-6 pt-10 pb-10\"\n  >\n    <slot name=\"brand\" />\n\n    <main class=\"w-full max-w-[22rem]\">\n      <slot />\n    </main>\n\n    <div v-if=\"$slots.foot\" class=\"mt-auto\">\n      <slot name=\"foot\" />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\n/**\n * The frame every sign-in screen sits in.\n *\n * A brand mark, a narrow column, and the language links pinned to the bottom.\n * The two phone apps had this file character for character — thirty-seven\n * lines, no difference at all — and the only thing either would want to change\n * is what goes in the slots.\n *\n * The language links matter more than they look. Sign-in is the first screen a\n * new user sees and Settings is behind it, so without a way to switch here,\n * somebody who does not read the browser's language cannot get to one.\n */\ndefineSlots<{\n  /** The brand mark. */\n  brand?: () => unknown\n  /** The form. */\n  default: () => unknown\n  /** The language links, or anything else that belongs at the foot. */\n  foot?: () => unknown\n}>()\n</script>\n\n<template>\n  <div\n    class=\"flex min-h-0 w-full flex-1 flex-col items-center gap-8 overflow-y-auto px-6 pt-10 pb-10\"\n  >\n    <slot name=\"brand\" />\n\n    <main class=\"w-full max-w-[22rem]\">\n      <slot />\n    </main>\n\n    <div v-if=\"$slots.foot\" class=\"mt-auto\">\n      <slot name=\"foot\" />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, Languages } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport BaseSheet from '../components/BaseSheet.vue'\nimport SettingsRow from '../components/SettingsRow.vue'\n\n/**\n * Choosing the interface language, from a settings row.\n *\n * A sheet rather than a segmented control: past four options a row of pills\n * stops being readable, and the list of languages only grows.\n *\n * Both phone apps had this, 96% identical. What differed was one colour class.\n *\n * The labels are the caller's, and they should be **endonyms** — a language is\n * always listed in its own language, so someone who cannot read the current\n * interface can still find theirs. The kit cannot know them.\n */\nconst {\n  label,\n  hint = '',\n  systemLabel,\n  options,\n  closeLabel = '',\n} = defineProps<{\n  /** The settings row's label, and the sheet's title. */\n  label: string\n  hint?: string | undefined\n  /** What \"follow the device\" is called. Its value is `system`. */\n  systemLabel: string\n  /** In the order they should be listed. Labels are endonyms. */\n  options: readonly { value: string; label: string }[]\n  closeLabel?: string | undefined\n}>()\n\nconst model = defineModel<string>({ required: true })\n\nconst open = ref(false)\n\nconst rows = computed(() => [{ value: 'system', label: systemLabel }, ...options])\n\nconst current = computed(\n  () => rows.value.find((row) => row.value === model.value)?.label ?? systemLabel,\n)\n\nfunction select(value: string) {\n  model.value = value\n  open.value = false\n}\n</script>\n\n<template>\n  <SettingsRow\n    :label=\"label\"\n    :description=\"hint\"\n    :icon=\"Languages\"\n    interactive\n    @click=\"open = true\"\n  >\n    <span class=\"text-ink-soft text-sm\">{{ current }}</span>\n  </SettingsRow>\n\n  <BaseSheet v-model=\"open\" :title=\"label\" :subtitle=\"hint\" :close-label=\"closeLabel\">\n    <ul class=\"flex flex-col\">\n      <li v-for=\"row in rows\" :key=\"row.value\">\n        <BaseButton\n          variant=\"row\"\n          class=\"rounded-xl\"\n          :pressed=\"model === row.value\"\n          @click=\"select(row.value)\"\n        >\n          <span class=\"flex-1 text-base\">{{ row.label }}</span>\n          <Check\n            v-if=\"model === row.value\"\n            class=\"text-primary size-5 shrink-0\"\n            aria-hidden=\"true\"\n          />\n        </BaseButton>\n      </li>\n    </ul>\n  </BaseSheet>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\nimport { Check, Languages } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport BaseSheet from '../components/BaseSheet.vue'\nimport SettingsRow from '../components/SettingsRow.vue'\n\n/**\n * Choosing the interface language, from a settings row.\n *\n * A sheet rather than a segmented control: past four options a row of pills\n * stops being readable, and the list of languages only grows.\n *\n * Both phone apps had this, 96% identical. What differed was one colour class.\n *\n * The labels are the caller's, and they should be **endonyms** — a language is\n * always listed in its own language, so someone who cannot read the current\n * interface can still find theirs. The kit cannot know them.\n */\nconst {\n  label,\n  hint = '',\n  systemLabel,\n  options,\n  closeLabel = '',\n} = defineProps<{\n  /** The settings row's label, and the sheet's title. */\n  label: string\n  hint?: string | undefined\n  /** What \"follow the device\" is called. Its value is `system`. */\n  systemLabel: string\n  /** In the order they should be listed. Labels are endonyms. */\n  options: readonly { value: string; label: string }[]\n  closeLabel?: string | undefined\n}>()\n\nconst model = defineModel<string>({ required: true })\n\nconst open = ref(false)\n\nconst rows = computed(() => [{ value: 'system', label: systemLabel }, ...options])\n\nconst current = computed(\n  () => rows.value.find((row) => row.value === model.value)?.label ?? systemLabel,\n)\n\nfunction select(value: string) {\n  model.value = value\n  open.value = false\n}\n</script>\n\n<template>\n  <SettingsRow\n    :label=\"label\"\n    :description=\"hint\"\n    :icon=\"Languages\"\n    interactive\n    @click=\"open = true\"\n  >\n    <span class=\"text-ink-soft text-sm\">{{ current }}</span>\n  </SettingsRow>\n\n  <BaseSheet v-model=\"open\" :title=\"label\" :subtitle=\"hint\" :close-label=\"closeLabel\">\n    <ul class=\"flex flex-col\">\n      <li v-for=\"row in rows\" :key=\"row.value\">\n        <BaseButton\n          variant=\"row\"\n          class=\"rounded-xl\"\n          :pressed=\"model === row.value\"\n          @click=\"select(row.value)\"\n        >\n          <span class=\"flex-1 text-base\">{{ row.label }}</span>\n          <Check\n            v-if=\"model === row.value\"\n            class=\"text-primary size-5 shrink-0\"\n            aria-hidden=\"true\"\n          />\n        </BaseButton>\n      </li>\n    </ul>\n  </BaseSheet>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The frame an onboarding guide runs inside.\n *\n * Both phone apps had this, 296 lines, 94% identical — and what differed was\n * every part that should: the slides, the wash colours, the illustrations. What\n * did not differ is here.\n *\n * The parts that are easy to get wrong and were written twice:\n *\n * - **`inert` on the app behind it.** Without it, Tab walks into a screen the\n *   reader cannot see. The same trick `BaseSheet` uses, and it has to be undone\n *   on unmount or the whole app stays inert forever.\n * - **Focusing the dialog**, which is the only reason the arrow keys work.\n * - **The direction.** A guide that can jump to slide two from slide seven has\n *   to animate backwards, so the transition name follows the index rather than\n *   the button that was pressed.\n * - **A segmented track, not dots.** Ten slides is a sequence with a length,\n *   and the reader deserves to see how much is left.\n *\n * Every string is a prop and the slide is a slot: the kit renders the frame and\n * knows nothing about what is being explained.\n */\nconst {\n  index,\n  total,\n  dialogLabel,\n  skipLabel,\n  backLabel,\n  nextLabel,\n  lastLabel,\n  stepLabel,\n  teleportTo = 'body',\n} = defineProps<{\n  /** Which slide, zero-based. */\n  index: number\n  total: number\n  /** The dialog's accessible name. */\n  dialogLabel: string\n  skipLabel: string\n  backLabel: string\n  nextLabel: string\n  /** The button on the final slide — \"Start\", rather than \"Next\". */\n  lastLabel: string\n  /** Names one segment for a screen reader, e.g. `(n) => \\`Step ${n} of ${total}\\``. */\n  stepLabel: (position: number) => string\n  /**\n   * Where the dialog goes. A phone shell clips its children, so the guide has\n   * to leave the tree to cover the tab bar and the header alike.\n   */\n  teleportTo?: string | undefined\n}>()\n\nconst open = defineModel<boolean>({ required: true })\n\nconst emit = defineEmits<{ next: []; back: []; dismiss: []; goTo: [position: number] }>()\n\nconst dialog = ref<HTMLElement | null>(null)\n\n/** Direction, so a jump backwards still animates backwards. */\nconst transitionName = ref('tour-forward')\n\nwatch(\n  () => index,\n  (next, previous) => {\n    transitionName.value = next >= previous ? 'tour-forward' : 'tour-backward'\n  },\n)\n\nconst isLast = computed(() => index >= total - 1)\n\n/* `immediate`, because a layout that mounts this only once the guide has been\n   asked for would otherwise have the first `true` predate the watcher. */\nwatch(\n  open,\n  async (isOpen) => {\n    if (typeof document === 'undefined') return\n\n    document.getElementById('app')?.toggleAttribute('inert', isOpen)\n    if (!isOpen) return\n\n    await nextTick()\n    dialog.value?.focus()\n  },\n  { immediate: true },\n)\n\nonUnmounted(() => {\n  if (typeof document !== 'undefined') document.getElementById('app')?.removeAttribute('inert')\n})\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'ArrowRight') emit('next')\n  if (event.key === 'ArrowLeft') emit('back')\n  if (event.key === 'Escape') emit('dismiss')\n}\n</script>\n\n<template>\n  <Teleport :to=\"teleportTo\">\n    <Transition name=\"tour\" appear>\n      <div\n        v-if=\"open\"\n        ref=\"dialog\"\n        class=\"fixed inset-0 z-[60] flex items-center justify-center outline-none\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"dialogLabel\"\n        tabindex=\"-1\"\n        @keydown=\"onKeydown\"\n      >\n        <div class=\"shell-frame md:rounded-shell bg-canvas relative flex flex-col overflow-hidden\">\n          <!-- Behind everything: the app's mood for this slide. -->\n          <slot name=\"wash\" />\n\n          <header class=\"relative flex shrink-0 items-center justify-between gap-3 px-6 pt-6\">\n            <span class=\"text-ink-soft text-xs font-semibold tabular-nums\">\n              {{ stepLabel(index + 1) }}\n            </span>\n\n            <BaseButton pill size=\"sm\" variant=\"quiet\" @click=\"$emit('dismiss')\">\n              {{ skipLabel }}\n            </BaseButton>\n          </header>\n\n          <!-- min-h-0 keeps the body inside the shell, so a long slide scrolls\n               here rather than pushing the buttons off the bottom. -->\n          <div\n            class=\"relative flex min-h-0 flex-1 flex-col justify-center overflow-y-auto px-6 py-6\"\n          >\n            <Transition :name=\"transitionName\" mode=\"out-in\">\n              <slot :index=\"index\" />\n            </Transition>\n          </div>\n\n          <footer\n            class=\"relative flex shrink-0 flex-col gap-4 px-6 pt-4 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n          >\n            <!-- A segmented track rather than dots: ten slides is a sequence\n                 with a length, and the reader deserves to see how much is left. -->\n            <div\n              class=\"-my-2 flex items-center gap-1\"\n              role=\"tablist\"\n              :aria-label=\"stepLabel(index + 1)\"\n            >\n              <BaseButton\n                v-for=\"position in total\"\n                :key=\"position\"\n                variant=\"unstyled\"\n                role=\"tab\"\n                :aria-selected=\"position - 1 === index\"\n                :aria-label=\"stepLabel(position)\"\n                class=\"group flex flex-1 items-center py-2.5\"\n                @click=\"$emit('goTo', position - 1)\"\n              >\n                <span\n                  class=\"h-1 w-full rounded-full transition-colors duration-300\"\n                  :class=\"\n                    position - 1 <= index ? 'bg-primary' : 'bg-hair group-hover:bg-ink-soft/40'\n                  \"\n                />\n              </BaseButton>\n            </div>\n\n            <div class=\"flex gap-2\">\n              <BaseButton\n                v-if=\"index > 0\"\n                variant=\"ghost\"\n                class=\"shrink-0 px-5\"\n                @click=\"$emit('back')\"\n              >\n                {{ backLabel }}\n              </BaseButton>\n\n              <BaseButton class=\"flex-1\" @click=\"$emit('next')\">\n                {{ isLast ? lastLabel : nextLabel }}\n              </BaseButton>\n            </div>\n          </footer>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.tour-enter-active,\n.tour-leave-active {\n  transition: opacity 220ms ease;\n}\n\n.tour-enter-from,\n.tour-leave-to {\n  opacity: 0;\n}\n\n.tour-forward-enter-active,\n.tour-backward-enter-active {\n  transition:\n    opacity 260ms ease-out,\n    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.tour-forward-leave-active,\n.tour-backward-leave-active {\n  transition:\n    opacity 130ms ease-in,\n    transform 130ms ease-in;\n}\n\n.tour-forward-enter-from {\n  opacity: 0;\n  transform: translateX(1.25rem);\n}\n\n.tour-forward-leave-to {\n  opacity: 0;\n  transform: translateX(-0.75rem);\n}\n\n.tour-backward-enter-from {\n  opacity: 0;\n  transform: translateX(-1.25rem);\n}\n\n.tour-backward-leave-to {\n  opacity: 0;\n  transform: translateX(0.75rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tour-forward-enter-from,\n  .tour-forward-leave-to,\n  .tour-backward-enter-from,\n  .tour-backward-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The frame an onboarding guide runs inside.\n *\n * Both phone apps had this, 296 lines, 94% identical — and what differed was\n * every part that should: the slides, the wash colours, the illustrations. What\n * did not differ is here.\n *\n * The parts that are easy to get wrong and were written twice:\n *\n * - **`inert` on the app behind it.** Without it, Tab walks into a screen the\n *   reader cannot see. The same trick `BaseSheet` uses, and it has to be undone\n *   on unmount or the whole app stays inert forever.\n * - **Focusing the dialog**, which is the only reason the arrow keys work.\n * - **The direction.** A guide that can jump to slide two from slide seven has\n *   to animate backwards, so the transition name follows the index rather than\n *   the button that was pressed.\n * - **A segmented track, not dots.** Ten slides is a sequence with a length,\n *   and the reader deserves to see how much is left.\n *\n * Every string is a prop and the slide is a slot: the kit renders the frame and\n * knows nothing about what is being explained.\n */\nconst {\n  index,\n  total,\n  dialogLabel,\n  skipLabel,\n  backLabel,\n  nextLabel,\n  lastLabel,\n  stepLabel,\n  teleportTo = 'body',\n} = defineProps<{\n  /** Which slide, zero-based. */\n  index: number\n  total: number\n  /** The dialog's accessible name. */\n  dialogLabel: string\n  skipLabel: string\n  backLabel: string\n  nextLabel: string\n  /** The button on the final slide — \"Start\", rather than \"Next\". */\n  lastLabel: string\n  /** Names one segment for a screen reader, e.g. `(n) => \\`Step ${n} of ${total}\\``. */\n  stepLabel: (position: number) => string\n  /**\n   * Where the dialog goes. A phone shell clips its children, so the guide has\n   * to leave the tree to cover the tab bar and the header alike.\n   */\n  teleportTo?: string | undefined\n}>()\n\nconst open = defineModel<boolean>({ required: true })\n\nconst emit = defineEmits<{ next: []; back: []; dismiss: []; goTo: [position: number] }>()\n\nconst dialog = ref<HTMLElement | null>(null)\n\n/** Direction, so a jump backwards still animates backwards. */\nconst transitionName = ref('tour-forward')\n\nwatch(\n  () => index,\n  (next, previous) => {\n    transitionName.value = next >= previous ? 'tour-forward' : 'tour-backward'\n  },\n)\n\nconst isLast = computed(() => index >= total - 1)\n\n/* `immediate`, because a layout that mounts this only once the guide has been\n   asked for would otherwise have the first `true` predate the watcher. */\nwatch(\n  open,\n  async (isOpen) => {\n    if (typeof document === 'undefined') return\n\n    document.getElementById('app')?.toggleAttribute('inert', isOpen)\n    if (!isOpen) return\n\n    await nextTick()\n    dialog.value?.focus()\n  },\n  { immediate: true },\n)\n\nonUnmounted(() => {\n  if (typeof document !== 'undefined') document.getElementById('app')?.removeAttribute('inert')\n})\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'ArrowRight') emit('next')\n  if (event.key === 'ArrowLeft') emit('back')\n  if (event.key === 'Escape') emit('dismiss')\n}\n</script>\n\n<template>\n  <Teleport :to=\"teleportTo\">\n    <Transition name=\"tour\" appear>\n      <div\n        v-if=\"open\"\n        ref=\"dialog\"\n        class=\"fixed inset-0 z-[60] flex items-center justify-center outline-none\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :aria-label=\"dialogLabel\"\n        tabindex=\"-1\"\n        @keydown=\"onKeydown\"\n      >\n        <div class=\"shell-frame md:rounded-shell bg-canvas relative flex flex-col overflow-hidden\">\n          <!-- Behind everything: the app's mood for this slide. -->\n          <slot name=\"wash\" />\n\n          <header class=\"relative flex shrink-0 items-center justify-between gap-3 px-6 pt-6\">\n            <span class=\"text-ink-soft text-xs font-semibold tabular-nums\">\n              {{ stepLabel(index + 1) }}\n            </span>\n\n            <BaseButton pill size=\"sm\" variant=\"quiet\" @click=\"$emit('dismiss')\">\n              {{ skipLabel }}\n            </BaseButton>\n          </header>\n\n          <!-- min-h-0 keeps the body inside the shell, so a long slide scrolls\n               here rather than pushing the buttons off the bottom. -->\n          <div\n            class=\"relative flex min-h-0 flex-1 flex-col justify-center overflow-y-auto px-6 py-6\"\n          >\n            <Transition :name=\"transitionName\" mode=\"out-in\">\n              <slot :index=\"index\" />\n            </Transition>\n          </div>\n\n          <footer\n            class=\"relative flex shrink-0 flex-col gap-4 px-6 pt-4 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n          >\n            <!-- A segmented track rather than dots: ten slides is a sequence\n                 with a length, and the reader deserves to see how much is left. -->\n            <div\n              class=\"-my-2 flex items-center gap-1\"\n              role=\"tablist\"\n              :aria-label=\"stepLabel(index + 1)\"\n            >\n              <BaseButton\n                v-for=\"position in total\"\n                :key=\"position\"\n                variant=\"unstyled\"\n                role=\"tab\"\n                :aria-selected=\"position - 1 === index\"\n                :aria-label=\"stepLabel(position)\"\n                class=\"group flex flex-1 items-center py-2.5\"\n                @click=\"$emit('goTo', position - 1)\"\n              >\n                <span\n                  class=\"h-1 w-full rounded-full transition-colors duration-300\"\n                  :class=\"\n                    position - 1 <= index ? 'bg-primary' : 'bg-hair group-hover:bg-ink-soft/40'\n                  \"\n                />\n              </BaseButton>\n            </div>\n\n            <div class=\"flex gap-2\">\n              <BaseButton\n                v-if=\"index > 0\"\n                variant=\"ghost\"\n                class=\"shrink-0 px-5\"\n                @click=\"$emit('back')\"\n              >\n                {{ backLabel }}\n              </BaseButton>\n\n              <BaseButton class=\"flex-1\" @click=\"$emit('next')\">\n                {{ isLast ? lastLabel : nextLabel }}\n              </BaseButton>\n            </div>\n          </footer>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.tour-enter-active,\n.tour-leave-active {\n  transition: opacity 220ms ease;\n}\n\n.tour-enter-from,\n.tour-leave-to {\n  opacity: 0;\n}\n\n.tour-forward-enter-active,\n.tour-backward-enter-active {\n  transition:\n    opacity 260ms ease-out,\n    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);\n}\n\n.tour-forward-leave-active,\n.tour-backward-leave-active {\n  transition:\n    opacity 130ms ease-in,\n    transform 130ms ease-in;\n}\n\n.tour-forward-enter-from {\n  opacity: 0;\n  transform: translateX(1.25rem);\n}\n\n.tour-forward-leave-to {\n  opacity: 0;\n  transform: translateX(-0.75rem);\n}\n\n.tour-backward-enter-from {\n  opacity: 0;\n  transform: translateX(-1.25rem);\n}\n\n.tour-backward-leave-to {\n  opacity: 0;\n  transform: translateX(0.75rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tour-forward-enter-from,\n  .tour-forward-leave-to,\n  .tour-backward-enter-from,\n  .tour-backward-leave-to {\n    transform: none;\n  }\n}\n</style>\n","import { readonly, ref } from 'vue'\n\n/** Which way the screens slide during a tab change. */\nexport type SlideDirection = 'forward' | 'backward' | 'none'\n\n/**\n * Which way a tabbed app is moving.\n *\n * A phone app slides sideways between its tabs, and the direction has to come\n * from somewhere: going from the second tab to the fourth is forward, the\n * other way is back, and arriving from nowhere is neither. That is index\n * arithmetic over the tab order, and it was written twice, identically, in the\n * two phone apps this kit came from — thirty-four lines each, byte for byte\n * the same.\n *\n * Generic over the tab key, so the app keeps its own union and the kit never\n * learns what a tab is called.\n *\n * @example\n * ```ts\n * // shared/lib/tabs.ts\n * export const tabs = createTabTransition(['today', 'week', 'year', 'profile'] as const)\n *\n * // the router guard\n * router.afterEach((to, from) => tabs.resolve(to.meta.tab, from.meta.tab))\n *\n * // App.vue\n * const name = computed(() =>\n *   tabs.direction.value === 'none' ? '' : `slide-${tabs.direction.value}`,\n * )\n * ```\n *\n * The `slide-forward-*` and `slide-backward-*` classes those names refer to\n * ship in `rei-kit/shell/mobile.css`.\n */\nexport function createTabTransition<K extends string>(order: readonly K[]) {\n  const direction = ref<SlideDirection>('none')\n  let override: SlideDirection | null = null\n\n  return {\n    /** Direction of the current tab change. Read by the route transition. */\n    direction: readonly(direction),\n\n    /**\n     * Resolves the direction for a navigation. Call once per route change.\n     *\n     * @param to - Tab being entered, if the route has one.\n     * @param from - Tab being left, if the route had one.\n     */\n    resolve(to: K | undefined, from: K | undefined): void {\n      if (override) {\n        direction.value = override\n        override = null\n\n        return\n      }\n\n      if (!to || !from || to === from) {\n        direction.value = 'none'\n\n        return\n      }\n\n      direction.value = order.indexOf(to) > order.indexOf(from) ? 'forward' : 'backward'\n    },\n\n    /**\n     * Forces the next navigation's direction, whatever the indices say.\n     *\n     * For the navigations that are not a tab change at heart: going back from\n     * a detail screen, or being sent to sign-in. Without it, leaving a detail\n     * page under the fourth tab for the first tab slides backward, which is\n     * right, and arriving there slides forward, which is not.\n     */\n    force(next: SlideDirection): void {\n      override = next\n    },\n  }\n}\n","import { watch } from 'vue'\nimport type { Ref } from 'vue'\n\nimport { isThemePreference, useTheme } from '../composables/use-theme'\n\n/**\n * Adopts the theme stored on the account, once, as soon as it arrives.\n *\n * Two things make this worth a component rather than four lines at a call\n * site, and both are about *once*.\n *\n * It has to run at the app root rather than on the settings screen, or a user\n * on a fresh device keeps the system theme until they happen to open Profile.\n * And it has to run once and never again, or a later refetch of the profile\n * undoes a choice the user has just made locally — the theme flips back under\n * them a second after they set it, which reads as the app fighting them.\n *\n * The source is a ref rather than a query, so the kit never learns what a\n * profile is or where it came from.\n *\n * @example\n * ```ts\n * const { data: profile } = useProfile()\n * useThemeSync(computed(() => profile.value?.theme))\n * ```\n */\nexport function useThemeSync(stored: Ref<string | null | undefined>): void {\n  const theme = useTheme()\n\n  let adopted = false\n\n  watch(\n    stored,\n    (next) => {\n      if (adopted || next === null || next === undefined) return\n\n      adopted = true\n\n      if (isThemePreference(next) && next !== theme.value) {\n        theme.value = next\n      }\n    },\n    { immediate: true },\n  )\n}\n"],"mappings":"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"}