rei-kit 0.12.1 → 0.13.0

package/dist/app.js

@@ -0,0 +1,140 @@
+import { a as useTheme, n as isThemePreference } from "./use-theme-_MnaDD5v.js";
+import { createCommentVNode, createElementBlock, createElementVNode, defineComponent, openBlock, readonly, ref, renderSlot, watch } from "vue";
+//#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 = {
+	key: 0,
+	class: "mt-auto"
+};
+//#endregion
+//#region src/app/AuthShell.vue
+var AuthShell_default = /* @__PURE__ */ defineComponent({
+	__name: "AuthShell",
+	setup(__props) {
+		/**
+		* The frame every sign-in screen sits in.
+		*
+		* A brand mark, a narrow column, and the language links pinned to the bottom.
+		* The two phone apps had this file character for character — thirty-seven
+		* lines, no difference at all — and the only thing either would want to change
+		* is what goes in the slots.
+		*
+		* The language links matter more than they look. Sign-in is the first screen a
+		* new user sees and Settings is behind it, so without a way to switch here,
+		* somebody who does not read the browser's language cannot get to one.
+		*/
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", _hoisted_1, [
+				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)
+			]);
+		};
+	}
+});
+//#endregion
+//#region src/app/use-tab-transition.ts
+/**
+* Which way a tabbed app is moving.
+*
+* A phone app slides sideways between its tabs, and the direction has to come
+* from somewhere: going from the second tab to the fourth is forward, the
+* other way is back, and arriving from nowhere is neither. That is index
+* arithmetic over the tab order, and it was written twice, identically, in the
+* two phone apps this kit came from — thirty-four lines each, byte for byte
+* the same.
+*
+* Generic over the tab key, so the app keeps its own union and the kit never
+* learns what a tab is called.
+*
+* @example
+* ```ts
+* // shared/lib/tabs.ts
+* export const tabs = createTabTransition(['today', 'week', 'year', 'profile'] as const)
+*
+* // the router guard
+* router.afterEach((to, from) => tabs.resolve(to.meta.tab, from.meta.tab))
+*
+* // App.vue
+* const name = computed(() =>
+*   tabs.direction.value === 'none' ? '' : `slide-${tabs.direction.value}`,
+* )
+* ```
+*
+* The `slide-forward-*` and `slide-backward-*` classes those names refer to
+* ship in `rei-kit/shell/mobile.css`.
+*/
+function createTabTransition(order) {
+	const direction = ref("none");
+	let override = null;
+	return {
+		/** Direction of the current tab change. Read by the route transition. */
+		direction: readonly(direction),
+		/**
+		* Resolves the direction for a navigation. Call once per route change.
+		*
+		* @param to - Tab being entered, if the route has one.
+		* @param from - Tab being left, if the route had one.
+		*/
+		resolve(to, from) {
+			if (override) {
+				direction.value = override;
+				override = null;
+				return;
+			}
+			if (!to || !from || to === from) {
+				direction.value = "none";
+				return;
+			}
+			direction.value = order.indexOf(to) > order.indexOf(from) ? "forward" : "backward";
+		},
+		/**
+		* Forces the next navigation's direction, whatever the indices say.
+		*
+		* For the navigations that are not a tab change at heart: going back from
+		* a detail screen, or being sent to sign-in. Without it, leaving a detail
+		* page under the fourth tab for the first tab slides backward, which is
+		* right, and arriving there slides forward, which is not.
+		*/
+		force(next) {
+			override = next;
+		}
+	};
+}
+//#endregion
+//#region src/app/use-theme-sync.ts
+/**
+* Adopts the theme stored on the account, once, as soon as it arrives.
+*
+* Two things make this worth a component rather than four lines at a call
+* site, and both are about *once*.
+*
+* It has to run at the app root rather than on the settings screen, or a user
+* on a fresh device keeps the system theme until they happen to open Profile.
+* And it has to run once and never again, or a later refetch of the profile
+* undoes a choice the user has just made locally — the theme flips back under
+* them a second after they set it, which reads as the app fighting them.
+*
+* The source is a ref rather than a query, so the kit never learns what a
+* profile is or where it came from.
+*
+* @example
+* ```ts
+* const { data: profile } = useProfile()
+* useThemeSync(computed(() => profile.value?.theme))
+* ```
+*/
+function useThemeSync(stored) {
+	const theme = useTheme();
+	let adopted = false;
+	watch(stored, (next) => {
+		if (adopted || next === null || next === void 0) return;
+		adopted = true;
+		if (isThemePreference(next) && next !== theme.value) theme.value = next;
+	}, { immediate: true });
+}
+//#endregion
+export { AuthShell_default as AuthShell, createTabTransition, useThemeSync };
+
+//# sourceMappingURL=app.js.map

