rei-kit 0.13.0 → 0.14.0

package/dist/pwa/InstallSettings.vue.d.ts

@@ -0,0 +1,26 @@
+/**
+ * The way back to installing after the card has been dismissed.
+ *
+ * The card snoozes for a week; without this row, someone who tapped "Not now"
+ * and then changed their mind would have nowhere to go. Both phone apps had it,
+ * thirty-four lines, with no difference at all.
+ *
+ * It renders nothing where installing is neither possible nor already done — a
+ * settings group that says "you cannot install this" is worse than silence.
+ */
+type __VLS_Props = {
+    /** The group's heading. */
+    title: string;
+    /** The row's label while installing is still possible. */
+    label: string;
+    /** The row's label once it is installed. */
+    installedLabel: string;
+    body: string;
+    /** Shown instead of `body` on iOS, where the user must use the Share menu. */
+    iosBody: string;
+    /** The install button. Absent on iOS, which has no API to call. */
+    action: string;
+};
+declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/pwa/index.d.ts

@@ -12,4 +12,5 @@
 export { useInstall, watchInstallability } from './use-install';
 export { useSnooze } from './use-snooze';
 export { default as InstallPrompt } from './InstallPrompt.vue';
+export { default as InstallSettings } from './InstallSettings.vue';
 export { default as UpdatePrompt } from './UpdatePrompt.vue';

package/dist/pwa.js

@@ -1,6 +1,7 @@
-import { a as needsIosInstall, i as isInstalled, n as BaseButton_default, o as addDays, p as todayKey, t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-3AcMDTtW.js";
+import { a as addDays, f as todayKey, i as needsIosInstall, r as isInstalled, t as SettingsGroup_default } from "./SettingsGroup-DtEB_Hrd.js";
+import { n as _plugin_vue_export_helper_default, r as BaseButton_default, t as SettingsRow_default } from "./SettingsRow-MnVleeTR.js";
 import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
-import { Download, RefreshCw, Share, X } from "lucide-vue-next";
+import { CheckCircle2, Download, RefreshCw, Share, X } from "lucide-vue-next";
 //#region src/pwa/use-install.ts
 var deferred = ref(null);
 var installed = ref(false);
@@ -171,6 +172,52 @@ var InstallPrompt_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 	}
 }), [["__scopeId", "data-v-34c86300"]]);
 //#endregion
+//#region src/pwa/InstallSettings.vue
+var InstallSettings_default = /* @__PURE__ */ defineComponent({
+	__name: "InstallSettings",
+	props: {
+		title: {},
+		label: {},
+		installedLabel: {},
+		body: {},
+		iosBody: {},
+		action: {}
+	},
+	setup(__props) {
+		const { isInstalled, canPrompt, needsManualSteps, prompt } = useInstall();
+		return (_ctx, _cache) => {
+			return unref(isInstalled) || unref(canPrompt) || unref(needsManualSteps) ? (openBlock(), createBlock(SettingsGroup_default, {
+				key: 0,
+				title: __props.title
+			}, {
+				default: withCtx(() => [createVNode(SettingsRow_default, {
+					label: unref(isInstalled) ? __props.installedLabel : __props.label,
+					description: unref(isInstalled) ? "" : unref(needsManualSteps) ? __props.iosBody : __props.body,
+					icon: unref(isInstalled) ? unref(CheckCircle2) : unref(needsManualSteps) ? unref(Share) : unref(Download),
+					stacked: ""
+				}, {
+					default: withCtx(() => [unref(canPrompt) ? (openBlock(), createBlock(BaseButton_default, {
+						key: 0,
+						variant: "primary",
+						size: "sm",
+						class: "self-start",
+						onClick: unref(prompt)
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(__props.action), 1)]),
+						_: 1
+					}, 8, ["onClick"])) : createCommentVNode("", true)]),
+					_: 1
+				}, 8, [
+					"label",
+					"description",
+					"icon"
+				])]),
+				_: 1
+			}, 8, ["title"])) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
 //#region src/pwa/UpdatePrompt.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1 = {
 	key: 0,
@@ -231,6 +278,6 @@ var UpdatePrompt_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @_
 	}
 }), [["__scopeId", "data-v-7cf60526"]]);
 //#endregion
-export { InstallPrompt_default as InstallPrompt, UpdatePrompt_default as UpdatePrompt, useInstall, useSnooze, watchInstallability };
+export { InstallPrompt_default as InstallPrompt, InstallSettings_default as InstallSettings, UpdatePrompt_default as UpdatePrompt, useInstall, useSnooze, watchInstallability };
 
 //# sourceMappingURL=pwa.js.map

package/dist/pwa.js.map

