rei-kit 2.25.0 → 3.0.0

package/dist/pwa.js

@@ -1,7 +1,7 @@
 import { a as addDays, f as todayKey, i as needsIosInstall, r as isInstalled, t as SettingsGroup_default } from "./SettingsGroup-BXkajKGl.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
-import { t as BaseButton_default } from "./BaseButton-RN2an975.js";
-import { t as SettingsRow_default } from "./SettingsRow-Ct1p2C9Q.js";
+import { t as BaseButton_default } from "./BaseButton-BD2HKB1L.js";
+import { t as SettingsRow_default } from "./SettingsRow-C6Spi7Np.js";
 import { Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, openBlock, ref, resolveDynamicComponent, toDisplayString, unref, withCtx } from "vue";
 import { CheckCircle2, Download, RefreshCw, Share, X } from "lucide-vue-next";
 //#region src/pwa/use-install.ts
@@ -118,7 +118,7 @@ var _hoisted_1$1 = {
 	class: "border-positive/25 bg-positive/5 rounded-card flex gap-3 border p-3.5"
 };
 var _hoisted_2$1 = {
-	class: "bg-positive/15 text-positive flex size-10 shrink-0 items-center justify-center rounded-xl",
+	class: "bg-positive/15 text-positive rounded-control flex size-10 shrink-0 items-center justify-center",
 	"aria-hidden": "true"
 };
 var _hoisted_3$1 = { class: "flex min-w-0 flex-1 flex-col gap-2" };
@@ -172,7 +172,7 @@ var InstallPrompt_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @
 			});
 		};
 	}