package/dist/app.js.map

@@ -0,0 +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"}

package/dist/index.js

@@ -1,158 +1,10 @@
+import { a as needsIosInstall, c as fromDateKey, d as startOfWeek, f as toDateKey, i as isInstalled, l as lastNDays, n as BaseButton_default, o as addDays, p as todayKey, r as isApplePortable, s as eachDayOfYear, t as _plugin_vue_export_helper_default, u as leadingBlanks } from "./_plugin-vue_export-helper-3AcMDTtW.js";
 import { n as registerErrorMapper, r as toAppError, t as AppError } from "./app-error-DF9cijE0.js";
+import { a as useTheme, i as setThemeStorageKey, n as isThemePreference, r as readStoredTheme, t as applyTheme } from "./use-theme-_MnaDD5v.js";
 import { Fragment, Teleport, Transition, TransitionGroup, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, createVNode, defineComponent, mergeModels, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onErrorCaptured, onMounted, onScopeDispose, onUnmounted, openBlock, readonly, ref, renderList, renderSlot, resolveDynamicComponent, toDisplayString, unref, useId, useModel, vModelCheckbox, vModelDynamic, vModelRadio, vModelSelect, vModelText, watch, watchEffect, withCtx, withDirectives } from "vue";
 import { ArrowDown, ArrowRight, ArrowUp, CheckCircle2, ChevronDown, ChevronRight, Info, TriangleAlert, X, XCircle } from "lucide-vue-next";
 import { RouterLink } from "vue-router";
 import { createI18n } from "vue-i18n";