@@ -1 +1 @@
-{"version":3,"file":"pwa.js","names":["$emit"],"sources":["../src/pwa/use-install.ts","../src/pwa/use-snooze.ts","../src/pwa/InstallPrompt.vue","../src/pwa/InstallPrompt.vue","../src/pwa/UpdatePrompt.vue","../src/pwa/UpdatePrompt.vue"],"sourcesContent":["import { computed, ref } from 'vue'\n\nimport { isInstalled, needsIosInstall } from '../utils/platform'\n\n/**\n * The event Chromium fires when it decides the app is installable.\n *\n * Not in lib.dom yet, and it is the only way to trigger the install sheet from\n * the app's own button rather than the browser's.\n */\ninterface BeforeInstallPromptEvent extends Event {\n  prompt: () => Promise<void>\n  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>\n}\n\nconst deferred = ref<BeforeInstallPromptEvent | null>(null)\nconst installed = ref(false)\n\nlet listening = false\n\n/**\n * Starts listening for the install event.\n *\n * **Call this from the app's entry file, not from a component.**\n * `beforeinstallprompt` fires once, early, and only once per page load — a\n * listener attached when a component mounts has usually already missed it.\n *\n * It is a function rather than module-scope side effects so the package can be\n * imported on a server: the phone apps this came from ran it at module scope\n * and the kit spent a release learning why that is not free.\n *\n * @example\n * ```ts\n * // main.ts\n * import { watchInstallability } from 'rei-kit/pwa'\n * watchInstallability()\n * ```\n */\nexport function watchInstallability(): void {\n  if (listening || typeof window === 'undefined') return\n\n  listening = true\n  installed.value = isInstalled()\n\n  window.addEventListener('beforeinstallprompt', (event) => {\n    // Without this the browser shows its own bar, and then the app's card and\n    // the browser's bar are both on screen saying the same thing.\n    event.preventDefault()\n    deferred.value = event as BeforeInstallPromptEvent\n  })\n\n  window.addEventListener('appinstalled', () => {\n    installed.value = true\n    deferred.value = null\n  })\n}\n\n/**\n * Adding the app to the Home Screen.\n *\n * Three states, because the platforms genuinely differ: Chromium hands over an\n * event that can be triggered from a button, Safari on iOS has no API at all\n * and needs the user walked through Share → Add to Home Screen, and everything\n * else can only be told that installing is possible.\n *\n * @example\n * ```ts\n * const install = useInstall()\n * if (install.canPrompt.value) await install.prompt()\n * ```\n */\nexport function useInstall() {\n  async function prompt(): Promise<boolean> {\n    const event = deferred.value\n    if (!event) return false\n\n    await event.prompt()\n    const { outcome } = await event.userChoice\n\n    // The event is single-use: Chromium refuses a second prompt() on it.\n    deferred.value = null\n\n    return outcome === 'accepted'\n  }\n\n  return {\n    isInstalled: computed(() => installed.value),\n    /** A button can open the real install sheet. */\n    canPrompt: computed(() => !installed.value && deferred.value !== null),\n    /** No API — the user has to be shown the Share menu. */\n    needsManualSteps: computed(() => !installed.value && needsIosInstall()),\n    prompt,\n  }\n}\n","import { computed, ref } from 'vue'\n\nimport { addDays, todayKey } from '../utils/date'\n\n/**\n * A nudge that stops asking for a while after it is dismissed.\n *\n * Both phone apps had this inside their install card, identically: a date in\n * `localStorage`, compared against today. Pulled out because the install card\n * is not the only thing that should stop asking — a notification nudge wants\n * exactly the same behaviour, and had exactly the same code.\n *\n * Storage is wrapped in try/catch on both sides. A private window or a browser\n * set to block site data throws on access, and the honest failure there is a\n * nudge that reappears next session rather than one that crashes the screen it\n * is asking from.\n *\n * @param key - Where the date is kept. Namespace it to the app.\n * @param days - How long to stay quiet after a dismissal.\n */\nexport function useSnooze(key: string, days = 7) {\n  const read = (): string => {\n    try {\n      return localStorage.getItem(key) ?? ''\n    } catch {\n      return ''\n    }\n  }\n\n  const until = ref(read())\n\n  return {\n    /** False while the nudge is snoozed. */\n    isOver: computed(() => todayKey() >= until.value),\n\n    /** Stop asking for `days`. */\n    snooze(): void {\n      const next = addDays(todayKey(), days)\n      until.value = next\n\n      try {\n        localStorage.setItem(key, next)\n      } catch {\n        // Storage blocked; it reappears next session rather than never.\n      }\n    },\n  }\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport { useInstall } from './use-install'\nimport { useSnooze } from './use-snooze'\n\n/**\n * The card that offers to install the app, and remembers being turned down.\n *\n * Both phone apps had this, 111 lines, differing in a storage key and a colour.\n * What is here is the part that was the same: the three-way platform check, the\n * week-long snooze, and the shape.\n *\n * Every string is a prop. The kit does not know a language, and \"Add to Home\n * Screen\" is a sentence about a platform, not about this component.\n */\nconst {\n  storageKey,\n  title,\n  body,\n  action,\n  later,\n  iosTitle = '',\n  iosBody = '',\n  snoozeDays = 7,\n} = defineProps<{\n  /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */\n  storageKey: string\n  title: string\n  body: string\n  /** The install button. Not shown on iOS, which has no API to call. */\n  action: string\n  later: string\n  /** Shown instead of `title` where the user has to use the Share menu. */\n  iosTitle?: string | undefined\n  iosBody?: string | undefined\n  snoozeDays?: number | undefined\n}>()\n\nconst { canPrompt, needsManualSteps, prompt } = useInstall()\nconst { isOver, snooze } = useSnooze(storageKey, snoozeDays)\n\nconst visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value)\n\nasync function install() {\n  await prompt()\n\n  // Accepted or dismissed, stop asking for a week. The prompt is what gets\n  // tiring, not the answer.\n  snooze()\n}\n</script>\n\n<template>\n  <Transition name=\"install\">\n    <section\n      v-if=\"visible\"\n      class=\"border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5\"\n    >\n      <span\n        class=\"bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl\"\n        aria-hidden=\"true\"\n      >\n        <component :is=\"needsManualSteps ? Share : Download\" class=\"size-5\" />\n      </span>\n\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <div>\n          <p class=\"text-ink text-sm font-semibold\">\n            {{ needsManualSteps && iosTitle ? iosTitle : title }}\n          </p>\n          <p class=\"text-ink-soft mt-0.5 text-xs leading-relaxed\">\n            {{ needsManualSteps && iosBody ? iosBody : body }}\n          </p>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <!-- No button on iOS: Safari exposes no way to open the Share sheet\n               from script, so a button here could only fail. -->\n          <BaseButton\n            v-if=\"canPrompt\"\n            variant=\"positive\"\n            pill\n            size=\"xs\"\n            class=\"font-semibold\"\n            @click=\"install\"\n          >\n            {{ action }}\n          </BaseButton>\n\n          <BaseButton pill size=\"xs\" variant=\"quiet\" @click=\"snooze\">{{ later }}</BaseButton>\n        </div>\n      </div>\n    </section>\n  </Transition>\n</template>\n\n<style scoped>\n.install-enter-active,\n.install-leave-active {\n  transition:\n    opacity 200ms ease,\n    transform 200ms ease;\n}\n\n.install-enter-from,\n.install-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .install-enter-from,\n  .install-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport { useInstall } from './use-install'\nimport { useSnooze } from './use-snooze'\n\n/**\n * The card that offers to install the app, and remembers being turned down.\n *\n * Both phone apps had this, 111 lines, differing in a storage key and a colour.\n * What is here is the part that was the same: the three-way platform check, the\n * week-long snooze, and the shape.\n *\n * Every string is a prop. The kit does not know a language, and \"Add to Home\n * Screen\" is a sentence about a platform, not about this component.\n */\nconst {\n  storageKey,\n  title,\n  body,\n  action,\n  later,\n  iosTitle = '',\n  iosBody = '',\n  snoozeDays = 7,\n} = defineProps<{\n  /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */\n  storageKey: string\n  title: string\n  body: string\n  /** The install button. Not shown on iOS, which has no API to call. */\n  action: string\n  later: string\n  /** Shown instead of `title` where the user has to use the Share menu. */\n  iosTitle?: string | undefined\n  iosBody?: string | undefined\n  snoozeDays?: number | undefined\n}>()\n\nconst { canPrompt, needsManualSteps, prompt } = useInstall()\nconst { isOver, snooze } = useSnooze(storageKey, snoozeDays)\n\nconst visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value)\n\nasync function install() {\n  await prompt()\n\n  // Accepted or dismissed, stop asking for a week. The prompt is what gets\n  // tiring, not the answer.\n  snooze()\n}\n</script>\n\n<template>\n  <Transition name=\"install\">\n    <section\n      v-if=\"visible\"\n      class=\"border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5\"\n    >\n      <span\n        class=\"bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl\"\n        aria-hidden=\"true\"\n      >\n        <component :is=\"needsManualSteps ? Share : Download\" class=\"size-5\" />\n      </span>\n\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <div>\n          <p class=\"text-ink text-sm font-semibold\">\n            {{ needsManualSteps && iosTitle ? iosTitle : title }}\n          </p>\n          <p class=\"text-ink-soft mt-0.5 text-xs leading-relaxed\">\n            {{ needsManualSteps && iosBody ? iosBody : body }}\n          </p>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <!-- No button on iOS: Safari exposes no way to open the Share sheet\n               from script, so a button here could only fail. -->\n          <BaseButton\n            v-if=\"canPrompt\"\n            variant=\"positive\"\n            pill\n            size=\"xs\"\n            class=\"font-semibold\"\n            @click=\"install\"\n          >\n            {{ action }}\n          </BaseButton>\n\n          <BaseButton pill size=\"xs\" variant=\"quiet\" @click=\"snooze\">{{ later }}</BaseButton>\n        </div>\n      </div>\n    </section>\n  </Transition>\n</template>\n\n<style scoped>\n.install-enter-active,\n.install-leave-active {\n  transition:\n    opacity 200ms ease,\n    transform 200ms ease;\n}\n\n.install-enter-from,\n.install-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .install-enter-from,\n  .install-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { RefreshCw, X } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The card that says a new version is waiting.\n *\n * `registerType: 'prompt'` means a new service worker waits rather than taking\n * over, and this is what asks whether to apply it. Asking rather than reloading\n * is the decision worth keeping: an automatic swap mid-sentence loses whatever\n * was being typed.\n *\n * **The service worker stays the app's.** `virtual:pwa-register/vue` is a\n * build-time module from `vite-plugin-pwa`, and a library cannot import one —\n * so the app owns `useRegisterSW` and hands the answer down as `open`. That\n * split is also honest: whether an update is waiting is the app's business,\n * and what the card looks like is this component's.\n *\n * @example\n * ```vue\n * <script setup>\n * const { needRefresh, updateServiceWorker } = useRegisterSW()\n * <\\/script>\n *\n * <UpdatePrompt\n *   :open=\"needRefresh\"\n *   :title=\"t('pwa.updateTitle')\"\n *   :body=\"t('pwa.updateBody')\"\n *   :action=\"t('pwa.reload')\"\n *   :dismiss-label=\"t('pwa.later')\"\n *   @update=\"updateServiceWorker(true)\"\n *   @dismiss=\"needRefresh = false\"\n * />\n * ```\n */\ndefineProps<{\n  open: boolean\n  title: string\n  body: string\n  action: string\n  /** The X's accessible name. An X on its own has none. */\n  dismissLabel: string\n}>()\n\ndefineEmits<{ update: []; dismiss: [] }>()\n</script>\n\n<template>\n  <Transition name=\"update\">\n    <aside v-if=\"open\" class=\"update-card\" role=\"status\">\n      <span class=\"update-icon\" aria-hidden=\"true\">\n        <RefreshCw class=\"size-4\" />\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-ink text-sm font-semibold\">{{ title }}</p>\n        <p class=\"text-ink-soft text-xs leading-snug\">{{ body }}</p>\n      </div>\n\n      <BaseButton\n        variant=\"primary\"\n        pill\n        size=\"xs\"\n        class=\"shrink-0 font-semibold\"\n        @click=\"$emit('update')\"\n      >\n        {{ action }}\n      </BaseButton>\n\n      <BaseButton\n        variant=\"quiet\"\n        icon\n        pill\n        size=\"sm\"\n        class=\"shrink-0\"\n        :aria-label=\"dismissLabel\"\n        @click=\"$emit('dismiss')\"\n      >\n        <X class=\"size-4\" />\n      </BaseButton>\n    </aside>\n  </Transition>\n</template>\n\n<style scoped>\n/* Sits above the tab bar and the action button, because it outranks both — but\n   absolutely inside its container, so on a desktop-sized shell it does not\n   float off into the page. Give the shell `relative`. */\n.update-card {\n  border-color: var(--color-hair);\n  background: color-mix(in srgb, var(--color-surface) 95%, transparent);\n  border-radius: var(--radius-card);\n  position: absolute;\n  left: 50%;\n  z-index: 50;\n  display: flex;\n  width: 100%;\n  max-width: 360px;\n  align-items: center;\n  gap: 0.75rem;\n  border-width: 1px;\n  padding: 0.75rem;\n  backdrop-filter: blur(12px);\n  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);\n  transform: translateX(-50%);\n  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.update-icon {\n  background: color-mix(in srgb, var(--color-primary) 15%, transparent);\n  color: var(--color-primary);\n  display: flex;\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.75rem;\n}\n\n.update-enter-active,\n.update-leave-active {\n  transition:\n    opacity 250ms ease,\n    transform 250ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n.update-enter-from,\n.update-leave-to {\n  opacity: 0;\n  transform: translate(-50%, 1rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .update-enter-from,\n  .update-leave-to {\n    transform: translate(-50%, 0);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { RefreshCw, X } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The card that says a new version is waiting.\n *\n * `registerType: 'prompt'` means a new service worker waits rather than taking\n * over, and this is what asks whether to apply it. Asking rather than reloading\n * is the decision worth keeping: an automatic swap mid-sentence loses whatever\n * was being typed.\n *\n * **The service worker stays the app's.** `virtual:pwa-register/vue` is a\n * build-time module from `vite-plugin-pwa`, and a library cannot import one —\n * so the app owns `useRegisterSW` and hands the answer down as `open`. That\n * split is also honest: whether an update is waiting is the app's business,\n * and what the card looks like is this component's.\n *\n * @example\n * ```vue\n * <script setup>\n * const { needRefresh, updateServiceWorker } = useRegisterSW()\n * <\\/script>\n *\n * <UpdatePrompt\n *   :open=\"needRefresh\"\n *   :title=\"t('pwa.updateTitle')\"\n *   :body=\"t('pwa.updateBody')\"\n *   :action=\"t('pwa.reload')\"\n *   :dismiss-label=\"t('pwa.later')\"\n *   @update=\"updateServiceWorker(true)\"\n *   @dismiss=\"needRefresh = false\"\n * />\n * ```\n */\ndefineProps<{\n  open: boolean\n  title: string\n  body: string\n  action: string\n  /** The X's accessible name. An X on its own has none. */\n  dismissLabel: string\n}>()\n\ndefineEmits<{ update: []; dismiss: [] }>()\n</script>\n\n<template>\n  <Transition name=\"update\">\n    <aside v-if=\"open\" class=\"update-card\" role=\"status\">\n      <span class=\"update-icon\" aria-hidden=\"true\">\n        <RefreshCw class=\"size-4\" />\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-ink text-sm font-semibold\">{{ title }}</p>\n        <p class=\"text-ink-soft text-xs leading-snug\">{{ body }}</p>\n      </div>\n\n      <BaseButton\n        variant=\"primary\"\n        pill\n        size=\"xs\"\n        class=\"shrink-0 font-semibold\"\n        @click=\"$emit('update')\"\n      >\n        {{ action }}\n      </BaseButton>\n\n      <BaseButton\n        variant=\"quiet\"\n        icon\n        pill\n        size=\"sm\"\n        class=\"shrink-0\"\n        :aria-label=\"dismissLabel\"\n        @click=\"$emit('dismiss')\"\n      >\n        <X class=\"size-4\" />\n      </BaseButton>\n    </aside>\n  </Transition>\n</template>\n\n<style scoped>\n/* Sits above the tab bar and the action button, because it outranks both — but\n   absolutely inside its container, so on a desktop-sized shell it does not\n   float off into the page. Give the shell `relative`. */\n.update-card {\n  border-color: var(--color-hair);\n  background: color-mix(in srgb, var(--color-surface) 95%, transparent);\n  border-radius: var(--radius-card);\n  position: absolute;\n  left: 50%;\n  z-index: 50;\n  display: flex;\n  width: 100%;\n  max-width: 360px;\n  align-items: center;\n  gap: 0.75rem;\n  border-width: 1px;\n  padding: 0.75rem;\n  backdrop-filter: blur(12px);\n  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);\n  transform: translateX(-50%);\n  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.update-icon {\n  background: color-mix(in srgb, var(--color-primary) 15%, transparent);\n  color: var(--color-primary);\n  display: flex;\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.75rem;\n}\n\n.update-enter-active,\n.update-leave-active {\n  transition:\n    opacity 250ms ease,\n    transform 250ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n.update-enter-from,\n.update-leave-to {\n  opacity: 0;\n  transform: translate(-50%, 1rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .update-enter-from,\n  .update-leave-to {\n    transform: translate(-50%, 0);\n  }\n}\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"pwa.js","names":["$emit"],"sources":["../src/pwa/use-install.ts","../src/pwa/use-snooze.ts","../src/pwa/InstallPrompt.vue","../src/pwa/InstallPrompt.vue","../src/pwa/InstallSettings.vue","../src/pwa/InstallSettings.vue","../src/pwa/UpdatePrompt.vue","../src/pwa/UpdatePrompt.vue"],"sourcesContent":["import { computed, ref } from 'vue'\n\nimport { isInstalled, needsIosInstall } from '../utils/platform'\n\n/**\n * The event Chromium fires when it decides the app is installable.\n *\n * Not in lib.dom yet, and it is the only way to trigger the install sheet from\n * the app's own button rather than the browser's.\n */\ninterface BeforeInstallPromptEvent extends Event {\n  prompt: () => Promise<void>\n  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>\n}\n\nconst deferred = ref<BeforeInstallPromptEvent | null>(null)\nconst installed = ref(false)\n\nlet listening = false\n\n/**\n * Starts listening for the install event.\n *\n * **Call this from the app's entry file, not from a component.**\n * `beforeinstallprompt` fires once, early, and only once per page load — a\n * listener attached when a component mounts has usually already missed it.\n *\n * It is a function rather than module-scope side effects so the package can be\n * imported on a server: the phone apps this came from ran it at module scope\n * and the kit spent a release learning why that is not free.\n *\n * @example\n * ```ts\n * // main.ts\n * import { watchInstallability } from 'rei-kit/pwa'\n * watchInstallability()\n * ```\n */\nexport function watchInstallability(): void {\n  if (listening || typeof window === 'undefined') return\n\n  listening = true\n  installed.value = isInstalled()\n\n  window.addEventListener('beforeinstallprompt', (event) => {\n    // Without this the browser shows its own bar, and then the app's card and\n    // the browser's bar are both on screen saying the same thing.\n    event.preventDefault()\n    deferred.value = event as BeforeInstallPromptEvent\n  })\n\n  window.addEventListener('appinstalled', () => {\n    installed.value = true\n    deferred.value = null\n  })\n}\n\n/**\n * Adding the app to the Home Screen.\n *\n * Three states, because the platforms genuinely differ: Chromium hands over an\n * event that can be triggered from a button, Safari on iOS has no API at all\n * and needs the user walked through Share → Add to Home Screen, and everything\n * else can only be told that installing is possible.\n *\n * @example\n * ```ts\n * const install = useInstall()\n * if (install.canPrompt.value) await install.prompt()\n * ```\n */\nexport function useInstall() {\n  async function prompt(): Promise<boolean> {\n    const event = deferred.value\n    if (!event) return false\n\n    await event.prompt()\n    const { outcome } = await event.userChoice\n\n    // The event is single-use: Chromium refuses a second prompt() on it.\n    deferred.value = null\n\n    return outcome === 'accepted'\n  }\n\n  return {\n    isInstalled: computed(() => installed.value),\n    /** A button can open the real install sheet. */\n    canPrompt: computed(() => !installed.value && deferred.value !== null),\n    /** No API — the user has to be shown the Share menu. */\n    needsManualSteps: computed(() => !installed.value && needsIosInstall()),\n    prompt,\n  }\n}\n","import { computed, ref } from 'vue'\n\nimport { addDays, todayKey } from '../utils/date'\n\n/**\n * A nudge that stops asking for a while after it is dismissed.\n *\n * Both phone apps had this inside their install card, identically: a date in\n * `localStorage`, compared against today. Pulled out because the install card\n * is not the only thing that should stop asking — a notification nudge wants\n * exactly the same behaviour, and had exactly the same code.\n *\n * Storage is wrapped in try/catch on both sides. A private window or a browser\n * set to block site data throws on access, and the honest failure there is a\n * nudge that reappears next session rather than one that crashes the screen it\n * is asking from.\n *\n * @param key - Where the date is kept. Namespace it to the app.\n * @param days - How long to stay quiet after a dismissal.\n */\nexport function useSnooze(key: string, days = 7) {\n  const read = (): string => {\n    try {\n      return localStorage.getItem(key) ?? ''\n    } catch {\n      return ''\n    }\n  }\n\n  const until = ref(read())\n\n  return {\n    /** False while the nudge is snoozed. */\n    isOver: computed(() => todayKey() >= until.value),\n\n    /** Stop asking for `days`. */\n    snooze(): void {\n      const next = addDays(todayKey(), days)\n      until.value = next\n\n      try {\n        localStorage.setItem(key, next)\n      } catch {\n        // Storage blocked; it reappears next session rather than never.\n      }\n    },\n  }\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport { useInstall } from './use-install'\nimport { useSnooze } from './use-snooze'\n\n/**\n * The card that offers to install the app, and remembers being turned down.\n *\n * Both phone apps had this, 111 lines, differing in a storage key and a colour.\n * What is here is the part that was the same: the three-way platform check, the\n * week-long snooze, and the shape.\n *\n * Every string is a prop. The kit does not know a language, and \"Add to Home\n * Screen\" is a sentence about a platform, not about this component.\n */\nconst {\n  storageKey,\n  title,\n  body,\n  action,\n  later,\n  iosTitle = '',\n  iosBody = '',\n  snoozeDays = 7,\n} = defineProps<{\n  /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */\n  storageKey: string\n  title: string\n  body: string\n  /** The install button. Not shown on iOS, which has no API to call. */\n  action: string\n  later: string\n  /** Shown instead of `title` where the user has to use the Share menu. */\n  iosTitle?: string | undefined\n  iosBody?: string | undefined\n  snoozeDays?: number | undefined\n}>()\n\nconst { canPrompt, needsManualSteps, prompt } = useInstall()\nconst { isOver, snooze } = useSnooze(storageKey, snoozeDays)\n\nconst visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value)\n\nasync function install() {\n  await prompt()\n\n  // Accepted or dismissed, stop asking for a week. The prompt is what gets\n  // tiring, not the answer.\n  snooze()\n}\n</script>\n\n<template>\n  <Transition name=\"install\">\n    <section\n      v-if=\"visible\"\n      class=\"border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5\"\n    >\n      <span\n        class=\"bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl\"\n        aria-hidden=\"true\"\n      >\n        <component :is=\"needsManualSteps ? Share : Download\" class=\"size-5\" />\n      </span>\n\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <div>\n          <p class=\"text-ink text-sm font-semibold\">\n            {{ needsManualSteps && iosTitle ? iosTitle : title }}\n          </p>\n          <p class=\"text-ink-soft mt-0.5 text-xs leading-relaxed\">\n            {{ needsManualSteps && iosBody ? iosBody : body }}\n          </p>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <!-- No button on iOS: Safari exposes no way to open the Share sheet\n               from script, so a button here could only fail. -->\n          <BaseButton\n            v-if=\"canPrompt\"\n            variant=\"positive\"\n            pill\n            size=\"xs\"\n            class=\"font-semibold\"\n            @click=\"install\"\n          >\n            {{ action }}\n          </BaseButton>\n\n          <BaseButton pill size=\"xs\" variant=\"quiet\" @click=\"snooze\">{{ later }}</BaseButton>\n        </div>\n      </div>\n    </section>\n  </Transition>\n</template>\n\n<style scoped>\n.install-enter-active,\n.install-leave-active {\n  transition:\n    opacity 200ms ease,\n    transform 200ms ease;\n}\n\n.install-enter-from,\n.install-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .install-enter-from,\n  .install-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport { Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport { useInstall } from './use-install'\nimport { useSnooze } from './use-snooze'\n\n/**\n * The card that offers to install the app, and remembers being turned down.\n *\n * Both phone apps had this, 111 lines, differing in a storage key and a colour.\n * What is here is the part that was the same: the three-way platform check, the\n * week-long snooze, and the shape.\n *\n * Every string is a prop. The kit does not know a language, and \"Add to Home\n * Screen\" is a sentence about a platform, not about this component.\n */\nconst {\n  storageKey,\n  title,\n  body,\n  action,\n  later,\n  iosTitle = '',\n  iosBody = '',\n  snoozeDays = 7,\n} = defineProps<{\n  /** Where the dismissal is remembered. Namespace it: `hibi-install-nudge`. */\n  storageKey: string\n  title: string\n  body: string\n  /** The install button. Not shown on iOS, which has no API to call. */\n  action: string\n  later: string\n  /** Shown instead of `title` where the user has to use the Share menu. */\n  iosTitle?: string | undefined\n  iosBody?: string | undefined\n  snoozeDays?: number | undefined\n}>()\n\nconst { canPrompt, needsManualSteps, prompt } = useInstall()\nconst { isOver, snooze } = useSnooze(storageKey, snoozeDays)\n\nconst visible = computed(() => (canPrompt.value || needsManualSteps.value) && isOver.value)\n\nasync function install() {\n  await prompt()\n\n  // Accepted or dismissed, stop asking for a week. The prompt is what gets\n  // tiring, not the answer.\n  snooze()\n}\n</script>\n\n<template>\n  <Transition name=\"install\">\n    <section\n      v-if=\"visible\"\n      class=\"border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5\"\n    >\n      <span\n        class=\"bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl\"\n        aria-hidden=\"true\"\n      >\n        <component :is=\"needsManualSteps ? Share : Download\" class=\"size-5\" />\n      </span>\n\n      <div class=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <div>\n          <p class=\"text-ink text-sm font-semibold\">\n            {{ needsManualSteps && iosTitle ? iosTitle : title }}\n          </p>\n          <p class=\"text-ink-soft mt-0.5 text-xs leading-relaxed\">\n            {{ needsManualSteps && iosBody ? iosBody : body }}\n          </p>\n        </div>\n\n        <div class=\"flex items-center gap-2\">\n          <!-- No button on iOS: Safari exposes no way to open the Share sheet\n               from script, so a button here could only fail. -->\n          <BaseButton\n            v-if=\"canPrompt\"\n            variant=\"positive\"\n            pill\n            size=\"xs\"\n            class=\"font-semibold\"\n            @click=\"install\"\n          >\n            {{ action }}\n          </BaseButton>\n\n          <BaseButton pill size=\"xs\" variant=\"quiet\" @click=\"snooze\">{{ later }}</BaseButton>\n        </div>\n      </div>\n    </section>\n  </Transition>\n</template>\n\n<style scoped>\n.install-enter-active,\n.install-leave-active {\n  transition:\n    opacity 200ms ease,\n    transform 200ms ease;\n}\n\n.install-enter-from,\n.install-leave-to {\n  opacity: 0;\n  transform: translateY(-4px);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .install-enter-from,\n  .install-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { CheckCircle2, Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport SettingsGroup from '../components/SettingsGroup.vue'\nimport SettingsRow from '../components/SettingsRow.vue'\nimport { useInstall } from './use-install'\n\n/**\n * The way back to installing after the card has been dismissed.\n *\n * The card snoozes for a week; without this row, someone who tapped \"Not now\"\n * and then changed their mind would have nowhere to go. Both phone apps had it,\n * thirty-four lines, with no difference at all.\n *\n * It renders nothing where installing is neither possible nor already done — a\n * settings group that says \"you cannot install this\" is worse than silence.\n */\ndefineProps<{\n  /** The group's heading. */\n  title: string\n  /** The row's label while installing is still possible. */\n  label: string\n  /** The row's label once it is installed. */\n  installedLabel: string\n  body: string\n  /** Shown instead of `body` on iOS, where the user must use the Share menu. */\n  iosBody: string\n  /** The install button. Absent on iOS, which has no API to call. */\n  action: string\n}>()\n\nconst { isInstalled, canPrompt, needsManualSteps, prompt } = useInstall()\n</script>\n\n<template>\n  <SettingsGroup v-if=\"isInstalled || canPrompt || needsManualSteps\" :title=\"title\">\n    <SettingsRow\n      :label=\"isInstalled ? installedLabel : label\"\n      :description=\"isInstalled ? '' : needsManualSteps ? iosBody : body\"\n      :icon=\"isInstalled ? CheckCircle2 : needsManualSteps ? Share : Download\"\n      stacked\n    >\n      <BaseButton v-if=\"canPrompt\" variant=\"primary\" size=\"sm\" class=\"self-start\" @click=\"prompt\">\n        {{ action }}\n      </BaseButton>\n    </SettingsRow>\n  </SettingsGroup>\n</template>\n","<script setup lang=\"ts\">\nimport { CheckCircle2, Download, Share } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\nimport SettingsGroup from '../components/SettingsGroup.vue'\nimport SettingsRow from '../components/SettingsRow.vue'\nimport { useInstall } from './use-install'\n\n/**\n * The way back to installing after the card has been dismissed.\n *\n * The card snoozes for a week; without this row, someone who tapped \"Not now\"\n * and then changed their mind would have nowhere to go. Both phone apps had it,\n * thirty-four lines, with no difference at all.\n *\n * It renders nothing where installing is neither possible nor already done — a\n * settings group that says \"you cannot install this\" is worse than silence.\n */\ndefineProps<{\n  /** The group's heading. */\n  title: string\n  /** The row's label while installing is still possible. */\n  label: string\n  /** The row's label once it is installed. */\n  installedLabel: string\n  body: string\n  /** Shown instead of `body` on iOS, where the user must use the Share menu. */\n  iosBody: string\n  /** The install button. Absent on iOS, which has no API to call. */\n  action: string\n}>()\n\nconst { isInstalled, canPrompt, needsManualSteps, prompt } = useInstall()\n</script>\n\n<template>\n  <SettingsGroup v-if=\"isInstalled || canPrompt || needsManualSteps\" :title=\"title\">\n    <SettingsRow\n      :label=\"isInstalled ? installedLabel : label\"\n      :description=\"isInstalled ? '' : needsManualSteps ? iosBody : body\"\n      :icon=\"isInstalled ? CheckCircle2 : needsManualSteps ? Share : Download\"\n      stacked\n    >\n      <BaseButton v-if=\"canPrompt\" variant=\"primary\" size=\"sm\" class=\"self-start\" @click=\"prompt\">\n        {{ action }}\n      </BaseButton>\n    </SettingsRow>\n  </SettingsGroup>\n</template>\n","<script setup lang=\"ts\">\nimport { RefreshCw, X } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The card that says a new version is waiting.\n *\n * `registerType: 'prompt'` means a new service worker waits rather than taking\n * over, and this is what asks whether to apply it. Asking rather than reloading\n * is the decision worth keeping: an automatic swap mid-sentence loses whatever\n * was being typed.\n *\n * **The service worker stays the app's.** `virtual:pwa-register/vue` is a\n * build-time module from `vite-plugin-pwa`, and a library cannot import one —\n * so the app owns `useRegisterSW` and hands the answer down as `open`. That\n * split is also honest: whether an update is waiting is the app's business,\n * and what the card looks like is this component's.\n *\n * @example\n * ```vue\n * <script setup>\n * const { needRefresh, updateServiceWorker } = useRegisterSW()\n * <\\/script>\n *\n * <UpdatePrompt\n *   :open=\"needRefresh\"\n *   :title=\"t('pwa.updateTitle')\"\n *   :body=\"t('pwa.updateBody')\"\n *   :action=\"t('pwa.reload')\"\n *   :dismiss-label=\"t('pwa.later')\"\n *   @update=\"updateServiceWorker(true)\"\n *   @dismiss=\"needRefresh = false\"\n * />\n * ```\n */\ndefineProps<{\n  open: boolean\n  title: string\n  body: string\n  action: string\n  /** The X's accessible name. An X on its own has none. */\n  dismissLabel: string\n}>()\n\ndefineEmits<{ update: []; dismiss: [] }>()\n</script>\n\n<template>\n  <Transition name=\"update\">\n    <aside v-if=\"open\" class=\"update-card\" role=\"status\">\n      <span class=\"update-icon\" aria-hidden=\"true\">\n        <RefreshCw class=\"size-4\" />\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-ink text-sm font-semibold\">{{ title }}</p>\n        <p class=\"text-ink-soft text-xs leading-snug\">{{ body }}</p>\n      </div>\n\n      <BaseButton\n        variant=\"primary\"\n        pill\n        size=\"xs\"\n        class=\"shrink-0 font-semibold\"\n        @click=\"$emit('update')\"\n      >\n        {{ action }}\n      </BaseButton>\n\n      <BaseButton\n        variant=\"quiet\"\n        icon\n        pill\n        size=\"sm\"\n        class=\"shrink-0\"\n        :aria-label=\"dismissLabel\"\n        @click=\"$emit('dismiss')\"\n      >\n        <X class=\"size-4\" />\n      </BaseButton>\n    </aside>\n  </Transition>\n</template>\n\n<style scoped>\n/* Sits above the tab bar and the action button, because it outranks both — but\n   absolutely inside its container, so on a desktop-sized shell it does not\n   float off into the page. Give the shell `relative`. */\n.update-card {\n  border-color: var(--color-hair);\n  background: color-mix(in srgb, var(--color-surface) 95%, transparent);\n  border-radius: var(--radius-card);\n  position: absolute;\n  left: 50%;\n  z-index: 50;\n  display: flex;\n  width: 100%;\n  max-width: 360px;\n  align-items: center;\n  gap: 0.75rem;\n  border-width: 1px;\n  padding: 0.75rem;\n  backdrop-filter: blur(12px);\n  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);\n  transform: translateX(-50%);\n  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.update-icon {\n  background: color-mix(in srgb, var(--color-primary) 15%, transparent);\n  color: var(--color-primary);\n  display: flex;\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.75rem;\n}\n\n.update-enter-active,\n.update-leave-active {\n  transition:\n    opacity 250ms ease,\n    transform 250ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n.update-enter-from,\n.update-leave-to {\n  opacity: 0;\n  transform: translate(-50%, 1rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .update-enter-from,\n  .update-leave-to {\n    transform: translate(-50%, 0);\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { RefreshCw, X } from 'lucide-vue-next'\n\nimport BaseButton from '../components/BaseButton.vue'\n\n/**\n * The card that says a new version is waiting.\n *\n * `registerType: 'prompt'` means a new service worker waits rather than taking\n * over, and this is what asks whether to apply it. Asking rather than reloading\n * is the decision worth keeping: an automatic swap mid-sentence loses whatever\n * was being typed.\n *\n * **The service worker stays the app's.** `virtual:pwa-register/vue` is a\n * build-time module from `vite-plugin-pwa`, and a library cannot import one —\n * so the app owns `useRegisterSW` and hands the answer down as `open`. That\n * split is also honest: whether an update is waiting is the app's business,\n * and what the card looks like is this component's.\n *\n * @example\n * ```vue\n * <script setup>\n * const { needRefresh, updateServiceWorker } = useRegisterSW()\n * <\\/script>\n *\n * <UpdatePrompt\n *   :open=\"needRefresh\"\n *   :title=\"t('pwa.updateTitle')\"\n *   :body=\"t('pwa.updateBody')\"\n *   :action=\"t('pwa.reload')\"\n *   :dismiss-label=\"t('pwa.later')\"\n *   @update=\"updateServiceWorker(true)\"\n *   @dismiss=\"needRefresh = false\"\n * />\n * ```\n */\ndefineProps<{\n  open: boolean\n  title: string\n  body: string\n  action: string\n  /** The X's accessible name. An X on its own has none. */\n  dismissLabel: string\n}>()\n\ndefineEmits<{ update: []; dismiss: [] }>()\n</script>\n\n<template>\n  <Transition name=\"update\">\n    <aside v-if=\"open\" class=\"update-card\" role=\"status\">\n      <span class=\"update-icon\" aria-hidden=\"true\">\n        <RefreshCw class=\"size-4\" />\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-ink text-sm font-semibold\">{{ title }}</p>\n        <p class=\"text-ink-soft text-xs leading-snug\">{{ body }}</p>\n      </div>\n\n      <BaseButton\n        variant=\"primary\"\n        pill\n        size=\"xs\"\n        class=\"shrink-0 font-semibold\"\n        @click=\"$emit('update')\"\n      >\n        {{ action }}\n      </BaseButton>\n\n      <BaseButton\n        variant=\"quiet\"\n        icon\n        pill\n        size=\"sm\"\n        class=\"shrink-0\"\n        :aria-label=\"dismissLabel\"\n        @click=\"$emit('dismiss')\"\n      >\n        <X class=\"size-4\" />\n      </BaseButton>\n    </aside>\n  </Transition>\n</template>\n\n<style scoped>\n/* Sits above the tab bar and the action button, because it outranks both — but\n   absolutely inside its container, so on a desktop-sized shell it does not\n   float off into the page. Give the shell `relative`. */\n.update-card {\n  border-color: var(--color-hair);\n  background: color-mix(in srgb, var(--color-surface) 95%, transparent);\n  border-radius: var(--radius-card);\n  position: absolute;\n  left: 50%;\n  z-index: 50;\n  display: flex;\n  width: 100%;\n  max-width: 360px;\n  align-items: center;\n  gap: 0.75rem;\n  border-width: 1px;\n  padding: 0.75rem;\n  backdrop-filter: blur(12px);\n  box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1);\n  transform: translateX(-50%);\n  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.update-icon {\n  background: color-mix(in srgb, var(--color-primary) 15%, transparent);\n  color: var(--color-primary);\n  display: flex;\n  height: 2.25rem;\n  width: 2.25rem;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n  border-radius: 0.75rem;\n}\n\n.update-enter-active,\n.update-leave-active {\n  transition:\n    opacity 250ms ease,\n    transform 250ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n\n.update-enter-from,\n.update-leave-to {\n  opacity: 0;\n  transform: translate(-50%, 1rem);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .update-enter-from,\n  .update-leave-to {\n    transform: translate(-50%, 0);\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/styles.css

@@ -25,6 +25,51 @@
 }
 }
 
+.tour-enter-active[data-v-75292716],
+.tour-leave-active[data-v-75292716] {
+  transition: opacity 220ms ease;
+}
+.tour-enter-from[data-v-75292716],
+.tour-leave-to[data-v-75292716] {
+  opacity: 0;
+}
+.tour-forward-enter-active[data-v-75292716],
+.tour-backward-enter-active[data-v-75292716] {
+  transition:
+    opacity 260ms ease-out,
+    transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.tour-forward-leave-active[data-v-75292716],
+.tour-backward-leave-active[data-v-75292716] {
+  transition:
+    opacity 130ms ease-in,
+    transform 130ms ease-in;
+}
+.tour-forward-enter-from[data-v-75292716] {
+  opacity: 0;
+  transform: translateX(1.25rem);
+}
+.tour-forward-leave-to[data-v-75292716] {
+  opacity: 0;
+  transform: translateX(-0.75rem);
+}
+.tour-backward-enter-from[data-v-75292716] {
+  opacity: 0;
+  transform: translateX(-1.25rem);
+}
+.tour-backward-leave-to[data-v-75292716] {
+  opacity: 0;
+  transform: translateX(0.75rem);
+}
+@media (prefers-reduced-motion: reduce) {
+.tour-forward-enter-from[data-v-75292716],
+  .tour-forward-leave-to[data-v-75292716],
+  .tour-backward-enter-from[data-v-75292716],
+  .tour-backward-leave-to[data-v-75292716] {
+    transform: none;
+}
+}
+
 /* Movement is small and downward from the top, upward from the bottom — the
    direction it came from either way. */
 .toast-enter-active[data-v-f1a3439c],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rei-kit",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Vue 3 and Tailwind 4 design system and shared runtime. Extracted from Hibi.",
   "license": "MIT",
   "author": "Ramazan Doğan",

package/dist/_plugin-vue_export-helper-3AcMDTtW.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"_plugin-vue_export-helper-3AcMDTtW.js","names":[],"sources":["../src/utils/date.ts","../src/utils/platform.ts","../src/components/BaseButton.vue","../src/components/BaseButton.vue"],"sourcesContent":["/**\n * Local calendar-day helpers.\n *\n * Every function is pure and works on `YYYY-MM-DD` keys, the same shape as the\n * `date` columns in Postgres. Nothing here calls `toISOString`: that converts to\n * UTC, so in a UTC+9 timezone every entry made between midnight and 09:00 would\n * be written to the previous day.\n */\n\n/**\n * Formats a `Date` as a local `YYYY-MM-DD` key.\n *\n * @param date - Any `Date`; only its local year, month and day are read.\n * @returns The calendar day in the runtime's own timezone.\n *\n * @example\n * ```ts\n * // 2026-08-23 01:30 in Tokyo\n * toDateKey(new Date())        // '2026-08-23'\n * new Date().toISOString()     // '2026-08-22T16:30…'  ← the bug\n * ```\n */\nexport function toDateKey(date: Date): string {\n  const year = String(date.getFullYear()).padStart(4, '0')\n  const month = String(date.getMonth() + 1).padStart(2, '0')\n  const day = String(date.getDate()).padStart(2, '0')\n\n  return `${year}-${month}-${day}`\n}\n\n/** Today's key in the user's own timezone. */\nexport function todayKey(): string {\n  return toDateKey(new Date())\n}\n\n/**\n * Parses a `YYYY-MM-DD` key into a `Date` at local midnight.\n *\n * @param key - A key produced by {@link toDateKey}.\n * @returns Local midnight of that calendar day.\n * @throws If the key is not three numeric parts.\n *\n * @example\n * ```ts\n * fromDateKey('2026-08-23')      // local midnight, correct\n * new Date('2026-08-23')         // UTC midnight — shifts a day in some zones\n * ```\n */\nexport function fromDateKey(key: string): Date {\n  const [year, month, day] = key.split('-').map(Number)\n\n  if (year === undefined || month === undefined || day === undefined) {\n    throw new Error(`Invalid date key: ${key}`)\n  }\n\n  return new Date(year, month - 1, day)\n}\n\n/**\n * Shifts a date key by whole calendar days.\n *\n * Uses `setDate`, which is calendar-aware: it rolls over month and year ends,\n * and stays correct across daylight-saving transitions. Adding\n * `days * 86_400_000` milliseconds would not — a DST day is 23 or 25 hours long.\n *\n * @param key - Starting `YYYY-MM-DD` key.\n * @param days - Days to add; negative goes back.\n * @returns The resulting key.\n *\n * @example\n * ```ts\n * addDays('2026-01-31', 1)   // '2026-02-01'\n * addDays('2026-01-01', -1)  // '2025-12-31'\n * addDays('2028-02-28', 1)   // '2028-02-29'  — leap year\n * ```\n */\nexport function addDays(key: string, days: number): string {\n  const date = fromDateKey(key)\n  date.setDate(date.getDate() + days)\n\n  return toDateKey(date)\n}\n\n/**\n * The last `count` days ending today, oldest first.\n *\n * `today` is a parameter so the function stays pure and testable; call sites\n * normally omit it.\n *\n * @param count - How many days to return, including `today`.\n * @param today - End of the range. Defaults to the real today.\n * @returns Keys in ascending order.\n *\n * @example\n * ```ts\n * lastNDays(3, '2026-08-23')  // ['2026-08-21', '2026-08-22', '2026-08-23']\n * ```\n */\nexport function lastNDays(count: number, today: string = todayKey()): string[] {\n  const keys: string[] = []\n\n  for (let offset = count - 1; offset >= 0; offset -= 1) {\n    keys.push(addDays(today, -offset))\n  }\n\n  return keys\n}\n\n/** 0 = week starts on Sunday, 1 = on Monday. Mirrors `profiles.week_starts_on`. */\nexport type WeekStart = 0 | 1\n\n/**\n * The first day of the week containing `key`.\n *\n * The user's preference is a parameter, not a module-level setting: changing it\n * in Profile has to re-render the week grid and the year heatmap immediately,\n * and a global would make that a hidden dependency.\n *\n * @param key - Any day in the week.\n * @param weekStartsOn - 0 for Sunday, 1 for Monday.\n * @returns Key of that week's first day.\n *\n * @example\n * ```ts\n * // 2026-08-23 is a Sunday\n * startOfWeek('2026-08-23', 1)  // '2026-08-17'  — previous Monday\n * startOfWeek('2026-08-23', 0)  // '2026-08-23'  — already Sunday\n * ```\n */\nexport function startOfWeek(key: string, weekStartsOn: WeekStart): string {\n  const weekday = fromDateKey(key).getDay()\n  const offset = (weekday - weekStartsOn + 7) % 7\n\n  return addDays(key, -offset)\n}\n\n/**\n * Every day of a calendar year, in order.\n *\n * Leap years fall out of the loop for free: it walks day by day until the year\n * rolls over, so February 29 is included when it exists.\n *\n * @param year - Four-digit year.\n * @returns 365 or 366 keys, oldest first.\n */\nexport function eachDayOfYear(year: number): string[] {\n  const keys: string[] = []\n  const date = new Date(year, 0, 1)\n\n  while (date.getFullYear() === year) {\n    keys.push(toDateKey(date))\n    date.setDate(date.getDate() + 1)\n  }\n\n  return keys\n}\n\n/**\n * Empty cells before a block's first day in a seven-row column grid.\n *\n * The grid fills column by column, so the first column is only partly used\n * unless the block starts exactly on the week's first day. An off-by-one here\n * shifts the whole block by a row, so this is unit tested.\n *\n * @param firstDayKey - First day of the block, e.g. `'2026-02-01'`.\n * @param weekStartsOn - 0 for Sunday, 1 for Monday.\n * @returns 0-6 blank cells.\n *\n * @example\n * ```ts\n * leadingBlanks('2026-01-01', 1)  // 3 — a Thursday, Mon-Wed are blank\n * leadingBlanks('2024-01-01', 1)  // 0 — a Monday\n * ```\n */\nexport function leadingBlanks(firstDayKey: string, weekStartsOn: WeekStart): number {\n  return (fromDateKey(firstDayKey).getDay() - weekStartsOn + 7) % 7\n}\n","/**\n * Whether the app is running from the Home Screen rather than a browser tab.\n *\n * Two checks because iOS predates the standard one: `display-mode: standalone`\n * is the modern signal, `navigator.standalone` is Safari's own.\n */\nexport function isInstalled(): boolean {\n  if (typeof window === 'undefined') return false\n\n  return (\n    window.matchMedia('(display-mode: standalone)').matches ||\n    (navigator as Navigator & { standalone?: boolean }).standalone === true\n  )\n}\n\n/** iPhone and iPad, including iPadOS reporting itself as a Mac. */\nexport function isApplePortable(): boolean {\n  if (typeof window === 'undefined') return false\n\n  return (\n    /iPad|iPhone|iPod/.test(navigator.userAgent) ||\n    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)\n  )\n}\n\n/**\n * Whether this device can only receive notifications once the app is installed.\n *\n * Safari on iOS grants notification permission to an installed web app and to\n * nothing else — in a normal tab the request does not even prompt. Telling the\n * user to allow notifications there is asking for something the browser will\n * not offer, so the UI has to say \"add to Home Screen\" instead.\n *\n * @example\n * ```ts\n * if (needsIosInstall()) // show the Home Screen instruction, not the button\n * ```\n */\nexport function needsIosInstall(): boolean {\n  return isApplePortable() && !isInstalled()\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * The kit's button, and — when asked — its link.\n *\n * `as` exists because a button and a link are the same shape and a different\n * element, and the app was resolving that by nesting them: a consumer had\n * `<RouterLink><BaseButton>` in every call to action, which is an `<a>` around\n * a `<button>`. That is invalid HTML, two stops in the tab order and two\n * controls to a screen reader, for one thing on the screen. Whether something\n * navigates is the app's decision; carrying it is this component's job.\n *\n * `router-link` is resolved by name rather than imported, so `vue-router` stays\n * the optional peer it is. Only an app that passes `as=\"router-link\"` needs it,\n * and an app that passes it has it.\n */\nconst {\n  as = 'button',\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  disabled = false,\n  type = 'button',\n  icon = false,\n  block = false,\n  pill = false,\n  pressed = undefined,\n  to = undefined,\n  href = undefined,\n} = defineProps<{\n  /** What to render. `button` unless this navigates. */\n  as?: 'button' | 'a' | 'router-link' | undefined\n  /**\n   * `link` is a real action that should read as text — \"clear this note\",\n   * \"remove\", \"change category\". It has no surface at all, so it also has no\n   * height and no padding: giving it either would make it a ghost button,\n   * which is a different thing and was already here.\n   */\n  variant?:\n    | 'primary'\n    | 'secondary'\n    | 'ghost'\n    | 'quiet'\n    | 'destructive'\n    | 'row'\n    | 'danger'\n    | 'positive'\n    | 'warning'\n    | 'accent'\n    | 'link'\n    | 'unstyled'\n    | undefined\n  /** `xs` is the action inside a prompt or a nudge, not on a page. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | undefined\n  loading?: boolean | undefined\n  disabled?: boolean | undefined\n  /** Ignored unless `as` is `button`. */\n  type?: 'button' | 'submit' | undefined\n  /**\n   * Square, sized to its icon, with no label beside it.\n   *\n   * **Pass `aria-label`.** An icon on its own has no accessible name, and a\n   * control a screen reader announces as \"button\" is not usable. Attributes\n   * fall through, so `aria-label` lands where it should — nothing here can\n   * check that you passed one, which is why it is said this loudly.\n   */\n  icon?: boolean | undefined\n  /** Fills its container. The ordinary case under a form. */\n  block?: boolean | undefined\n  /** For `as=\"router-link\"`. */\n  to?: string | Record<string, unknown> | undefined\n  /** For `as=\"a\"`. */\n  href?: string | undefined\n  /**\n   * Fully rounded rather than card-cornered.\n   *\n   * Every install prompt, update prompt and nudge across the apps used the\n   * same pair — a filled pill to act and a quiet one to dismiss — and none of\n   * them could use this component, because it only knew one corner radius.\n   */\n  pill?: boolean | undefined\n  /**\n   * That this button is a switch, and whether it is on.\n   *\n   * Omit it and the button is an action. Pass it and the button becomes a\n   * toggle: `aria-pressed` is written, and the variants that have an \"off\"\n   * look — ghost, quiet, secondary — take a filled one when on.\n   *\n   * There were 18 of these hand-written across the three apps, every one a\n   * picker cell or a filter chip, and almost none of them said `aria-pressed`\n   * at all. A screen reader met a row of identical buttons with no way to know\n   * which was chosen.\n   */\n  pressed?: boolean | undefined\n}>()\n\nconst VARIANT_CLASS = {\n  primary: 'bg-primary text-white hover:bg-primary/90',\n  /*\n   * An action that is real but not the one being urged.\n   *\n   * `ghost` had been standing in for this and cannot: with no border and no\n   * fill it reads as text, so \"Save draft\" sitting next to \"Publish\" looked\n   * like a caption rather than the other half of a choice. Ghost is for a\n   * control that should recede until it is wanted — a toolbar, a menu row —\n   * and that is a different job.\n   */\n  secondary: 'border-hair bg-surface text-ink border hover:bg-muted',\n  ghost: 'bg-transparent text-ink hover:bg-muted',\n  /*\n   * Quiet until you reach for it, and then plainly destructive: a delete at\n   * the end of a row, a \"remove this note\", an archive.\n   *\n   * Not `danger`, which is filled and shouts before it is needed — a red\n   * button in a list of rows makes the list look like a warning. And not\n   * `quiet` with a `hover:text-negative` class beside it, which is how all\n   * three apps were doing it: that class and the variant's own\n   * `hover:text-ink` set the same property at the same specificity, so which\n   * one wins depends on the order they happen to land in the stylesheet.\n   *\n   * Fifteen of these across the three apps, and every one of them was that\n   * coin toss.\n   */\n  destructive: 'bg-transparent text-ink-soft hover:text-negative',\n  /*\n   * A line in a list that is also a control: a settings row, a node in a tree,\n   * a heading that opens something.\n   *\n   * Full width, aligned to the start, and a hover that fills the whole line\n   * rather than a box inside it. Every app had written this — `.tree-row`,\n   * `.row`, `.header-action` — because a button that centres its content\n   * cannot be a row, and the alignment is the only thing that had to change.\n   *\n   * Padding stays the app's: a menu row and a tree node are not the same\n   * height, and the kit has no opinion about which one this is.\n   */\n  row: 'w-full justify-start text-left bg-transparent text-ink hover:bg-muted',\n  /*\n   * The control that is present without asking for attention: a dismiss beside\n   * an install prompt, a chevron beside a month, a delete at the end of a row.\n   *\n   * `ghost` is not this. Ghost keeps full-strength ink; this one starts soft\n   * and darkens, which is the difference between a control waiting to be used\n   * and one that is merely available. The pair `text-ink-soft hover:text-ink`\n   * was hand-written 47 times across the three apps.\n   *\n   * It fills on hover, and 0.11.0 got that half-right by fill... only for\n   * icons. The evidence said otherwise once the third app was read: an editor\n   * toolbar's buttons carry text and fill exactly the same way. The shape is\n   * \"a control in a strip\", not \"a control with a glyph in it\". A text action\n   * that should have no surface at all is `link`.\n   */\n  quiet: 'bg-transparent text-ink-soft hover:bg-muted hover:text-ink',\n  danger: 'bg-negative text-white hover:bg-negative/90',\n  /*\n   * The rest of the roles the kit already declares.\n   *\n   * `tokens.css` names five colour roles and this component exposed two of\n   * them, so an app that wanted a success-coloured action had to hand-write\n   * the button — which is what Hibi's green install button is. A component\n   * that cannot use a role its own design system declares is not avoiding a\n   * guess; it is incomplete.\n   */\n  positive: 'bg-positive text-white hover:bg-positive/90',\n  warning: 'bg-warning text-white hover:bg-warning/90',\n  accent: 'bg-accent text-white hover:bg-accent/90',\n  /* No fill, no border, no box: underlined so it is still obviously a control\n     without one. `ghost` cannot stand in — it has a hover surface and a\n     radius, so it reads as a button that happens to be empty. */\n  link: 'bg-transparent underline underline-offset-2 hover:opacity-80',\n  /*\n   * Everything this component is, except the paint.\n   *\n   * The reason it exists is measurable: across the three apps there were 58\n   * raw `<button>` elements sitting in 24 files that already imported and used\n   * `BaseButton`. The developer reached for the kit and gave up halfway down\n   * the same file — because the kit offered all of its appearance or none of\n   * itself, and what those places needed was everything but the appearance.\n   *\n   * A picker cell, a chip, a calendar day: the surface is the app's, and it\n   * should be. The element, the focus ring, the disabled handling, the\n   * `aria-pressed` bookkeeping and the `as` switch are not, and were being\n   * rewritten every time — usually without the focus ring.\n   */\n  unstyled: '',\n} as const\n\n/* Two scales, because a square control cannot take horizontal padding and\n   still be square. `lg` is here for a wide page's call to action: a 44px\n   button is right under a thumb and undersized under a headline. */\nconst SIZE_CLASS = {\n  xs: 'h-8 px-3 text-xs',\n  sm: 'h-9 px-3 text-sm',\n  md: 'h-11 px-4 text-base',\n  lg: 'h-14 px-6 text-lg',\n} as const\n\nconst ICON_SIZE_CLASS = {\n  xs: 'size-8 text-xs',\n  sm: 'size-9 text-sm',\n  md: 'size-11 text-base',\n  lg: 'size-14 text-lg',\n} as const\n\n/* A row is sized by its padding, not by a height. A settings line holds one\n   line of text and a tree node can hold two, and a fixed height turns the\n   second into an overflow. */\nconst ROW_SIZE_CLASS = {\n  xs: 'px-2 py-1.5 text-xs',\n  sm: 'px-3 py-2 text-sm',\n  md: 'px-3 py-2.5 text-base',\n  lg: 'px-4 py-3 text-lg',\n} as const\n\n/* A link takes the type size and nothing else. Height and padding are what\n   make a surface, and this variant is the one without one. */\nconst LINK_SIZE_CLASS = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n} as const\n\nconst sizing = computed(() => {\n  // Unstyled owns no box, so it takes no size: the app's own classes decide.\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return LINK_SIZE_CLASS[size]\n  if (variant === 'row') return ROW_SIZE_CLASS[size]\n  return icon ? ICON_SIZE_CLASS[size] : SIZE_CLASS[size]\n})\n\n/* The variants with an \"off\" look, and what \"on\" looks like for them. The\n   filled ones are already on; link and unstyled have no surface to fill. */\nconst PRESSED_CLASS: Partial<Record<string, string>> = {\n  ghost: 'bg-primary text-white hover:bg-primary/90',\n  quiet: 'bg-primary text-white hover:bg-primary/90',\n  secondary: 'bg-primary border-primary text-white hover:bg-primary/90',\n  /* A selected row is filled, not recoloured: the line stays a line, and the\n     fill is what a list uses to say \"this one\". Filling it with the primary\n     colour instead would make one row of a list shout. */\n  row: 'w-full justify-start text-left bg-muted text-ink hover:bg-muted',\n}\n\nconst surface = computed(() => {\n  if (pressed === true) return PRESSED_CLASS[variant] ?? VARIANT_CLASS[variant]\n\n  /* Destructive tints its own fill rather than borrowing the neutral one: a\n     red glyph on a grey wash reads as two different states at once. */\n  if (variant === 'destructive') return `${VARIANT_CLASS.destructive} hover:bg-negative/10`\n\n  return VARIANT_CLASS[variant]\n})\n\n/* Layout and feel, which unstyled does not impose either — but the focus ring\n   and the disabled handling stay, because those are the floor. A raw <button>\n   is what happens when a component makes them optional.\n   \n   Colour is in the transition, not just transform. Every variant here changes\n   colour on hover and none of them animated it, so every button in every\n   consuming app snapped while the hand-written controls beside them faded —\n   `transition-colors` appears 106 times across the three apps, which is the\n   convention this component was the only thing not following. */\nconst shell = computed(() => {\n  if (variant === 'unstyled') return ''\n\n  const feel = 'transition-[transform,color,background-color,border-color] duration-100 select-none'\n\n  /* A row does not press. Scaling a full-width line looks like the list itself\n     flinched, and every hand-written row in the apps animated colour only. */\n  if (variant === 'row') return `inline-flex items-center gap-2 font-medium ${feel}`\n\n  return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`\n})\n\nconst radius = computed(() => {\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return 'rounded-xs'\n  return pill ? 'rounded-full' : 'rounded-card'\n})\n\n/** Anything that is not a `<button>` cannot be `disabled`; it has to be told. */\nconst inactive = computed(() => disabled || loading)\n\nconst linkProps = computed(() => {\n  if (as === 'router-link') return { to }\n  // The href is dropped rather than kept alongside aria-disabled: an anchor\n  // without one is not focusable and not activatable, which is the whole of\n  // what \"disabled\" means for a link.\n  if (as === 'a') return inactive.value ? {} : { href }\n  return {}\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"linkProps\"\n    :type=\"as === 'button' ? type : undefined\"\n    :disabled=\"as === 'button' ? inactive : undefined\"\n    :aria-disabled=\"as !== 'button' && inactive ? 'true' : undefined\"\n    :aria-busy=\"loading\"\n    :aria-pressed=\"pressed === undefined ? undefined : String(pressed)\"\n    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\"\n    :class=\"[shell, surface, sizing, radius, block ? 'w-full' : '']\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"size-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    />\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * The kit's button, and — when asked — its link.\n *\n * `as` exists because a button and a link are the same shape and a different\n * element, and the app was resolving that by nesting them: a consumer had\n * `<RouterLink><BaseButton>` in every call to action, which is an `<a>` around\n * a `<button>`. That is invalid HTML, two stops in the tab order and two\n * controls to a screen reader, for one thing on the screen. Whether something\n * navigates is the app's decision; carrying it is this component's job.\n *\n * `router-link` is resolved by name rather than imported, so `vue-router` stays\n * the optional peer it is. Only an app that passes `as=\"router-link\"` needs it,\n * and an app that passes it has it.\n */\nconst {\n  as = 'button',\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  disabled = false,\n  type = 'button',\n  icon = false,\n  block = false,\n  pill = false,\n  pressed = undefined,\n  to = undefined,\n  href = undefined,\n} = defineProps<{\n  /** What to render. `button` unless this navigates. */\n  as?: 'button' | 'a' | 'router-link' | undefined\n  /**\n   * `link` is a real action that should read as text — \"clear this note\",\n   * \"remove\", \"change category\". It has no surface at all, so it also has no\n   * height and no padding: giving it either would make it a ghost button,\n   * which is a different thing and was already here.\n   */\n  variant?:\n    | 'primary'\n    | 'secondary'\n    | 'ghost'\n    | 'quiet'\n    | 'destructive'\n    | 'row'\n    | 'danger'\n    | 'positive'\n    | 'warning'\n    | 'accent'\n    | 'link'\n    | 'unstyled'\n    | undefined\n  /** `xs` is the action inside a prompt or a nudge, not on a page. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | undefined\n  loading?: boolean | undefined\n  disabled?: boolean | undefined\n  /** Ignored unless `as` is `button`. */\n  type?: 'button' | 'submit' | undefined\n  /**\n   * Square, sized to its icon, with no label beside it.\n   *\n   * **Pass `aria-label`.** An icon on its own has no accessible name, and a\n   * control a screen reader announces as \"button\" is not usable. Attributes\n   * fall through, so `aria-label` lands where it should — nothing here can\n   * check that you passed one, which is why it is said this loudly.\n   */\n  icon?: boolean | undefined\n  /** Fills its container. The ordinary case under a form. */\n  block?: boolean | undefined\n  /** For `as=\"router-link\"`. */\n  to?: string | Record<string, unknown> | undefined\n  /** For `as=\"a\"`. */\n  href?: string | undefined\n  /**\n   * Fully rounded rather than card-cornered.\n   *\n   * Every install prompt, update prompt and nudge across the apps used the\n   * same pair — a filled pill to act and a quiet one to dismiss — and none of\n   * them could use this component, because it only knew one corner radius.\n   */\n  pill?: boolean | undefined\n  /**\n   * That this button is a switch, and whether it is on.\n   *\n   * Omit it and the button is an action. Pass it and the button becomes a\n   * toggle: `aria-pressed` is written, and the variants that have an \"off\"\n   * look — ghost, quiet, secondary — take a filled one when on.\n   *\n   * There were 18 of these hand-written across the three apps, every one a\n   * picker cell or a filter chip, and almost none of them said `aria-pressed`\n   * at all. A screen reader met a row of identical buttons with no way to know\n   * which was chosen.\n   */\n  pressed?: boolean | undefined\n}>()\n\nconst VARIANT_CLASS = {\n  primary: 'bg-primary text-white hover:bg-primary/90',\n  /*\n   * An action that is real but not the one being urged.\n   *\n   * `ghost` had been standing in for this and cannot: with no border and no\n   * fill it reads as text, so \"Save draft\" sitting next to \"Publish\" looked\n   * like a caption rather than the other half of a choice. Ghost is for a\n   * control that should recede until it is wanted — a toolbar, a menu row —\n   * and that is a different job.\n   */\n  secondary: 'border-hair bg-surface text-ink border hover:bg-muted',\n  ghost: 'bg-transparent text-ink hover:bg-muted',\n  /*\n   * Quiet until you reach for it, and then plainly destructive: a delete at\n   * the end of a row, a \"remove this note\", an archive.\n   *\n   * Not `danger`, which is filled and shouts before it is needed — a red\n   * button in a list of rows makes the list look like a warning. And not\n   * `quiet` with a `hover:text-negative` class beside it, which is how all\n   * three apps were doing it: that class and the variant's own\n   * `hover:text-ink` set the same property at the same specificity, so which\n   * one wins depends on the order they happen to land in the stylesheet.\n   *\n   * Fifteen of these across the three apps, and every one of them was that\n   * coin toss.\n   */\n  destructive: 'bg-transparent text-ink-soft hover:text-negative',\n  /*\n   * A line in a list that is also a control: a settings row, a node in a tree,\n   * a heading that opens something.\n   *\n   * Full width, aligned to the start, and a hover that fills the whole line\n   * rather than a box inside it. Every app had written this — `.tree-row`,\n   * `.row`, `.header-action` — because a button that centres its content\n   * cannot be a row, and the alignment is the only thing that had to change.\n   *\n   * Padding stays the app's: a menu row and a tree node are not the same\n   * height, and the kit has no opinion about which one this is.\n   */\n  row: 'w-full justify-start text-left bg-transparent text-ink hover:bg-muted',\n  /*\n   * The control that is present without asking for attention: a dismiss beside\n   * an install prompt, a chevron beside a month, a delete at the end of a row.\n   *\n   * `ghost` is not this. Ghost keeps full-strength ink; this one starts soft\n   * and darkens, which is the difference between a control waiting to be used\n   * and one that is merely available. The pair `text-ink-soft hover:text-ink`\n   * was hand-written 47 times across the three apps.\n   *\n   * It fills on hover, and 0.11.0 got that half-right by fill... only for\n   * icons. The evidence said otherwise once the third app was read: an editor\n   * toolbar's buttons carry text and fill exactly the same way. The shape is\n   * \"a control in a strip\", not \"a control with a glyph in it\". A text action\n   * that should have no surface at all is `link`.\n   */\n  quiet: 'bg-transparent text-ink-soft hover:bg-muted hover:text-ink',\n  danger: 'bg-negative text-white hover:bg-negative/90',\n  /*\n   * The rest of the roles the kit already declares.\n   *\n   * `tokens.css` names five colour roles and this component exposed two of\n   * them, so an app that wanted a success-coloured action had to hand-write\n   * the button — which is what Hibi's green install button is. A component\n   * that cannot use a role its own design system declares is not avoiding a\n   * guess; it is incomplete.\n   */\n  positive: 'bg-positive text-white hover:bg-positive/90',\n  warning: 'bg-warning text-white hover:bg-warning/90',\n  accent: 'bg-accent text-white hover:bg-accent/90',\n  /* No fill, no border, no box: underlined so it is still obviously a control\n     without one. `ghost` cannot stand in — it has a hover surface and a\n     radius, so it reads as a button that happens to be empty. */\n  link: 'bg-transparent underline underline-offset-2 hover:opacity-80',\n  /*\n   * Everything this component is, except the paint.\n   *\n   * The reason it exists is measurable: across the three apps there were 58\n   * raw `<button>` elements sitting in 24 files that already imported and used\n   * `BaseButton`. The developer reached for the kit and gave up halfway down\n   * the same file — because the kit offered all of its appearance or none of\n   * itself, and what those places needed was everything but the appearance.\n   *\n   * A picker cell, a chip, a calendar day: the surface is the app's, and it\n   * should be. The element, the focus ring, the disabled handling, the\n   * `aria-pressed` bookkeeping and the `as` switch are not, and were being\n   * rewritten every time — usually without the focus ring.\n   */\n  unstyled: '',\n} as const\n\n/* Two scales, because a square control cannot take horizontal padding and\n   still be square. `lg` is here for a wide page's call to action: a 44px\n   button is right under a thumb and undersized under a headline. */\nconst SIZE_CLASS = {\n  xs: 'h-8 px-3 text-xs',\n  sm: 'h-9 px-3 text-sm',\n  md: 'h-11 px-4 text-base',\n  lg: 'h-14 px-6 text-lg',\n} as const\n\nconst ICON_SIZE_CLASS = {\n  xs: 'size-8 text-xs',\n  sm: 'size-9 text-sm',\n  md: 'size-11 text-base',\n  lg: 'size-14 text-lg',\n} as const\n\n/* A row is sized by its padding, not by a height. A settings line holds one\n   line of text and a tree node can hold two, and a fixed height turns the\n   second into an overflow. */\nconst ROW_SIZE_CLASS = {\n  xs: 'px-2 py-1.5 text-xs',\n  sm: 'px-3 py-2 text-sm',\n  md: 'px-3 py-2.5 text-base',\n  lg: 'px-4 py-3 text-lg',\n} as const\n\n/* A link takes the type size and nothing else. Height and padding are what\n   make a surface, and this variant is the one without one. */\nconst LINK_SIZE_CLASS = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n} as const\n\nconst sizing = computed(() => {\n  // Unstyled owns no box, so it takes no size: the app's own classes decide.\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return LINK_SIZE_CLASS[size]\n  if (variant === 'row') return ROW_SIZE_CLASS[size]\n  return icon ? ICON_SIZE_CLASS[size] : SIZE_CLASS[size]\n})\n\n/* The variants with an \"off\" look, and what \"on\" looks like for them. The\n   filled ones are already on; link and unstyled have no surface to fill. */\nconst PRESSED_CLASS: Partial<Record<string, string>> = {\n  ghost: 'bg-primary text-white hover:bg-primary/90',\n  quiet: 'bg-primary text-white hover:bg-primary/90',\n  secondary: 'bg-primary border-primary text-white hover:bg-primary/90',\n  /* A selected row is filled, not recoloured: the line stays a line, and the\n     fill is what a list uses to say \"this one\". Filling it with the primary\n     colour instead would make one row of a list shout. */\n  row: 'w-full justify-start text-left bg-muted text-ink hover:bg-muted',\n}\n\nconst surface = computed(() => {\n  if (pressed === true) return PRESSED_CLASS[variant] ?? VARIANT_CLASS[variant]\n\n  /* Destructive tints its own fill rather than borrowing the neutral one: a\n     red glyph on a grey wash reads as two different states at once. */\n  if (variant === 'destructive') return `${VARIANT_CLASS.destructive} hover:bg-negative/10`\n\n  return VARIANT_CLASS[variant]\n})\n\n/* Layout and feel, which unstyled does not impose either — but the focus ring\n   and the disabled handling stay, because those are the floor. A raw <button>\n   is what happens when a component makes them optional.\n   \n   Colour is in the transition, not just transform. Every variant here changes\n   colour on hover and none of them animated it, so every button in every\n   consuming app snapped while the hand-written controls beside them faded —\n   `transition-colors` appears 106 times across the three apps, which is the\n   convention this component was the only thing not following. */\nconst shell = computed(() => {\n  if (variant === 'unstyled') return ''\n\n  const feel = 'transition-[transform,color,background-color,border-color] duration-100 select-none'\n\n  /* A row does not press. Scaling a full-width line looks like the list itself\n     flinched, and every hand-written row in the apps animated colour only. */\n  if (variant === 'row') return `inline-flex items-center gap-2 font-medium ${feel}`\n\n  return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`\n})\n\nconst radius = computed(() => {\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return 'rounded-xs'\n  return pill ? 'rounded-full' : 'rounded-card'\n})\n\n/** Anything that is not a `<button>` cannot be `disabled`; it has to be told. */\nconst inactive = computed(() => disabled || loading)\n\nconst linkProps = computed(() => {\n  if (as === 'router-link') return { to }\n  // The href is dropped rather than kept alongside aria-disabled: an anchor\n  // without one is not focusable and not activatable, which is the whole of\n  // what \"disabled\" means for a link.\n  if (as === 'a') return inactive.value ? {} : { href }\n  return {}\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"linkProps\"\n    :type=\"as === 'button' ? type : undefined\"\n    :disabled=\"as === 'button' ? inactive : undefined\"\n    :aria-disabled=\"as !== 'button' && inactive ? 'true' : undefined\"\n    :aria-busy=\"loading\"\n    :aria-pressed=\"pressed === undefined ? undefined : String(pressed)\"\n    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\"\n    :class=\"[shell, surface, sizing, radius, block ? 'w-full' : '']\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"size-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    />\n    <slot />\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/use-theme-_MnaDD5v.js

@@ -1,94 +0,0 @@
-import { ref, watch } from "vue";
-//#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
-export { useTheme as a, setThemeStorageKey as i, isThemePreference as n, readStoredTheme as r, applyTheme as t };
-
-//# sourceMappingURL=use-theme-_MnaDD5v.js.map

package/dist/use-theme-_MnaDD5v.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-theme-_MnaDD5v.js","names":[],"sources":["../src/composables/use-theme.ts"],"sourcesContent":["import { ref, watch } from 'vue'\nimport type { Ref } from 'vue'\n\n/** What the user asked for; `system` follows the OS. */\nexport type ThemePreference = 'system' | 'light' | 'dark'\n\n/**\n * Namespaced by the app, not by this package.\n *\n * Two rei-kit apps served from the same origin would otherwise share one theme\n * setting — and during development on localhost, they will be.\n */\nlet storageKey = 'rei-theme'\n\nexport function isThemePreference(value: unknown): value is ThemePreference {\n  return value === 'system' || value === 'light' || value === 'dark'\n}\n\n/** Reads the stored preference, falling back to `system`. */\nexport function readStoredTheme(): ThemePreference {\n  try {\n    const stored = localStorage.getItem(storageKey)\n\n    return isThemePreference(stored) ? stored : 'system'\n  } catch {\n    return 'system'\n  }\n}\n\nfunction storeTheme(preference: ThemePreference): void {\n  try {\n    localStorage.setItem(storageKey, preference)\n  } catch {\n    // Private mode or blocked storage: the choice just will not persist.\n  }\n}\n\n/**\n * Does the environment prefer a dark scheme?\n *\n * `matchMedia` is checked for on its own rather than inferred from `document`.\n * Having one does not imply having the other: jsdom supplies a document and no\n * `matchMedia`, so a consumer's component test that so much as mounts something\n * calling `useTheme` threw — and some embedded webviews are the same. Where\n * there is nothing to ask, the answer is no rather than an exception.\n */\nfunction prefersDarkScheme(): boolean {\n  return typeof window !== 'undefined' && typeof window.matchMedia === 'function'\n    ? window.matchMedia('(prefers-color-scheme: dark)').matches\n    : false\n}\n\n/**\n * Adds or removes `.dark` on `<html>`, resolving `system` against the OS.\n *\n * A no-op without a document. There is no OS preference to read on a server and\n * no `<html>` to write to, so a prerender leaves the class off and the app\n * decides the theme before hydration — see the note in the README.\n */\nexport function applyTheme(preference: ThemePreference): void {\n  if (typeof document === 'undefined') return\n\n  const isDark = preference === 'dark' || (preference === 'system' && prefersDarkScheme())\n\n  document.documentElement.classList.toggle('dark', isDark)\n}\n\n/**\n * The shared preference, created on first use rather than at import.\n *\n * Lazy on purpose: reading storage at import time would lock in the default key\n * before an app had a chance to set its own, leaving the controller reading one\n * key and writing another.\n */\nlet preference: Ref<ThemePreference> | null = null\n\nfunction controller(): Ref<ThemePreference> {\n  if (preference) return preference\n\n  preference = ref<ThemePreference>(readStoredTheme())\n\n  watch(\n    preference,\n    (next) => {\n      storeTheme(next)\n      applyTheme(next)\n    },\n    { immediate: true },\n  )\n\n  // While on `system`, follow the OS if the user flips it at night. Only where\n  // there is something to listen to; see `prefersDarkScheme`.\n  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {\n    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {\n      if (preference?.value === 'system') applyTheme('system')\n    })\n  }\n\n  return preference\n}\n\n/**\n * Sets where the preference is stored.\n *\n * Safe in either order: called before the first `useTheme()` it simply changes\n * the key, and called after it re-reads under the new one, so the controller\n * never reads from one key while writing to another.\n *\n * @example\n * ```ts\n * setThemeStorageKey('hibi-theme')   // once, at startup\n * ```\n */\nexport function setThemeStorageKey(key: string): void {\n  storageKey = key\n  if (preference) preference.value = readStoredTheme()\n}\n\n/** @returns The shared preference ref; assigning to it stores and applies it. */\nexport function useTheme(): Ref<ThemePreference> {\n  return controller()\n}\n"],"mappings":";;;;;;;;AAYA,IAAI,aAAa;AAEjB,SAAgB,kBAAkB,OAA0C;CAC1E,OAAO,UAAU,YAAY,UAAU,WAAW,UAAU;AAC9D;;AAGA,SAAgB,kBAAmC;CACjD,IAAI;EACF,MAAM,SAAS,aAAa,QAAQ,UAAU;EAE9C,OAAO,kBAAkB,MAAM,IAAI,SAAS;CAC9C,QAAQ;EACN,OAAO;CACT;AACF;AAEA,SAAS,WAAW,YAAmC;CACrD,IAAI;EACF,aAAa,QAAQ,YAAY,UAAU;CAC7C,QAAQ,CAER;AACF;;;;;;;;;;AAWA,SAAS,oBAA6B;CACpC,OAAO,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,aACjE,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAClD;AACN;;;;;;;;AASA,SAAgB,WAAW,YAAmC;CAC5D,IAAI,OAAO,aAAa,aAAa;CAErC,MAAM,SAAS,eAAe,UAAW,eAAe,YAAY,kBAAkB;CAEtF,SAAS,gBAAgB,UAAU,OAAO,QAAQ,MAAM;AAC1D;;;;;;;;AASA,IAAI,aAA0C;AAE9C,SAAS,aAAmC;CAC1C,IAAI,YAAY,OAAO;CAEvB,aAAa,IAAqB,gBAAgB,CAAC;CAEnD,MACE,aACC,SAAS;EACR,WAAW,IAAI;EACf,WAAW,IAAI;CACjB,GACA,EAAE,WAAW,KAAK,CACpB;CAIA,IAAI,OAAO,WAAW,eAAe,OAAO,OAAO,eAAe,YAChE,OAAO,WAAW,8BAA8B,CAAC,CAAC,iBAAiB,gBAAgB;EACjF,IAAI,YAAY,UAAU,UAAU,WAAW,QAAQ;CACzD,CAAC;CAGH,OAAO;AACT;;;;;;;;;;;;;AAcA,SAAgB,mBAAmB,KAAmB;CACpD,aAAa;CACb,IAAI,YAAY,WAAW,QAAQ,gBAAgB;AACrD;;AAGA,SAAgB,WAAiC;CAC/C,OAAO,WAAW;AACpB"}