-}), [["__scopeId", "data-v-552a4ac9"]]);
+}), [["__scopeId", "data-v-c5d173d3"]]);
 //#endregion
 //#region src/pwa/InstallSettings.vue
 var InstallSettings_default = /* @__PURE__ */ defineComponent({

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/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 var(--duration-base) ease,\n    transform var(--duration-base) 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 var(--duration-base) ease,\n    transform var(--duration-base) 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: var(--shadow-overlay);\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 var(--duration-slow) ease,\n    transform var(--duration-slow) var(--ease-sheet);\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: var(--shadow-overlay);\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 var(--duration-slow) ease,\n    transform var(--duration-slow) var(--ease-sheet);\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 rounded-control flex size-10 shrink-0 items-center justify-center\"\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 var(--duration-base) ease,\n    transform var(--duration-base) 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 rounded-control flex size-10 shrink-0 items-center justify-center\"\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 var(--duration-base) ease,\n    transform var(--duration-base) 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: var(--shadow-overlay);\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 var(--duration-slow) ease,\n    transform var(--duration-slow) var(--ease-sheet);\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: var(--shadow-overlay);\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 var(--duration-slow) ease,\n    transform var(--duration-slow) var(--ease-sheet);\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

@@ -1,26 +1,26 @@
 
-.sheet-enter-active[data-v-2855eea3],
-.sheet-leave-active[data-v-2855eea3] {
+.sheet-enter-active[data-v-f7d30ec0],
+.sheet-leave-active[data-v-f7d30ec0] {
   transition: opacity var(--duration-base) ease;
 }
-.sheet-enter-from[data-v-2855eea3],
-.sheet-leave-to[data-v-2855eea3] {
+.sheet-enter-from[data-v-f7d30ec0],
+.sheet-leave-to[data-v-f7d30ec0] {
   opacity: 0;
 }
 
 /* The panel travels further than the scrim fades, which is what makes the
    sheet read as rising rather than appearing. */
-.sheet-enter-active .sheet-panel[data-v-2855eea3],
-.sheet-leave-active .sheet-panel[data-v-2855eea3] {
+.sheet-enter-active .sheet-panel[data-v-f7d30ec0],
+.sheet-leave-active .sheet-panel[data-v-f7d30ec0] {
   transition: transform var(--duration-slow) var(--ease-sheet);
 }
-.sheet-enter-from .sheet-panel[data-v-2855eea3],
-.sheet-leave-to .sheet-panel[data-v-2855eea3] {
+.sheet-enter-from .sheet-panel[data-v-f7d30ec0],
+.sheet-leave-to .sheet-panel[data-v-f7d30ec0] {
   transform: translateY(6%);
 }
 @media (prefers-reduced-motion: reduce) {
-.sheet-enter-from .sheet-panel[data-v-2855eea3],
-  .sheet-leave-to .sheet-panel[data-v-2855eea3] {
+.sheet-enter-from .sheet-panel[data-v-f7d30ec0],
+  .sheet-leave-to .sheet-panel[data-v-f7d30ec0] {
     transform: none;
 }
 }
@@ -2781,20 +2781,20 @@ to {
 }
 }
 
-.install-enter-active[data-v-552a4ac9],
-.install-leave-active[data-v-552a4ac9] {
+.install-enter-active[data-v-c5d173d3],
+.install-leave-active[data-v-c5d173d3] {
   transition:
     opacity var(--duration-base) ease,
     transform var(--duration-base) ease;
 }
-.install-enter-from[data-v-552a4ac9],
-.install-leave-to[data-v-552a4ac9] {
+.install-enter-from[data-v-c5d173d3],
+.install-leave-to[data-v-c5d173d3] {
   opacity: 0;
   transform: translateY(-4px);
 }
 @media (prefers-reduced-motion: reduce) {
-.install-enter-from[data-v-552a4ac9],
-  .install-leave-to[data-v-552a4ac9] {
+.install-enter-from[data-v-c5d173d3],
+  .install-leave-to[data-v-c5d173d3] {
     transform: none;
 }
 }

package/dist/tokens.css

@@ -37,7 +37,20 @@
   /* ~68 characters. Longer and the eye loses the line it was returning to. */
   --measure-reading: 68ch;
 
+  /* ---------------------------------------------------------------------
+     Radii, named for what they wrap rather than for how big they are.
+
+     `--radius-control` is the fourth, and it existed before it had a name:
+     four components wrote `rounded-xl` for the same shape — a segment, an
+     icon tile inside a card — which is Tailwind's own 12px and not this
+     kit's. It meant an app setting `--radius-card: 0` got square cards with
+     rounded tiles inside them, and nothing said why. A test now fails on a
+     raw radius utility for that reason. `rounded-full` stays allowed: a
+     pill is a shape, not a size, and it has to survive every radius an app
+     picks.
+     --------------------------------------------------------------------- */
   --radius-cell: 3px;
+  --radius-control: 12px;
   --radius-card: 16px;
   --radius-shell: 30px;
   --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

package/dist/{use-announce-qM0ZD9Ey.js → use-announce-B_JGTXHZ.js}

@@ -1,5 +1,5 @@
-import { c as useBoundValue } from "./focus-target-DRgd8UnQ.js";
-import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, defineComponent, isRef, mergeProps, nextTick, normalizeClass, onMounted, onUnmounted, openBlock, readonly, ref, renderSlot, toDisplayString, unref, useId, vModelDynamic, watch, withCtx, withDirectives } from "vue";
+import { c as useBoundValue } from "./focus-target-BtcoJdmz.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createStaticVNode, createTextVNode, defineComponent, isRef, mergeProps, nextTick, normalizeClass, normalizeStyle, onMounted, onUnmounted, openBlock, readonly, ref, renderSlot, toDisplayString, unref, useAttrs, useId, vModelDynamic, watch, withCtx, withDirectives } from "vue";
 //#region src/utils/redirect.ts
 /**
 * Resolves a `?redirect=` query value into a safe in-app path.
@@ -428,6 +428,29 @@ var FormField_default = /* @__PURE__ */ defineComponent({
 	}
 });
 //#endregion
+//#region src/composables/use-field-attrs.ts
+/**
+* Splits a field's fallthrough attributes in two.
+*
+* The three text fields bind `$attrs` to their inner `<input>`, which is what
+* makes `placeholder`, `autocomplete` and `inputmode` reach the control rather
+* than pile up on a wrapper that cannot use them. `class` and `style` are the
+* exception, and they were going along with the rest: Vue puts them on a
+* component's root element, so `class="mt-4"` reads as "space this field" and
+* was landing on the box _inside_ it, under the label.
+*/
+function useFieldAttrs() {
+	const attrs = useAttrs();
+	return {
+		fieldClass: computed(() => attrs.class),
+		fieldStyle: computed(() => attrs.style),
+		controlAttrs: computed(() => {
+			const { class: _class, style: _style, ...rest } = attrs;
+			return rest;
+		})
+	};
+}
+//#endregion
 //#region src/components/BaseInput.vue?vue&type=script&setup=true&lang.ts
 var _hoisted_1$1 = [
 	"id",
@@ -456,6 +479,7 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 	},
 	emits: ["update:modelValue"],
 	setup(__props, { emit: __emit }) {
+		const { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs();
 		/**
 		* A text field with its label, hint and error already wired to it.
 		*
@@ -466,6 +490,8 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 		const model = useBoundValue(() => __props.modelValue, (value) => emit("update:modelValue", value));
 		return (_ctx, _cache) => {
 			return openBlock(), createBlock(FormField_default, {
+				class: normalizeClass(unref(fieldClass)),
+				style: normalizeStyle(unref(fieldStyle)),
 				label: __props.label,
 				error: __props.error,
 				hint: __props.hint,
@@ -478,13 +504,15 @@ var BaseInput_default = /* @__PURE__ */ defineComponent({
 					type: __props.type,
 					"aria-invalid": invalid,
 					"aria-describedby": describedBy
-				}, _ctx.$attrs, { class: [
+				}, unref(controlAttrs), { class: [
 					__props.variant === "unstyled" ? "" : "control text-ink rounded-card focus-visible:outline-primary px-3 focus-visible:outline-2 focus-visible:outline-offset-1",
 					__props.variant === "unstyled" ? "text-base" : CONTROL_CLASS,
 					__props.variant !== "unstyled" && invalid ? "border-negative" : ""
 				] }), null, 16, _hoisted_1$1), [[vModelDynamic, unref(model)]])]),
 				_: 1
 			}, 8, [
+				"class",
+				"style",
 				"label",
 				"error",
 				"hint",
@@ -563,6 +591,6 @@ function useAnnounce() {
 	};
 }
 //#endregion
-export { FormField_default as a, useOnline as c, readStoredTheme as d, setThemeStorageKey as f, toRedirectPath as g, safeRedirect as h, BaseInput_default as i, applyTheme as l, tapFeedback as m, useAnnounce as n, BaseAlert_default as o, useTheme as p, GoogleButton_default as r, useToast as s, announce as t, isThemePreference as u };
+export { toRedirectPath as _, useFieldAttrs as a, useToast as c, isThemePreference as d, readStoredTheme as f, safeRedirect as g, tapFeedback as h, BaseInput_default as i, useOnline as l, useTheme as m, useAnnounce as n, FormField_default as o, setThemeStorageKey as p, GoogleButton_default as r, BaseAlert_default as s, announce as t, applyTheme as u };
 
-//# sourceMappingURL=use-announce-qM0ZD9Ey.js.map
+//# sourceMappingURL=use-announce-B_JGTXHZ.js.map

package/dist/use-announce-B_JGTXHZ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-announce-B_JGTXHZ.js","names":["$slots"],"sources":["../src/utils/redirect.ts","../src/utils/haptics.ts","../src/composables/use-theme.ts","../src/composables/use-online.ts","../src/composables/use-toast.ts","../src/components/BaseAlert.vue","../src/components/BaseAlert.vue","../src/components/FormField.vue","../src/components/FormField.vue","../src/composables/use-field-attrs.ts","../src/components/BaseInput.vue","../src/components/BaseInput.vue","../src/components/GoogleButton.vue","../src/components/GoogleButton.vue","../src/composables/use-announce.ts"],"sourcesContent":["/**\n * What a router hands back for one query key.\n *\n * Inlined rather than imported from vue-router: the shape is `string | null`\n * either way, and a helper this small should not drag a router into the\n * package's dependencies.\n */\nexport type QueryValue = string | null\n\n/**\n * Resolves a `?redirect=` query value into a safe in-app path.\n *\n * Only same-origin paths are accepted. Anything else falls back to `/`,\n * so a crafted link cannot bounce a user from the real login page to a\n * phishing clone.\n *\n * Pure: takes the query value instead of reading the router, so it also\n * works inside navigation guards and can be unit tested.\n *\n * @param target - Raw `route.query.redirect` value. May be a string, an\n *   array (repeated query key), `null`, or `undefined`.\n * @returns A path starting with a single `/`. Defaults to `/`.\n *\n * @example\n * ```ts\n * // in a view\n * await router.push(safeRedirect(route.query.redirect))\n *\n * // in a guard\n * return safeRedirect(to.query.redirect)\n * ```\n *\n * @example\n * ```ts\n * safeRedirect('/week')              // '/week'\n * safeRedirect('https://evil.com')   // '/'\n * safeRedirect('//evil.com')         // '/'  (protocol-relative URL)\n * safeRedirect(['/a', '/b'])         // '/'\n * safeRedirect(undefined)            // '/'\n * ```\n */\nexport function safeRedirect(target: QueryValue | QueryValue[] | undefined): string {\n  if (typeof target === 'string' && target.startsWith('/') && !target.startsWith('//')) {\n    return target\n  }\n\n  return '/'\n}\n\n/**\n * Where to send somebody back to after signing in, without the fragment.\n *\n * Supabase's implicit OAuth flow hands the browser back with the access and\n * refresh tokens in the URL fragment. A fragment is client-side only — it is\n * never sent to a server. Copied into a query parameter it stops being one:\n * `/login?redirect=/%23access_token=…` is sent on the very next request and\n * lands in the host's access logs, in `Referer` headers and in browser history.\n *\n * So the redirect keeps the path and the query and drops everything from the\n * `#`. There is nothing after it worth returning to anyway.\n *\n * One of the two phone apps had this and the other was passing `fullPath`\n * straight through, which is the leak above with nothing in the way of it. That\n * is the shape of bug a shared kit exists to end: it was fixed once, in the app\n * whose author happened to think of it.\n *\n * @example\n * ```ts\n * toRedirectPath('/ledger?direction=out')  // '/ledger?direction=out'\n * toRedirectPath('/#access_token=abc')     // '/'\n * ```\n */\nexport function toRedirectPath(fullPath: string): string {\n  const [path] = fullPath.split('#')\n\n  return path === undefined || path === '' ? '/' : path\n}\n","/**\n * A short vibration for a confirmed tap.\n *\n * Optional chaining is not decoration: iOS Safari has no `vibrate` at all, and\n * calling it unguarded would throw on every marked day.\n *\n * @param duration - Milliseconds. Keep it under ~15ms; longer reads as an alert.\n */\nexport function tapFeedback(duration = 10): void {\n  navigator.vibrate?.(duration)\n}\n","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","import { onMounted, onUnmounted, readonly, ref } from 'vue'\n\n/**\n * Tracks whether the browser thinks it has a network connection.\n *\n * Note the limit: `navigator.onLine` only reports whether a network interface\n * is up, not whether requests actually succeed. Treat it as a hint for the UI,\n * never as a reason to skip error handling.\n *\n * Listeners are removed on unmount, so the composable is safe to call per view.\n *\n * @returns A readonly ref that flips with the browser's online/offline events.\n *\n * @example\n * ```ts\n * const isOnline = useOnline()\n * // <p v-if=\"!isOnline\">You're offline.</p>\n * ```\n */\nexport function useOnline() {\n  const isOnline = ref(true)\n\n  function update() {\n    isOnline.value = navigator.onLine\n  }\n\n  onMounted(() => {\n    update()\n    window.addEventListener('online', update)\n    window.addEventListener('offline', update)\n  })\n\n  onUnmounted(() => {\n    window.removeEventListener('online', update)\n    window.removeEventListener('offline', update)\n  })\n\n  return readonly(isOnline)\n}\n","import { readonly, ref } from 'vue'\n\n/**\n * Saying that something happened.\n *\n * The reason this exists is a measurement rather than a preference: the word\n * \"toast\" appeared **zero times** across all three consuming apps. Not because\n * they had decided against it — because there was no mechanism, so every save,\n * every delete and every export finished in silence and the only way to know\n * it had worked was that nothing had visibly broken.\n *\n * ── What is deliberately not here ──\n *\n * **No text.** The kit never knows a sentence. Callers pass the message; a\n * component that called a translator would force one on the app.\n *\n * **Not for form errors.** A field that was rejected says so beside itself,\n * where the reader's eye already is and where it stays until fixed. A toast\n * that disappears after four seconds is the wrong place for something the\n * reader has to act on. Use `BaseAlert` and `FormField` for those; use this\n * for what has already happened.\n *\n * **A singleton, on purpose.** Two hosts would mean two stacks racing for the\n * same corner. The store lives at module scope and `ToastHost` renders it.\n */\nexport type ToastTone = 'info' | 'success' | 'warning' | 'danger'\n\n/**\n * One button on a toast — nearly always \"Undo\".\n *\n * The toast is dismissed when it is pressed, so the handler only has to do\n * the undoing.\n */\nexport interface ToastAction {\n  /** The button's text. Already translated. */\n  readonly label: string\n  readonly onClick: () => void\n}\n\nexport interface Toast {\n  readonly id: number\n  readonly message: string\n  readonly tone: ToastTone\n  /** Milliseconds on screen. `0` stays until dismissed. */\n  readonly duration: number\n  readonly action?: ToastAction | undefined\n}\n\nexport interface ToastOptions {\n  /** Milliseconds on screen; `0` stays until dismissed. */\n  duration?: number | undefined\n  /**\n   * A button on the toast. An undo is the kindest confirmation there is: act\n   * first, and let the reader take it back, instead of asking \"are you sure\"\n   * before every delete.\n   */\n  action?: ToastAction | undefined\n}\n\n/**\n * Four seconds: long enough to read a short sentence twice, short enough that\n * a second action does not queue behind it.\n */\nconst DEFAULT_DURATION = 4000\n\n/**\n * A failure is read more slowly than a confirmation, and more often twice.\n */\nconst DANGER_DURATION = 7000\n\n/**\n * A toast with a button stays longer: the reader has to read it, decide and\n * reach the button. Four seconds is enough to read \"Deleted\", not to undo it.\n */\nconst ACTION_DURATION = 8000\n\n/**\n * Three at once. A fourth pushes the oldest out rather than growing the stack\n * off the top of the screen — an action that produces ten toasts is a loop,\n * and a loop should not be able to cover the app it is running in.\n */\nconst MAX_VISIBLE = 3\n\nconst items = ref<Toast[]>([])\n\nlet nextId = 0\n\ninterface Countdown {\n  handle: ReturnType<typeof setTimeout>\n  remaining: number\n  startedAt: number\n}\n\nconst countdowns = new Map<number, Countdown>()\n\nfunction clearCountdown(id: number): void {\n  const countdown = countdowns.get(id)\n  if (countdown === undefined) return\n\n  clearTimeout(countdown.handle)\n  countdowns.delete(id)\n}\n\n/** Removes a toast, whether it timed out or was dismissed. */\nfunction dismiss(id: number): void {\n  clearCountdown(id)\n  items.value = items.value.filter((item) => item.id !== id)\n}\n\n/** Removes everything on screen. For a route change, or a sign-out. */\nfunction dismissAll(): void {\n  for (const id of countdowns.keys()) clearCountdown(id)\n  items.value = []\n}\n\nfunction arm(id: number, remaining: number): void {\n  // A timer is a browser thing. On a server there is nothing to time and\n  // nothing to see, and arming one would keep the process alive past the last\n  // page — which is how a prerender build hangs instead of finishing.\n  if (typeof window === 'undefined' || remaining <= 0) return\n\n  countdowns.set(id, {\n    handle: setTimeout(() => dismiss(id), remaining),\n    remaining,\n    startedAt: Date.now(),\n  })\n}\n\n/**\n * Stops the clock on a toast the reader is pointing at.\n *\n * Somebody who has moved the pointer onto it is reading it, and taking it away\n * mid-sentence is the one thing a notification must not do.\n */\nfunction pause(id: number): void {\n  const countdown = countdowns.get(id)\n  if (countdown === undefined) return\n\n  clearTimeout(countdown.handle)\n  countdowns.set(id, {\n    ...countdown,\n    remaining: Math.max(0, countdown.remaining - (Date.now() - countdown.startedAt)),\n  })\n}\n\n/** Starts it again, from where it stopped rather than from the beginning. */\nfunction resume(id: number): void {\n  const countdown = countdowns.get(id)\n  if (countdown === undefined) return\n\n  arm(id, countdown.remaining)\n}\n\nfunction push(tone: ToastTone, message: string, options: ToastOptions = {}): number {\n  const id = ++nextId\n  const duration =\n    options.duration ??\n    (options.action ? ACTION_DURATION : tone === 'danger' ? DANGER_DURATION : DEFAULT_DURATION)\n\n  const next = [...items.value, { id, message, tone, duration, action: options.action }]\n\n  while (next.length > MAX_VISIBLE) {\n    const oldest = next.shift()\n    if (oldest !== undefined) clearCountdown(oldest.id)\n  }\n\n  items.value = next\n  arm(id, duration)\n\n  return id\n}\n\n/**\n * The stack, and the four ways to add to it.\n *\n * @example\n * ```ts\n * const toast = useToast()\n *\n * toast.success(t('habit.saved'))\n * toast.danger(t('common.failed'), { duration: 0 })  // stays until dismissed\n *\n * const id = toast.info(t('export.preparing'), { duration: 0 })\n * toast.dismiss(id)\n *\n * toast.success(t('entry.deleted'), {\n *   action: { label: t('common.undo'), onClick: () => restore(entry) },\n * })\n * ```\n */\nexport function useToast() {\n  return {\n    /** Every toast on screen, oldest first. `ToastHost` renders this. */\n    toasts: readonly(items),\n    info: (message: string, options?: ToastOptions) => push('info', message, options),\n    success: (message: string, options?: ToastOptions) => push('success', message, options),\n    warning: (message: string, options?: ToastOptions) => push('warning', message, options),\n    danger: (message: string, options?: ToastOptions) => push('danger', message, options),\n    dismiss,\n    dismissAll,\n    pause,\n    resume,\n  }\n}\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A message the reader has to take in before carrying on.\n *\n * Roles rather than colours, like everything else here: `info` is neutral,\n * `success` confirms, `warning` is a condition to know about, `danger` is\n * something that went wrong or is about to. A component that took a hex would\n * be a component that ignores the theme, and the theme is the whole reason the\n * kit exists.\n *\n * `assertive` decides how a screen reader treats it: a failed save interrupts,\n * a note about a form field waits its turn. Getting this wrong is invisible on\n * screen and rude in a screen reader, which is why it is a prop and not a\n * guess.\n */\nconst { tone = 'info', assertive = false } = defineProps<{\n  tone?: 'info' | 'success' | 'warning' | 'danger' | undefined\n  /** Announce immediately, interrupting. For failures the reader must act on. */\n  assertive?: boolean | undefined\n}>()\n\nconst TONES = {\n  info: 'border-hair bg-muted/40 text-ink',\n  success: 'border-positive/35 bg-positive/8 text-ink',\n  warning: 'border-warning/40 bg-warning/8 text-ink',\n  danger: 'border-negative/35 bg-negative/8 text-ink',\n} as const\n\nconst MARKS = {\n  info: 'bg-ink-soft/15 text-ink-soft',\n  success: 'bg-positive/15 text-positive',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-negative/15 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\nconst mark = computed(() => MARKS[tone])\n</script>\n\n<template>\n  <div\n    class=\"rounded-card flex items-start gap-3 border px-4 py-3.5 text-sm leading-relaxed\"\n    :class=\"skin\"\n    :role=\"assertive ? 'alert' : 'status'\"\n    :aria-live=\"assertive ? 'assertive' : 'polite'\"\n  >\n    <span\n      v-if=\"$slots.mark\"\n      class=\"mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold\"\n      :class=\"mark\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"mark\" />\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <p v-if=\"$slots.title\" class=\"text-ink font-semibold\">\n        <slot name=\"title\" />\n      </p>\n      <div :class=\"$slots.title ? 'mt-1' : ''\"><slot /></div>\n    </div>\n\n    <slot name=\"action\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A message the reader has to take in before carrying on.\n *\n * Roles rather than colours, like everything else here: `info` is neutral,\n * `success` confirms, `warning` is a condition to know about, `danger` is\n * something that went wrong or is about to. A component that took a hex would\n * be a component that ignores the theme, and the theme is the whole reason the\n * kit exists.\n *\n * `assertive` decides how a screen reader treats it: a failed save interrupts,\n * a note about a form field waits its turn. Getting this wrong is invisible on\n * screen and rude in a screen reader, which is why it is a prop and not a\n * guess.\n */\nconst { tone = 'info', assertive = false } = defineProps<{\n  tone?: 'info' | 'success' | 'warning' | 'danger' | undefined\n  /** Announce immediately, interrupting. For failures the reader must act on. */\n  assertive?: boolean | undefined\n}>()\n\nconst TONES = {\n  info: 'border-hair bg-muted/40 text-ink',\n  success: 'border-positive/35 bg-positive/8 text-ink',\n  warning: 'border-warning/40 bg-warning/8 text-ink',\n  danger: 'border-negative/35 bg-negative/8 text-ink',\n} as const\n\nconst MARKS = {\n  info: 'bg-ink-soft/15 text-ink-soft',\n  success: 'bg-positive/15 text-positive',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-negative/15 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\nconst mark = computed(() => MARKS[tone])\n</script>\n\n<template>\n  <div\n    class=\"rounded-card flex items-start gap-3 border px-4 py-3.5 text-sm leading-relaxed\"\n    :class=\"skin\"\n    :role=\"assertive ? 'alert' : 'status'\"\n    :aria-live=\"assertive ? 'assertive' : 'polite'\"\n  >\n    <span\n      v-if=\"$slots.mark\"\n      class=\"mt-px grid size-6 shrink-0 place-items-center rounded-full text-xs font-semibold\"\n      :class=\"mark\"\n      aria-hidden=\"true\"\n    >\n      <slot name=\"mark\" />\n    </span>\n\n    <div class=\"min-w-0 flex-1\">\n      <p v-if=\"$slots.title\" class=\"text-ink font-semibold\">\n        <slot name=\"title\" />\n      </p>\n      <div :class=\"$slots.title ? 'mt-1' : ''\"><slot /></div>\n    </div>\n\n    <slot name=\"action\" />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A label, a hint, an error, and the wiring between them.\n *\n * This was inside `BaseInput`, which is why the kit had one form control\n * instead of five. The hard part of a field is not the `<input>` — it is\n * generating an id, pointing the label at it, deciding whether the description\n * is the hint or the error, and telling assistive tech which one to read. That\n * is identical for a select, a textarea and an input, and every app that\n * needed one of the other two wrote the whole thing again.\n *\n * The control comes in through the slot and is handed what it needs to be\n * described. It is a slot rather than a prop so the field never has to know\n * what it is wrapping.\n *\n * @example\n * ```vue\n * <FormField :label=\"t('profile.name')\" :error=\"errors.name\">\n *   <template #default=\"{ id, describedBy, invalid }\">\n *     <input :id=\"id\" :aria-describedby=\"describedBy\" :aria-invalid=\"invalid\" />\n *   </template>\n * </FormField>\n * ```\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  fieldId = undefined,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  /**\n   * `sm` for a control that sits inside something else — a toolbar, a filter\n   * row, a settings line — rather than in a form of its own.\n   *\n   * It exists because every hand-written select in all three apps was the\n   * small one, and the kit only had the large one. A part is not reusable if\n   * reaching for it costs a size somebody chose on purpose.\n   */\n  size?: 'sm' | 'md' | undefined\n  /**\n   * Hides the label visually but keeps it for assistive tech. For fields whose\n   * surrounding row already names them — dropping the label entirely would\n   * leave the control with no accessible name at all.\n   */\n  labelHidden?: boolean | undefined\n  /**\n   * The control's `id`, when the app needs to address it from outside —\n   * an `ErrorSummary` linking to the field it is about, a label elsewhere\n   * on the page. Generated when it is not given, which is almost always.\n   */\n  fieldId?: string | undefined\n}>()\n\nconst generated = useId()\nconst id = computed(() => fieldId ?? generated)\nconst errorId = computed(() => `${id.value}-error`)\nconst hintId = computed(() => `${id.value}-hint`)\n\n/* One description at a time, and the error wins. Announcing the hint as well\n   buries the reason the field was rejected under advice the reader has already\n   had. */\nconst describedBy = computed(() => {\n  if (error) return errorId.value\n  if (hint) return hintId.value\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col\" :class=\"size === 'sm' ? 'gap-1' : 'gap-1.5'\">\n    <label\n      :for=\"id\"\n      class=\"font-medium\"\n      :class=\"[\n        labelHidden ? 'sr-only' : '',\n        size === 'sm' ? 'text-ink-soft text-xs' : 'text-ink text-sm',\n      ]\"\n    >\n      {{ label }}\n    </label>\n\n    <slot :id=\"id\" :described-by=\"describedBy\" :invalid=\"Boolean(error)\" :size=\"size\" />\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A label, a hint, an error, and the wiring between them.\n *\n * This was inside `BaseInput`, which is why the kit had one form control\n * instead of five. The hard part of a field is not the `<input>` — it is\n * generating an id, pointing the label at it, deciding whether the description\n * is the hint or the error, and telling assistive tech which one to read. That\n * is identical for a select, a textarea and an input, and every app that\n * needed one of the other two wrote the whole thing again.\n *\n * The control comes in through the slot and is handed what it needs to be\n * described. It is a slot rather than a prop so the field never has to know\n * what it is wrapping.\n *\n * @example\n * ```vue\n * <FormField :label=\"t('profile.name')\" :error=\"errors.name\">\n *   <template #default=\"{ id, describedBy, invalid }\">\n *     <input :id=\"id\" :aria-describedby=\"describedBy\" :aria-invalid=\"invalid\" />\n *   </template>\n * </FormField>\n * ```\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  fieldId = undefined,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  /**\n   * `sm` for a control that sits inside something else — a toolbar, a filter\n   * row, a settings line — rather than in a form of its own.\n   *\n   * It exists because every hand-written select in all three apps was the\n   * small one, and the kit only had the large one. A part is not reusable if\n   * reaching for it costs a size somebody chose on purpose.\n   */\n  size?: 'sm' | 'md' | undefined\n  /**\n   * Hides the label visually but keeps it for assistive tech. For fields whose\n   * surrounding row already names them — dropping the label entirely would\n   * leave the control with no accessible name at all.\n   */\n  labelHidden?: boolean | undefined\n  /**\n   * The control's `id`, when the app needs to address it from outside —\n   * an `ErrorSummary` linking to the field it is about, a label elsewhere\n   * on the page. Generated when it is not given, which is almost always.\n   */\n  fieldId?: string | undefined\n}>()\n\nconst generated = useId()\nconst id = computed(() => fieldId ?? generated)\nconst errorId = computed(() => `${id.value}-error`)\nconst hintId = computed(() => `${id.value}-hint`)\n\n/* One description at a time, and the error wins. Announcing the hint as well\n   buries the reason the field was rejected under advice the reader has already\n   had. */\nconst describedBy = computed(() => {\n  if (error) return errorId.value\n  if (hint) return hintId.value\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col\" :class=\"size === 'sm' ? 'gap-1' : 'gap-1.5'\">\n    <label\n      :for=\"id\"\n      class=\"font-medium\"\n      :class=\"[\n        labelHidden ? 'sr-only' : '',\n        size === 'sm' ? 'text-ink-soft text-xs' : 'text-ink text-sm',\n      ]\"\n    >\n      {{ label }}\n    </label>\n\n    <slot :id=\"id\" :described-by=\"describedBy\" :invalid=\"Boolean(error)\" :size=\"size\" />\n\n    <p v-if=\"error\" :id=\"errorId\" class=\"text-negative text-xs\">{{ error }}</p>\n    <p v-else-if=\"hint\" :id=\"hintId\" class=\"text-ink-soft text-xs\">{{ hint }}</p>\n  </div>\n</template>\n","import { computed, useAttrs } from 'vue'\n\n/**\n * Splits a field's fallthrough attributes in two.\n *\n * The three text fields bind `$attrs` to their inner `<input>`, which is what\n * makes `placeholder`, `autocomplete` and `inputmode` reach the control rather\n * than pile up on a wrapper that cannot use them. `class` and `style` are the\n * exception, and they were going along with the rest: Vue puts them on a\n * component's root element, so `class=\"mt-4\"` reads as \"space this field\" and\n * was landing on the box _inside_ it, under the label.\n */\nexport function useFieldAttrs() {\n  const attrs = useAttrs()\n  return {\n    fieldClass: computed(() => attrs.class),\n    fieldStyle: computed(() => attrs.style),\n    controlAttrs: computed(() => {\n      const { class: _class, style: _style, ...rest } = attrs\n      return rest\n    }),\n  }\n}\n","<script setup lang=\"ts\" generic=\"T extends string | number | undefined = string\">\nimport type { InputHTMLAttributes } from 'vue'\n\nimport FormField from './FormField.vue'\nimport { useFieldAttrs } from '../composables/use-field-attrs'\nimport { useBoundValue } from '../composables/use-bound-value'\n\ndefineOptions({ inheritAttrs: false })\n\nconst { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs()\n\n/**\n * A text field with its label, hint and error already wired to it.\n *\n * Every attribute of a native input — `placeholder`, `autocomplete`,\n * `inputmode` — goes to the input itself, not to the wrapper around it.\n */\nconst {\n  modelValue = undefined,\n  label,\n  error = '',\n  hint = '',\n  type = 'text',\n  labelHidden = false,\n  size = 'md',\n  variant = 'default',\n} = defineProps<\n  {\n    /** The value, with `v-model`. Its type is whatever you bind. */\n    modelValue?: T | undefined\n    label: string\n    error?: string | undefined\n    hint?: string | undefined\n    /**\n     * Hides the label visually but keeps it for assistive tech. For fields whose\n     * surrounding row already names them — dropping the label entirely would\n     * leave the input with no accessible name at all.\n     */\n    labelHidden?: boolean | undefined\n    /**\n     * Every type a text field can be, because the ones missing were the ones\n     * apps needed: `date` and `search` were hand-written three times each and\n     * `url` twice, in files that already imported this component.\n     */\n    type?:\n      | 'text'\n      | 'email'\n      | 'password'\n      | 'number'\n      | 'search'\n      | 'tel'\n      | 'url'\n      | 'date'\n      | 'time'\n      | 'datetime-local'\n      | undefined\n    /** `sm` for a field inside a row rather than in a form of its own. */\n    size?: 'sm' | 'md' | undefined\n    /**\n     * `unstyled` keeps the wiring and drops the surface.\n     *\n     * The label, the generated id, `aria-describedby` and the error are what a\n     * field is; the border and the height are what it looks like. A search box\n     * inside a bordered row, a url field in an editor popover — those places\n     * were hand-writing the whole thing to avoid the appearance, and losing the\n     * wiring with it.\n     *\n     * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n     * primitive is finished when the app can take its behaviour without its\n     * paint.\n     */\n    variant?: 'default' | 'unstyled' | undefined\n    /* The input's own attributes — `placeholder`, `autocomplete`, `inputmode` —\n     typed for strictTemplates and passed to the input through `$attrs`. Not\n     `size` and `type`, which are this component's own. */\n  } & /* @vue-ignore */ Omit<InputHTMLAttributes, 'size' | 'type'>\n>()\n\n/* The control keeps 16px at every size, and that is not a rounding of the\n   scale — it is the rule. iOS zooms the viewport when a text field it is\n   focusing has a font-size under 16px, and the page never zooms back. Both\n   phone consumers had written `input { font-size: 16px }` into their base\n   layer to stop exactly this, and a `text-sm` utility from here would have\n   overridden it in every app at once.\n\n   So `size` reaches the label and the spacing, through FormField, and leaves\n   the typing target alone. `BaseSelect` is free to shrink: a select opens a\n   native picker rather than a caret, and does not trigger the zoom. */\nconst CONTROL_CLASS = 'h-11 text-base'\n\n/**\n * A number field's value is a number.\n *\n * Typed to `string` alone, `type=\"number\"` forced the caller to keep a string\n * ref and convert on both sides of it — and a component you have to wrap in\n * order to use is one you write yourself instead, which is exactly what the\n * first numeric field tried to reach for it did.\n *\n * Generic rather than `string | number`, so the value is whatever the app\n * bound: a `ref('')` gets strings back and a `ref(0)` numbers, and a\n * `string | undefined` from a form library is accepted as it is.\n */\nconst emit = defineEmits<{ 'update:modelValue': [value: T] }>()\n// The destructured prop is typed by T's constraint, not by T itself — a\n// limit of destructuring in a generic component — so it is narrowed here.\nconst model = useBoundValue<T>(\n  () => modelValue as T | undefined,\n  (value) => emit('update:modelValue', value),\n)\n</script>\n\n<template>\n  <FormField\n    :class=\"fieldClass\"\n    :style=\"fieldStyle\"\n    :label=\"label\"\n    :error=\"error\"\n    :hint=\"hint\"\n    :label-hidden=\"labelHidden\"\n    :size=\"size\"\n  >\n    <template #default=\"{ id, describedBy, invalid }\">\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        :type=\"type\"\n        :aria-invalid=\"invalid\"\n        :aria-describedby=\"describedBy\"\n        v-bind=\"controlAttrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'control text-ink rounded-card focus-visible:outline-primary px-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n          variant === 'unstyled' ? 'text-base' : CONTROL_CLASS,\n          variant !== 'unstyled' && invalid ? 'border-negative' : '',\n        ]\"\n      />\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number | undefined = string\">\nimport type { InputHTMLAttributes } from 'vue'\n\nimport FormField from './FormField.vue'\nimport { useFieldAttrs } from '../composables/use-field-attrs'\nimport { useBoundValue } from '../composables/use-bound-value'\n\ndefineOptions({ inheritAttrs: false })\n\nconst { fieldClass, fieldStyle, controlAttrs } = useFieldAttrs()\n\n/**\n * A text field with its label, hint and error already wired to it.\n *\n * Every attribute of a native input — `placeholder`, `autocomplete`,\n * `inputmode` — goes to the input itself, not to the wrapper around it.\n */\nconst {\n  modelValue = undefined,\n  label,\n  error = '',\n  hint = '',\n  type = 'text',\n  labelHidden = false,\n  size = 'md',\n  variant = 'default',\n} = defineProps<\n  {\n    /** The value, with `v-model`. Its type is whatever you bind. */\n    modelValue?: T | undefined\n    label: string\n    error?: string | undefined\n    hint?: string | undefined\n    /**\n     * Hides the label visually but keeps it for assistive tech. For fields whose\n     * surrounding row already names them — dropping the label entirely would\n     * leave the input with no accessible name at all.\n     */\n    labelHidden?: boolean | undefined\n    /**\n     * Every type a text field can be, because the ones missing were the ones\n     * apps needed: `date` and `search` were hand-written three times each and\n     * `url` twice, in files that already imported this component.\n     */\n    type?:\n      | 'text'\n      | 'email'\n      | 'password'\n      | 'number'\n      | 'search'\n      | 'tel'\n      | 'url'\n      | 'date'\n      | 'time'\n      | 'datetime-local'\n      | undefined\n    /** `sm` for a field inside a row rather than in a form of its own. */\n    size?: 'sm' | 'md' | undefined\n    /**\n     * `unstyled` keeps the wiring and drops the surface.\n     *\n     * The label, the generated id, `aria-describedby` and the error are what a\n     * field is; the border and the height are what it looks like. A search box\n     * inside a bordered row, a url field in an editor popover — those places\n     * were hand-writing the whole thing to avoid the appearance, and losing the\n     * wiring with it.\n     *\n     * The same reasoning as `BaseButton`'s `unstyled`, and the same test: a\n     * primitive is finished when the app can take its behaviour without its\n     * paint.\n     */\n    variant?: 'default' | 'unstyled' | undefined\n    /* The input's own attributes — `placeholder`, `autocomplete`, `inputmode` —\n     typed for strictTemplates and passed to the input through `$attrs`. Not\n     `size` and `type`, which are this component's own. */\n  } & /* @vue-ignore */ Omit<InputHTMLAttributes, 'size' | 'type'>\n>()\n\n/* The control keeps 16px at every size, and that is not a rounding of the\n   scale — it is the rule. iOS zooms the viewport when a text field it is\n   focusing has a font-size under 16px, and the page never zooms back. Both\n   phone consumers had written `input { font-size: 16px }` into their base\n   layer to stop exactly this, and a `text-sm` utility from here would have\n   overridden it in every app at once.\n\n   So `size` reaches the label and the spacing, through FormField, and leaves\n   the typing target alone. `BaseSelect` is free to shrink: a select opens a\n   native picker rather than a caret, and does not trigger the zoom. */\nconst CONTROL_CLASS = 'h-11 text-base'\n\n/**\n * A number field's value is a number.\n *\n * Typed to `string` alone, `type=\"number\"` forced the caller to keep a string\n * ref and convert on both sides of it — and a component you have to wrap in\n * order to use is one you write yourself instead, which is exactly what the\n * first numeric field tried to reach for it did.\n *\n * Generic rather than `string | number`, so the value is whatever the app\n * bound: a `ref('')` gets strings back and a `ref(0)` numbers, and a\n * `string | undefined` from a form library is accepted as it is.\n */\nconst emit = defineEmits<{ 'update:modelValue': [value: T] }>()\n// The destructured prop is typed by T's constraint, not by T itself — a\n// limit of destructuring in a generic component — so it is narrowed here.\nconst model = useBoundValue<T>(\n  () => modelValue as T | undefined,\n  (value) => emit('update:modelValue', value),\n)\n</script>\n\n<template>\n  <FormField\n    :class=\"fieldClass\"\n    :style=\"fieldStyle\"\n    :label=\"label\"\n    :error=\"error\"\n    :hint=\"hint\"\n    :label-hidden=\"labelHidden\"\n    :size=\"size\"\n  >\n    <template #default=\"{ id, describedBy, invalid }\">\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        :type=\"type\"\n        :aria-invalid=\"invalid\"\n        :aria-describedby=\"describedBy\"\n        v-bind=\"controlAttrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'control text-ink rounded-card focus-visible:outline-primary px-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n          variant === 'unstyled' ? 'text-base' : CONTROL_CLASS,\n          variant !== 'unstyled' && invalid ? 'border-negative' : '',\n        ]\"\n      />\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Sign in with Google, in Google's own clothes.\n *\n * The mark is inlined rather than themed, and that is not an oversight: Google's\n * brand guidelines require their colours, and a reader scanning for the button\n * they already know is scanning for those exact four. It is the one component\n * here that carries a colour value, and the reason is written on the path.\n */\nconst { label, disabled = false } = defineProps<{\n  label: string\n  /**\n   * Greyed out and unclickable while a sign-in is already in flight.\n   *\n   * A real prop rather than a fallthrough attribute: the button needs to look\n   * disabled as well as be it, and a bare `disabled` landing on the element by\n   * itself gets the second half only.\n   */\n  disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :disabled=\"disabled\"\n    class=\"control text-ink rounded-card hover:bg-muted focus-ring flex h-11 w-full items-center justify-center gap-2 text-sm font-medium transition-colors duration-(--duration-fast) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-50\"\n    @click=\"emit('click')\"\n  >\n    <!-- Google asks for its own mark, so it is inlined rather than themed. -->\n    <svg class=\"size-4\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n      <path\n        fill=\"#EA4335\"\n        d=\"M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.7 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 13.7 17.7 9.5 24 9.5z\"\n      />\n      <path\n        fill=\"#4285F4\"\n        d=\"M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.7z\"\n      />\n      <path\n        fill=\"#FBBC05\"\n        d=\"M10.4 28.2a14.6 14.6 0 0 1 0-8.4l-7.8-6.1a24 24 0 0 0 0 20.6l7.8-6.1z\"\n      />\n      <path\n        fill=\"#34A853\"\n        d=\"M24 47.5c6.2 0 11.5-2 15.4-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.8 2.3-6.3 0-11.7-4.2-13.6-10l-7.8 6.1C6.5 42.1 14.6 47.5 24 47.5z\"\n      />\n    </svg>\n    {{ label }}\n  </button>\n</template>\n","<script setup lang=\"ts\">\n/**\n * Sign in with Google, in Google's own clothes.\n *\n * The mark is inlined rather than themed, and that is not an oversight: Google's\n * brand guidelines require their colours, and a reader scanning for the button\n * they already know is scanning for those exact four. It is the one component\n * here that carries a colour value, and the reason is written on the path.\n */\nconst { label, disabled = false } = defineProps<{\n  label: string\n  /**\n   * Greyed out and unclickable while a sign-in is already in flight.\n   *\n   * A real prop rather than a fallthrough attribute: the button needs to look\n   * disabled as well as be it, and a bare `disabled` landing on the element by\n   * itself gets the second half only.\n   */\n  disabled?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    :disabled=\"disabled\"\n    class=\"control text-ink rounded-card hover:bg-muted focus-ring flex h-11 w-full items-center justify-center gap-2 text-sm font-medium transition-colors duration-(--duration-fast) active:scale-(--press-scale) disabled:pointer-events-none disabled:opacity-50\"\n    @click=\"emit('click')\"\n  >\n    <!-- Google asks for its own mark, so it is inlined rather than themed. -->\n    <svg class=\"size-4\" viewBox=\"0 0 48 48\" aria-hidden=\"true\">\n      <path\n        fill=\"#EA4335\"\n        d=\"M24 9.5c3.5 0 6.6 1.2 9 3.6l6.7-6.7C35.6 2.7 30.2.5 24 .5 14.6.5 6.5 5.9 2.6 13.7l7.8 6.1C12.3 13.7 17.7 9.5 24 9.5z\"\n      />\n      <path\n        fill=\"#4285F4\"\n        d=\"M46.5 24.5c0-1.6-.1-3.1-.4-4.5H24v9h12.7c-.6 3-2.3 5.6-4.9 7.3l7.6 5.9c4.4-4.1 7.1-10.2 7.1-17.7z\"\n      />\n      <path\n        fill=\"#FBBC05\"\n        d=\"M10.4 28.2a14.6 14.6 0 0 1 0-8.4l-7.8-6.1a24 24 0 0 0 0 20.6l7.8-6.1z\"\n      />\n      <path\n        fill=\"#34A853\"\n        d=\"M24 47.5c6.2 0 11.5-2 15.4-5.6l-7.6-5.9c-2.1 1.4-4.8 2.3-7.8 2.3-6.3 0-11.7-4.2-13.6-10l-7.8 6.1C6.5 42.1 14.6 47.5 24 47.5z\"\n      />\n    </svg>\n    {{ label }}\n  </button>\n</template>\n","import { nextTick, readonly, ref } from 'vue'\n\n/**\n * Saying something to a screen reader when nothing on screen has changed\n * enough to say it.\n *\n * The kit already has a live region in a dozen places — `ToastHost`,\n * `BaseSpinner`, `OfflineBanner`, `CopyButton` — but every one of them\n * belongs to a component that happens to be on screen. What has no home is\n * everything else: a filter that narrows a list to three results, a route\n * that changed under a client-side navigation, a draft that saved itself.\n * On screen all of those are obvious. To a reader they are silence.\n *\n * ── Three things this gets right that a hand-written region does not ──\n *\n * **The region exists before the text does.** A live region inserted into\n * the page together with its first message is usually not announced at\n * all: the reader has nothing to notice a change *to*. So `AnnounceHost`\n * renders both regions empty, from mount, and only the text inside them\n * ever changes. This is the single most common reason a hand-rolled\n * announcement does nothing, and it fails silently on every platform.\n *\n * **The same sentence twice is still said twice.** \"3 results\" after\n * \"3 results\" is not a mutation, so a reader says nothing — and the reader\n * has no idea the filter did anything. The text is cleared and set again\n * on the next tick, which is a change either way.\n *\n * **Polite by default.** `assertive` interrupts whatever is being read,\n * mid-word. That is right for \"connection lost\" and rude for \"saved\", and\n * a region that is always assertive trains the reader to resent it.\n *\n * ── What is deliberately not here ──\n *\n * **No text of its own.** Like everything else in the kit, the sentence is\n * the app's.\n *\n * **Not for anything on screen.** If there is a visible message, it should\n * be the live region — `BaseAlert`, `FormField`, a toast. This is only for\n * what a sighted reader learns from the screen itself.\n *\n * **A singleton, on purpose.** Two hosts would be two regions, and a\n * message would be read twice.\n *\n * @example\n * ```ts\n * const { announce } = useAnnounce()\n * watch(results, (rows) => announce(t('search.found', { count: rows.length })))\n * ```\n */\nexport interface AnnounceOptions {\n  /**\n   * Interrupt whatever is being read. For something the reader has to know\n   * now — a connection lost, a session about to expire — and nothing else.\n   */\n  assertive?: boolean | undefined\n}\n\nconst polite = ref('')\nconst assertive = ref('')\n\n/** Long enough to be read, short enough that a reader landing in the region\n *  later does not find a sentence about something that has since changed. */\nconst CLEAR_AFTER_MS = 7000\n\nlet timer: ReturnType<typeof setTimeout> | undefined\n\n/**\n * Says something once. Render one `AnnounceHost` in the app for it to reach a\n * reader at all.\n */\nexport function announce(message: string, { assertive: urgent = false }: AnnounceOptions = {}) {\n  const target = urgent ? assertive : polite\n\n  if (timer !== undefined) clearTimeout(timer)\n\n  /* Cleared first, then set on the next tick. Setting the same string again\n     is not a change, and a reader announces changes — so without this, the\n     second \"3 results\" is silence. */\n  polite.value = ''\n  assertive.value = ''\n\n  void nextTick(() => {\n    target.value = message\n\n    timer = setTimeout(() => {\n      target.value = ''\n      timer = undefined\n    }, CLEAR_AFTER_MS)\n  })\n}\n\nexport function useAnnounce() {\n  return {\n    announce,\n    /** What the regions are saying. `AnnounceHost` renders these; apps read them in tests. */\n    polite: readonly(polite),\n    assertive: readonly(assertive),\n  }\n}\n"],"mappings":"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"}

package/dist/web.js

@@ -1,7 +1,7 @@
-import { a as BaseCheckbox_default, c as useBoundValue, d as ensureSheetRoot, n as elementDirection, o as BaseSheet_default, r as horizontalStep, s as inertOutside, t as focusTarget } from "./focus-target-DRgd8UnQ.js";
-import { a as BaseSkeleton_default, c as useMediaQuery, i as focusableWithin, n as ScrollArea_default, o as useMenuKeys, s as useAnchoredPanel, t as BaseListbox_default } from "./BaseListbox-DvZ7IhNn.js";
+import { a as BaseCheckbox_default, c as useBoundValue, d as ensureSheetRoot, n as elementDirection, o as BaseSheet_default, r as horizontalStep, s as inertOutside, t as focusTarget } from "./focus-target-BtcoJdmz.js";
+import { a as BaseSkeleton_default, c as useMediaQuery, i as focusableWithin, n as ScrollArea_default, o as useMenuKeys, s as useAnchoredPanel, t as BaseListbox_default } from "./BaseListbox-D-NQ6nDd.js";
 import { t as _plugin_vue_export_helper_default } from "./_plugin-vue_export-helper-BOaGB7Aw.js";
-import { t as BaseButton_default } from "./BaseButton-RN2an975.js";
+import { t as BaseButton_default } from "./BaseButton-BD2HKB1L.js";
 import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, mergeModels, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onMounted, openBlock, ref, renderList, renderSlot, resolveDynamicComponent, shallowRef, toDisplayString, unref, useId, useModel, useTemplateRef, vModelText, vShow, watch, withCtx, withDirectives, withKeys, withModifiers } from "vue";
 import { ArrowDown, ArrowUp, ChevronDown, ChevronLeft, ChevronRight, ChevronsUpDown, Search, X } from "lucide-vue-next";
 import { RouterLink } from "vue-router";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rei-kit",
-  "version": "2.25.0",
+  "version": "3.0.0",
   "description": "One kit, every look. 105 accessible Vue 3 + Tailwind 4 components, four materials (quiet, glass, brutal, soft) and ten WCAG-checked palettes, each switched with one attribute.",
   "keywords": [
     "vue",

package/dist/BaseButton-RN2an975.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"BaseButton-RN2an975.js","names":[],"sources":["../src/components/BaseButton.vue","../src/components/BaseButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\nimport type { HTMLAttributes } 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  {\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    /* The root element's own attributes and listeners — `@click`, `aria-label`,\n     `role` — typed for editors and for vue-tsc's strictTemplates, where an\n     undeclared one is an error. `@vue-ignore` keeps them out of the runtime\n     props, so they still fall through to the element as before. */\n  } & /* @vue-ignore */ HTMLAttributes\n>()\n\nconst VARIANT_CLASS = {\n  primary: 'bg-primary text-on-primary shadow-(--shadow-control) 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: 'control text-ink 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-on-negative shadow-(--shadow-control) 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-on-positive shadow-(--shadow-control) hover:bg-positive/90',\n  warning: 'bg-warning text-on-warning shadow-(--shadow-control) hover:bg-warning/90',\n  accent: 'bg-accent text-on-accent shadow-(--shadow-control) 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-on-primary hover:bg-primary/90',\n  quiet: 'bg-primary text-on-primary hover:bg-primary/90',\n  secondary: 'bg-primary border-primary text-on-primary 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 =\n    'transition-[transform,translate,scale,color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-standard 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  /* The press belongs to the material. A shrink by default; a material that\n     draws hard offset shadows moves the button *into* its shadow instead, and\n     drops the shadow, so pressing reads as pressing on every one of them. */\n  return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-(--press-scale) active:translate-x-(--press-offset) active:translate-y-(--press-offset) active:shadow-(--shadow-control-pressed)`\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'\nimport type { HTMLAttributes } 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  {\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    /* The root element's own attributes and listeners — `@click`, `aria-label`,\n     `role` — typed for editors and for vue-tsc's strictTemplates, where an\n     undeclared one is an error. `@vue-ignore` keeps them out of the runtime\n     props, so they still fall through to the element as before. */\n  } & /* @vue-ignore */ HTMLAttributes\n>()\n\nconst VARIANT_CLASS = {\n  primary: 'bg-primary text-on-primary shadow-(--shadow-control) 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: 'control text-ink 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-on-negative shadow-(--shadow-control) 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-on-positive shadow-(--shadow-control) hover:bg-positive/90',\n  warning: 'bg-warning text-on-warning shadow-(--shadow-control) hover:bg-warning/90',\n  accent: 'bg-accent text-on-accent shadow-(--shadow-control) 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-on-primary hover:bg-primary/90',\n  quiet: 'bg-primary text-on-primary hover:bg-primary/90',\n  secondary: 'bg-primary border-primary text-on-primary 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 =\n    'transition-[transform,translate,scale,color,background-color,border-color,box-shadow] duration-(--duration-fast) ease-standard 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  /* The press belongs to the material. A shrink by default; a material that\n     draws hard offset shadows moves the button *into* its shadow instead, and\n     drops the shadow, so pressing reads as pressing on every one of them. */\n  return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-(--press-scale) active:translate-x-(--press-offset) active:translate-y-(--press-offset) active:shadow-(--shadow-control-pressed)`\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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwGA,MAAM,gBAAgB;GACpB,SAAS;GAUT,WAAW;GACX,OAAO;GAeP,aAAa;GAab,KAAK;GAgBL,OAAO;GACP,QAAQ;GAUR,UAAU;GACV,SAAS;GACT,QAAQ;GAIR,MAAM;GAeN,UAAU;EACZ;EAKA,MAAM,aAAa;GACjB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAEA,MAAM,kBAAkB;GACtB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAKA,MAAM,iBAAiB;GACrB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAIA,MAAM,kBAAkB;GACtB,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN;EAEA,MAAM,SAAS,eAAe;GAE5B,IAAI,QAAA,YAAY,YAAY,OAAO;GACnC,IAAI,QAAA,YAAY,QAAQ,OAAO,gBAAgB,QAAA;GAC/C,IAAI,QAAA,YAAY,OAAO,OAAO,eAAe,QAAA;GAC7C,OAAO,QAAA,OAAO,gBAAgB,QAAA,QAAQ,WAAW,QAAA;EACnD,CAAC;EAID,MAAM,gBAAiD;GACrD,OAAO;GACP,OAAO;GACP,WAAW;GAIX,KAAK;EACP;EAEA,MAAM,UAAU,eAAe;GAC7B,IAAI,QAAA,YAAY,MAAM,OAAO,cAAc,QAAA,YAAY,cAAc,QAAA;GAIrE,IAAI,QAAA,YAAY,eAAe,OAAO,GAAG,cAAc,YAAY;GAEnE,OAAO,cAAc,QAAA;EACvB,CAAC;EAWD,MAAM,QAAQ,eAAe;GAC3B,IAAI,QAAA,YAAY,YAAY,OAAO;GAEnC,MAAM,OACJ;GAIF,IAAI,QAAA,YAAY,OAAO,OAAO,8CAA8C;GAK5E,OAAO,6DAA6D,KAAK;EAC3E,CAAC;EAED,MAAM,SAAS,eAAe;GAC5B,IAAI,QAAA,YAAY,YAAY,OAAO;GACnC,IAAI,QAAA,YAAY,QAAQ,OAAO;GAC/B,OAAO,QAAA,OAAO,iBAAiB;EACjC,CAAC;;EAGD,MAAM,WAAW,eAAe,QAAA,YAAY,QAAA,OAAO;EAEnD,MAAM,YAAY,eAAe;GAC/B,IAAI,QAAA,OAAO,eAAe,OAAO,EAAE,IAAC,QAAA,GAAE;GAItC,IAAI,QAAA,OAAO,KAAK,OAAO,SAAS,QAAQ,CAAC,IAAI,EAAE,MAAG,QAAA,KAAE;GACpD,OAAO,CAAC;EACV,CAAC;;GAIC,OAAA,UAAA,GAAA,YAiBY,wBAhBL,QAAA,EAAE,GADT,WAEU,UAeE,OAfO;IAChB,MAAM,QAAA,OAAE,WAAgB,QAAA,OAAO,KAAA;IAC/B,UAAU,QAAA,OAAE,WAAgB,SAAA,QAAW,KAAA;IACvC,iBAAe,QAAA,OAAE,YAAiB,SAAA,QAAQ,SAAY,KAAA;IACtD,aAAW,QAAA;IACX,gBAAc,QAAA,YAAY,KAAA,IAAY,KAAA,IAAY,OAAO,QAAA,OAAO;IACjE,OAAK,CAAC,oMAAkM;KAC/L,MAAA;KAAO,QAAA;KAAS,OAAA;KAAQ,OAAA;KAAQ,QAAA,QAAK,WAAA;IAAA,CAAA;;IAE9C,SAAA,cAIE,CAHM,QAAA,WADR,UAAA,GAAA,mBAIE,QAJF,UAIE,KAAA,mBAAA,IAAA,IAAA,GACF,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA"}

package/dist/SettingsRow-Ct1p2C9Q.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SettingsRow-Ct1p2C9Q.js","names":[],"sources":["../src/components/SettingsRow.vue","../src/components/SettingsRow.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { ChevronRight } from 'lucide-vue-next'\nimport type { Component } from 'vue'\n\n/**\n * One line in a settings card.\n *\n * `as` decides the element: a row that navigates has to be a button, and a row\n * that merely holds a control must not be, or the control becomes unreachable.\n */\nconst {\n  label,\n  description = '',\n  icon = undefined,\n  interactive = false,\n  stacked = false,\n} = defineProps<{\n  label: string\n  description?: string | undefined\n  icon?: Component | undefined\n  /** Renders the row as a button with a chevron. */\n  interactive?: boolean | undefined\n  /** Puts the control on its own line below the label, for wide controls. */\n  stacked?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <component\n    :is=\"interactive ? 'button' : 'div'\"\n    :type=\"interactive ? 'button' : undefined\"\n    class=\"flex w-full items-center gap-3 px-4 py-3 text-left\"\n    :class=\"[\n      interactive ? 'hover:bg-muted/60 transition-colors active:scale-[0.99]' : '',\n      stacked ? 'flex-col items-stretch gap-3' : '',\n    ]\"\n    @click=\"interactive && emit('click')\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"bg-muted text-ink-soft flex size-9 shrink-0 items-center justify-center rounded-xl\"\n        aria-hidden=\"true\"\n      >\n        <component :is=\"icon\" class=\"size-[18px]\" />\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-ink text-sm font-medium\">{{ label }}</p>\n        <p v-if=\"description\" class=\"text-ink-soft mt-0.5 text-xs leading-snug\">\n          {{ description }}\n        </p>\n      </div>\n\n      <div v-if=\"!stacked\" class=\"shrink-0\"><slot /></div>\n\n      <ChevronRight v-if=\"interactive\" class=\"text-ink-soft size-4 shrink-0\" aria-hidden=\"true\" />\n    </div>\n\n    <div v-if=\"stacked\"><slot /></div>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { ChevronRight } from 'lucide-vue-next'\nimport type { Component } from 'vue'\n\n/**\n * One line in a settings card.\n *\n * `as` decides the element: a row that navigates has to be a button, and a row\n * that merely holds a control must not be, or the control becomes unreachable.\n */\nconst {\n  label,\n  description = '',\n  icon = undefined,\n  interactive = false,\n  stacked = false,\n} = defineProps<{\n  label: string\n  description?: string | undefined\n  icon?: Component | undefined\n  /** Renders the row as a button with a chevron. */\n  interactive?: boolean | undefined\n  /** Puts the control on its own line below the label, for wide controls. */\n  stacked?: boolean | undefined\n}>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <component\n    :is=\"interactive ? 'button' : 'div'\"\n    :type=\"interactive ? 'button' : undefined\"\n    class=\"flex w-full items-center gap-3 px-4 py-3 text-left\"\n    :class=\"[\n      interactive ? 'hover:bg-muted/60 transition-colors active:scale-[0.99]' : '',\n      stacked ? 'flex-col items-stretch gap-3' : '',\n    ]\"\n    @click=\"interactive && emit('click')\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <span\n        v-if=\"icon\"\n        class=\"bg-muted text-ink-soft flex size-9 shrink-0 items-center justify-center rounded-xl\"\n        aria-hidden=\"true\"\n      >\n        <component :is=\"icon\" class=\"size-[18px]\" />\n      </span>\n\n      <div class=\"min-w-0 flex-1\">\n        <p class=\"text-ink text-sm font-medium\">{{ label }}</p>\n        <p v-if=\"description\" class=\"text-ink-soft mt-0.5 text-xs leading-snug\">\n          {{ description }}\n        </p>\n      </div>\n\n      <div v-if=\"!stacked\" class=\"shrink-0\"><slot /></div>\n\n      <ChevronRight v-if=\"interactive\" class=\"text-ink-soft size-4 shrink-0\" aria-hidden=\"true\" />\n    </div>\n\n    <div v-if=\"stacked\"><slot /></div>\n  </component>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0BA,MAAM,OAAO;;GAIX,OAAA,UAAA,GAAA,YAgCY,wBA/BL,QAAA,cAAW,WAAA,KAAA,GAAA;IACf,MAAM,QAAA,cAAW,WAAc,KAAA;IAChC,OAAK,eAAA,CAAC,sDAAoD,CAC1C,QAAA,cAAW,4DAAA,IAAyE,QAAA,UAAO,iCAAA,EAAA,CAAA,CAAA;IAI1G,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,QAAA,eAAe,KAAI,OAAA;;IAE3B,SAAA,cAmBM,CAnBN,mBAmBM,OAnBN,YAmBM;KAjBI,QAAA,QADR,UAAA,GAAA,mBAMO,QANP,YAMO,EADL,UAAA,GAAA,YAA4C,wBAA5B,QAAA,IAAI,GAAA,EAAE,OAAM,cAAa,CAAA,EAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAG3C,mBAKM,OALN,YAKM,CAJJ,mBAAuD,KAAvD,YAAuD,gBAAZ,QAAA,KAAK,GAAA,CAAA,GACvC,QAAA,eAAT,UAAA,GAAA,mBAEI,KAFJ,YAEI,gBADC,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;KAIN,CAAA,QAAA,WAAZ,UAAA,GAAA,mBAAoD,OAApD,YAAoD,CAAd,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;KAE1B,QAAA,eAApB,UAAA,GAAA,YAA4F,MAAA,YAAA,GAAA;;MAA3D,OAAM;MAAgC,eAAY;;IAG1E,CAAA,GAAA,QAAA,WAAX,UAAA,GAAA,mBAAkC,OAAA,YAAA,CAAd,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA"}