-//#region src/utils/date.ts
-/**
-* Local calendar-day helpers.
-*
-* Every function is pure and works on `YYYY-MM-DD` keys, the same shape as the
-* `date` columns in Postgres. Nothing here calls `toISOString`: that converts to
-* UTC, so in a UTC+9 timezone every entry made between midnight and 09:00 would
-* be written to the previous day.
-*/
-/**
-* Formats a `Date` as a local `YYYY-MM-DD` key.
-*
-* @param date - Any `Date`; only its local year, month and day are read.
-* @returns The calendar day in the runtime's own timezone.
-*
-* @example
-* ```ts
-* // 2026-08-23 01:30 in Tokyo
-* toDateKey(new Date())        // '2026-08-23'
-* new Date().toISOString()     // '2026-08-22T16:30…'  ← the bug
-* ```
-*/
-function toDateKey(date) {
-	return `${String(date.getFullYear()).padStart(4, "0")}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
-}
-/** Today's key in the user's own timezone. */
-function todayKey() {
-	return toDateKey(/* @__PURE__ */ new Date());
-}
-/**
-* Parses a `YYYY-MM-DD` key into a `Date` at local midnight.
-*
-* @param key - A key produced by {@link toDateKey}.
-* @returns Local midnight of that calendar day.
-* @throws If the key is not three numeric parts.
-*
-* @example
-* ```ts
-* fromDateKey('2026-08-23')      // local midnight, correct
-* new Date('2026-08-23')         // UTC midnight — shifts a day in some zones
-* ```
-*/
-function fromDateKey(key) {
-	const [year, month, day] = key.split("-").map(Number);
-	if (year === void 0 || month === void 0 || day === void 0) throw new Error(`Invalid date key: ${key}`);
-	return new Date(year, month - 1, day);
-}
-/**
-* Shifts a date key by whole calendar days.
-*
-* Uses `setDate`, which is calendar-aware: it rolls over month and year ends,
-* and stays correct across daylight-saving transitions. Adding
-* `days * 86_400_000` milliseconds would not — a DST day is 23 or 25 hours long.
-*
-* @param key - Starting `YYYY-MM-DD` key.
-* @param days - Days to add; negative goes back.
-* @returns The resulting key.
-*
-* @example
-* ```ts
-* addDays('2026-01-31', 1)   // '2026-02-01'
-* addDays('2026-01-01', -1)  // '2025-12-31'
-* addDays('2028-02-28', 1)   // '2028-02-29'  — leap year
-* ```
-*/
-function addDays(key, days) {
-	const date = fromDateKey(key);
-	date.setDate(date.getDate() + days);
-	return toDateKey(date);
-}
-/**
-* The last `count` days ending today, oldest first.
-*
-* `today` is a parameter so the function stays pure and testable; call sites
-* normally omit it.
-*
-* @param count - How many days to return, including `today`.
-* @param today - End of the range. Defaults to the real today.
-* @returns Keys in ascending order.
-*
-* @example
-* ```ts
-* lastNDays(3, '2026-08-23')  // ['2026-08-21', '2026-08-22', '2026-08-23']
-* ```
-*/
-function lastNDays(count, today = todayKey()) {
-	const keys = [];
-	for (let offset = count - 1; offset >= 0; offset -= 1) keys.push(addDays(today, -offset));
-	return keys;
-}
-/**
-* The first day of the week containing `key`.
-*
-* The user's preference is a parameter, not a module-level setting: changing it
-* in Profile has to re-render the week grid and the year heatmap immediately,
-* and a global would make that a hidden dependency.
-*
-* @param key - Any day in the week.
-* @param weekStartsOn - 0 for Sunday, 1 for Monday.
-* @returns Key of that week's first day.
-*
-* @example
-* ```ts
-* // 2026-08-23 is a Sunday
-* startOfWeek('2026-08-23', 1)  // '2026-08-17'  — previous Monday
-* startOfWeek('2026-08-23', 0)  // '2026-08-23'  — already Sunday
-* ```
-*/
-function startOfWeek(key, weekStartsOn) {
-	return addDays(key, -((fromDateKey(key).getDay() - weekStartsOn + 7) % 7));
-}
-/**
-* Every day of a calendar year, in order.
-*
-* Leap years fall out of the loop for free: it walks day by day until the year
-* rolls over, so February 29 is included when it exists.
-*
-* @param year - Four-digit year.
-* @returns 365 or 366 keys, oldest first.
-*/
-function eachDayOfYear(year) {
-	const keys = [];
-	const date = new Date(year, 0, 1);
-	while (date.getFullYear() === year) {
-		keys.push(toDateKey(date));
-		date.setDate(date.getDate() + 1);
-	}
-	return keys;
-}
-/**
-* Empty cells before a block's first day in a seven-row column grid.
-*
-* The grid fills column by column, so the first column is only partly used
-* unless the block starts exactly on the week's first day. An off-by-one here
-* shifts the whole block by a row, so this is unit tested.
-*
-* @param firstDayKey - First day of the block, e.g. `'2026-02-01'`.
-* @param weekStartsOn - 0 for Sunday, 1 for Monday.
-* @returns 0-6 blank cells.
-*
-* @example
-* ```ts
-* leadingBlanks('2026-01-01', 1)  // 3 — a Thursday, Mon-Wed are blank
-* leadingBlanks('2024-01-01', 1)  // 0 — a Monday
-* ```
-*/
-function leadingBlanks(firstDayKey, weekStartsOn) {
-	return (fromDateKey(firstDayKey).getDay() - weekStartsOn + 7) % 7;
-}
-//#endregion
 //#region src/utils/format.ts
 /**
 * The locale `Intl` formatting uses.
@@ -300,129 +152,6 @@ function tapFeedback(duration = 10) {
 	navigator.vibrate?.(duration);
 }
 //#endregion
-//#region src/utils/platform.ts
-/**
-* Whether the app is running from the Home Screen rather than a browser tab.
-*
-* Two checks because iOS predates the standard one: `display-mode: standalone`
-* is the modern signal, `navigator.standalone` is Safari's own.
-*/
-function isInstalled() {
-	if (typeof window === "undefined") return false;
-	return window.matchMedia("(display-mode: standalone)").matches || navigator.standalone === true;
-}
-/** iPhone and iPad, including iPadOS reporting itself as a Mac. */
-function isApplePortable() {
-	if (typeof window === "undefined") return false;
-	return /iPad|iPhone|iPod/.test(navigator.userAgent) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
-}
-/**
-* Whether this device can only receive notifications once the app is installed.
-*
-* Safari on iOS grants notification permission to an installed web app and to
-* nothing else — in a normal tab the request does not even prompt. Telling the
-* user to allow notifications there is asking for something the browser will
-* not offer, so the UI has to say "add to Home Screen" instead.
-*
-* @example
-* ```ts
-* if (needsIosInstall()) // show the Home Screen instruction, not the button
-* ```
-*/
-function needsIosInstall() {
-	return isApplePortable() && !isInstalled();
-}
-//#endregion
-//#region src/composables/use-theme.ts
-/**
-* Namespaced by the app, not by this package.
-*
-* Two rei-kit apps served from the same origin would otherwise share one theme
-* setting — and during development on localhost, they will be.
-*/
-var storageKey = "rei-theme";
-function isThemePreference(value) {
-	return value === "system" || value === "light" || value === "dark";
-}
-/** Reads the stored preference, falling back to `system`. */
-function readStoredTheme() {
-	try {
-		const stored = localStorage.getItem(storageKey);
-		return isThemePreference(stored) ? stored : "system";
-	} catch {
-		return "system";
-	}
-}
-function storeTheme(preference) {
-	try {
-		localStorage.setItem(storageKey, preference);
-	} catch {}
-}
-/**
-* Does the environment prefer a dark scheme?
-*
-* `matchMedia` is checked for on its own rather than inferred from `document`.
-* Having one does not imply having the other: jsdom supplies a document and no
-* `matchMedia`, so a consumer's component test that so much as mounts something
-* calling `useTheme` threw — and some embedded webviews are the same. Where
-* there is nothing to ask, the answer is no rather than an exception.
-*/
-function prefersDarkScheme() {
-	return typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia("(prefers-color-scheme: dark)").matches : false;
-}
-/**
-* Adds or removes `.dark` on `<html>`, resolving `system` against the OS.
-*
-* A no-op without a document. There is no OS preference to read on a server and
-* no `<html>` to write to, so a prerender leaves the class off and the app
-* decides the theme before hydration — see the note in the README.
-*/
-function applyTheme(preference) {
-	if (typeof document === "undefined") return;
-	const isDark = preference === "dark" || preference === "system" && prefersDarkScheme();
-	document.documentElement.classList.toggle("dark", isDark);
-}
-/**
-* The shared preference, created on first use rather than at import.
-*
-* Lazy on purpose: reading storage at import time would lock in the default key
-* before an app had a chance to set its own, leaving the controller reading one
-* key and writing another.
-*/
-var preference = null;
-function controller() {
-	if (preference) return preference;
-	preference = ref(readStoredTheme());
-	watch(preference, (next) => {
-		storeTheme(next);
-		applyTheme(next);
-	}, { immediate: true });
-	if (typeof window !== "undefined" && typeof window.matchMedia === "function") window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change", () => {
-		if (preference?.value === "system") applyTheme("system");
-	});
-	return preference;
-}
-/**
-* Sets where the preference is stored.
-*
-* Safe in either order: called before the first `useTheme()` it simply changes
-* the key, and called after it re-reads under the new one, so the controller
-* never reads from one key while writing to another.
-*
-* @example
-* ```ts
-* setThemeStorageKey('hibi-theme')   // once, at startup
-* ```
-*/
-function setThemeStorageKey(key) {
-	storageKey = key;
-	if (preference) preference.value = readStoredTheme();
-}
-/** @returns The shared preference ref; assigning to it stores and applies it. */
-function useTheme() {
-	return controller();
-}
-//#endregion
 //#region src/composables/use-today.ts
 /**
 * Today's date key, kept current while the app stays open.
@@ -838,7 +567,7 @@ function useToast() {
 }
 //#endregion
 //#region src/components/BaseAlert.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$22 = ["role", "aria-live"];
+var _hoisted_1$21 = ["role", "aria-live"];
 var _hoisted_2$16 = { class: "min-w-0 flex-1" };
 var _hoisted_3$11 = {
 	key: 0,
@@ -883,7 +612,7 @@ var BaseAlert_default = /* @__PURE__ */ defineComponent({
 				}, [renderSlot(_ctx.$slots, "mark")], 2)) : createCommentVNode("", true),
 				createElementVNode("div", _hoisted_2$16, [_ctx.$slots.title ? (openBlock(), createElementBlock("p", _hoisted_3$11, [renderSlot(_ctx.$slots, "title")])) : createCommentVNode("", true), createElementVNode("div", { class: normalizeClass(_ctx.$slots.title ? "mt-1" : "") }, [renderSlot(_ctx.$slots, "default")], 2)]),
 				renderSlot(_ctx.$slots, "action")
-			], 10, _hoisted_1$22);
+			], 10, _hoisted_1$21);
 		};
 	}
 });
@@ -907,151 +636,6 @@ var BaseBadge_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
-//#region src/components/BaseButton.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1$21 = {
-	key: 0,
-	class: "size-4 animate-spin rounded-full border-2 border-current border-t-transparent",
-	"aria-hidden": "true"
-};
-//#endregion
-//#region src/components/BaseButton.vue
-var BaseButton_default = /* @__PURE__ */ defineComponent({
-	__name: "BaseButton",
-	props: {
-		as: { default: "button" },
-		variant: { default: "primary" },
-		size: { default: "md" },
-		loading: {
-			type: Boolean,
-			default: false
-		},
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		type: { default: "button" },
-		icon: {
-			type: Boolean,
-			default: false
-		},
-		block: {
-			type: Boolean,
-			default: false
-		},
-		to: { default: () => void 0 },
-		href: { default: () => void 0 },
-		pill: {
-			type: Boolean,
-			default: false
-		},
-		pressed: {
-			type: Boolean,
-			default: () => void 0
-		}
-	},
-	setup(__props) {
-		const VARIANT_CLASS = {
-			primary: "bg-primary text-white hover:bg-primary/90",
-			secondary: "border-hair bg-surface text-ink border hover:bg-muted",
-			ghost: "bg-transparent text-ink hover:bg-muted",
-			destructive: "bg-transparent text-ink-soft hover:text-negative",
-			row: "w-full justify-start text-left bg-transparent text-ink hover:bg-muted",
-			quiet: "bg-transparent text-ink-soft hover:bg-muted hover:text-ink",
-			danger: "bg-negative text-white hover:bg-negative/90",
-			positive: "bg-positive text-white hover:bg-positive/90",
-			warning: "bg-warning text-white hover:bg-warning/90",
-			accent: "bg-accent text-white hover:bg-accent/90",
-			link: "bg-transparent underline underline-offset-2 hover:opacity-80",
-			unstyled: ""
-		};
-		const SIZE_CLASS = {
-			xs: "h-8 px-3 text-xs",
-			sm: "h-9 px-3 text-sm",
-			md: "h-11 px-4 text-base",
-			lg: "h-14 px-6 text-lg"
-		};
-		const ICON_SIZE_CLASS = {
-			xs: "size-8 text-xs",
-			sm: "size-9 text-sm",
-			md: "size-11 text-base",
-			lg: "size-14 text-lg"
-		};
-		const ROW_SIZE_CLASS = {
-			xs: "px-2 py-1.5 text-xs",
-			sm: "px-3 py-2 text-sm",
-			md: "px-3 py-2.5 text-base",
-			lg: "px-4 py-3 text-lg"
-		};
-		const LINK_SIZE_CLASS = {
-			xs: "text-xs",
-			sm: "text-sm",
-			md: "text-base",
-			lg: "text-lg"
-		};
-		const sizing = computed(() => {
-			if (__props.variant === "unstyled") return "";
-			if (__props.variant === "link") return LINK_SIZE_CLASS[__props.size];
-			if (__props.variant === "row") return ROW_SIZE_CLASS[__props.size];
-			return __props.icon ? ICON_SIZE_CLASS[__props.size] : SIZE_CLASS[__props.size];
-		});
-		const PRESSED_CLASS = {
-			ghost: "bg-primary text-white hover:bg-primary/90",
-			quiet: "bg-primary text-white hover:bg-primary/90",
-			secondary: "bg-primary border-primary text-white hover:bg-primary/90",
-			row: "w-full justify-start text-left bg-muted text-ink hover:bg-muted"
-		};
-		const surface = computed(() => {
-			if (__props.pressed === true) return PRESSED_CLASS[__props.variant] ?? VARIANT_CLASS[__props.variant];
-			if (__props.variant === "destructive") return `${VARIANT_CLASS.destructive} hover:bg-negative/10`;
-			return VARIANT_CLASS[__props.variant];
-		});
-		const shell = computed(() => {
-			if (__props.variant === "unstyled") return "";
-			const feel = "transition-[transform,color,background-color,border-color] duration-100 select-none";
-			if (__props.variant === "row") return `inline-flex items-center gap-2 font-medium ${feel}`;
-			return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`;
-		});
-		const radius = computed(() => {
-			if (__props.variant === "unstyled") return "";
-			if (__props.variant === "link") return "rounded-xs";
-			return __props.pill ? "rounded-full" : "rounded-card";
-		});
-		/** Anything that is not a `<button>` cannot be `disabled`; it has to be told. */
-		const inactive = computed(() => __props.disabled || __props.loading);
-		const linkProps = computed(() => {
-			if (__props.as === "router-link") return { to: __props.to };
-			if (__props.as === "a") return inactive.value ? {} : { href: __props.href };
-			return {};
-		});
-		return (_ctx, _cache) => {
-			return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps(linkProps.value, {
-				type: __props.as === "button" ? __props.type : void 0,
-				disabled: __props.as === "button" ? inactive.value : void 0,
-				"aria-disabled": __props.as !== "button" && inactive.value ? "true" : void 0,
-				"aria-busy": __props.loading,
-				"aria-pressed": __props.pressed === void 0 ? void 0 : String(__props.pressed),
-				class: ["focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50", [
-					shell.value,
-					surface.value,
-					sizing.value,
-					radius.value,
-					__props.block ? "w-full" : ""
-				]]
-			}), {
-				default: withCtx(() => [__props.loading ? (openBlock(), createElementBlock("span", _hoisted_1$21)) : createCommentVNode("", true), renderSlot(_ctx.$slots, "default")]),
-				_: 3
-			}, 16, [
-				"type",
-				"disabled",
-				"aria-disabled",
-				"aria-busy",
-				"aria-pressed",
-				"class"
-			]);
-		};
-	}
-});
-//#endregion
 //#region src/components/FormField.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$20 = ["for"];
 //#endregion
@@ -1175,7 +759,9 @@ var _hoisted_6$2 = {
 	class: "text-ink-soft mt-1 text-sm leading-snug"
 };
 var _hoisted_7$2 = { class: "min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]" };
-var BaseSheet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+//#endregion
+//#region src/components/BaseSheet.vue
+var BaseSheet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
 	__name: "BaseSheet",
 	props: /*@__PURE__*/ mergeModels({
 		title: {},
@@ -1276,17 +862,7 @@ var BaseSheet_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ define
 			})]);
 		};
 	}
-});
-//#endregion
-//#region \0plugin-vue:export-helper
-var _plugin_vue_export_helper_default = (sfc, props) => {
-	const target = sfc.__vccOpts || sfc;
-	for (const [key, val] of props) target[key] = val;
-	return target;
-};
-//#endregion
-//#region src/components/BaseSheet.vue
-var BaseSheet_default = /*#__PURE__*/ _plugin_vue_export_helper_default(BaseSheet_vue_vue_type_script_setup_true_lang_default, [["__scopeId", "data-v-51709579"]]);
+}), [["__scopeId", "data-v-51709579"]]);
 //#endregion
 //#region src/components/BaseCard.vue
 var BaseCard_default = /* @__PURE__ */ defineComponent({
@@ -2437,7 +2013,7 @@ function createI18nRuntime(options) {
 *
 * The fallback keeps `vitest` and `vite dev` honest, where no define runs.
 */
-var VERSION = "0.12.1";
+var VERSION = "0.13.0";
 //#endregion
 export { AppError, BaseAlert_default as BaseAlert, BaseBadge_default as BaseBadge, BaseButton_default as BaseButton, BaseCard_default as BaseCard, BaseCheckbox_default as BaseCheckbox, BaseInput_default as BaseInput, BaseRadioGroup_default as BaseRadioGroup, BaseSelect_default as BaseSelect, BaseSheet_default as BaseSheet, BaseTextarea_default as BaseTextarea, EmptyState_default as EmptyState, ErrorBoundary_default as ErrorBoundary, FormField_default as FormField, GoogleButton_default as GoogleButton, LocaleLinks_default as LocaleLinks, PageContainer_default as PageContainer, PageHeader_default as PageHeader, PriceCard_default as PriceCard, ProgressBar_default as ProgressBar, SectionHeading_default as SectionHeading, SegmentedControl_default as SegmentedControl, SettingsGroup_default as SettingsGroup, SettingsRow_default as SettingsRow, SkeletonList_default as SkeletonList, StatCard_default as StatCard, TabBar_default as TabBar, ToastHost_default as ToastHost, ToneDot_default as ToneDot, VERSION, addDays, applyTheme, createI18nRuntime, downloadJson, eachDayOfYear, formatDate, fromDateKey, isApplePortable, isInstalled, isThemePreference, lastNDays, leadingBlanks, needsIosInstall, readStoredTheme, registerErrorMapper, relativeDayLabel, safeRedirect, setFormatLocale, setThemeStorageKey, startOfWeek, tapFeedback, toAppError, toDateKey, todayKey, useDebouncedCallback, useDragScroll, useMediaQuery, useOnline, useTheme, useToast, useToday, useVisualViewport };