rei-kit 0.11.3 → 0.12.1

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["$slots","$attrs","$slots","$attrs","$slots","$slots"],"sources":["../src/utils/date.ts","../src/utils/format.ts","../src/utils/day-label.ts","../src/utils/download.ts","../src/utils/redirect.ts","../src/utils/haptics.ts","../src/utils/platform.ts","../src/composables/use-theme.ts","../src/composables/use-today.ts","../src/composables/use-online.ts","../src/composables/use-debounced-callback.ts","../src/composables/use-drag-scroll.ts","../src/composables/use-media-query.ts","../src/composables/use-visual-viewport.ts","../src/composables/use-toast.ts","../src/components/BaseAlert.vue","../src/components/BaseAlert.vue","../src/components/BaseBadge.vue","../src/components/BaseBadge.vue","../src/components/BaseButton.vue","../src/components/BaseButton.vue","../src/components/FormField.vue","../src/components/FormField.vue","../src/components/BaseInput.vue","../src/components/BaseInput.vue","../src/components/BaseSheet.vue","../src/components/BaseSheet.vue","../src/components/BaseCard.vue","../src/components/BaseCard.vue","../src/components/BaseCheckbox.vue","../src/components/BaseCheckbox.vue","../src/components/BaseRadioGroup.vue","../src/components/BaseRadioGroup.vue","../src/components/BaseSelect.vue","../src/components/BaseSelect.vue","../src/components/BaseTextarea.vue","../src/components/BaseTextarea.vue","../src/components/EmptyState.vue","../src/components/EmptyState.vue","../src/components/ErrorBoundary.vue","../src/components/ErrorBoundary.vue","../src/components/PageContainer.vue","../src/components/PageContainer.vue","../src/components/PageHeader.vue","../src/components/PageHeader.vue","../src/components/ProgressBar.vue","../src/components/ProgressBar.vue","../src/components/PriceCard.vue","../src/components/PriceCard.vue","../src/components/ToneDot.vue","../src/components/ToneDot.vue","../src/components/SectionHeading.vue","../src/components/SectionHeading.vue","../src/components/SegmentedControl.vue","../src/components/SegmentedControl.vue","../src/components/SettingsGroup.vue","../src/components/SettingsGroup.vue","../src/components/SettingsRow.vue","../src/components/SettingsRow.vue","../src/components/SkeletonList.vue","../src/components/SkeletonList.vue","../src/components/StatCard.vue","../src/components/StatCard.vue","../src/components/ToastHost.vue","../src/components/ToastHost.vue","../src/components/LocaleLinks.vue","../src/components/LocaleLinks.vue","../src/components/GoogleButton.vue","../src/components/GoogleButton.vue","../src/components/TabBar.vue","../src/components/TabBar.vue","../src/i18n/runtime.ts","../src/index.ts"],"sourcesContent":["/**\n * Local calendar-day helpers.\n *\n * Every function is pure and works on `YYYY-MM-DD` keys, the same shape as the\n * `date` columns in Postgres. Nothing here calls `toISOString`: that converts to\n * UTC, so in a UTC+9 timezone every entry made between midnight and 09:00 would\n * be written to the previous day.\n */\n\n/**\n * Formats a `Date` as a local `YYYY-MM-DD` key.\n *\n * @param date - Any `Date`; only its local year, month and day are read.\n * @returns The calendar day in the runtime's own timezone.\n *\n * @example\n * ```ts\n * // 2026-08-23 01:30 in Tokyo\n * toDateKey(new Date())        // '2026-08-23'\n * new Date().toISOString()     // '2026-08-22T16:30…'  ← the bug\n * ```\n */\nexport function toDateKey(date: Date): string {\n  const year = String(date.getFullYear()).padStart(4, '0')\n  const month = String(date.getMonth() + 1).padStart(2, '0')\n  const day = String(date.getDate()).padStart(2, '0')\n\n  return `${year}-${month}-${day}`\n}\n\n/** Today's key in the user's own timezone. */\nexport function todayKey(): string {\n  return toDateKey(new Date())\n}\n\n/**\n * Parses a `YYYY-MM-DD` key into a `Date` at local midnight.\n *\n * @param key - A key produced by {@link toDateKey}.\n * @returns Local midnight of that calendar day.\n * @throws If the key is not three numeric parts.\n *\n * @example\n * ```ts\n * fromDateKey('2026-08-23')      // local midnight, correct\n * new Date('2026-08-23')         // UTC midnight — shifts a day in some zones\n * ```\n */\nexport function fromDateKey(key: string): Date {\n  const [year, month, day] = key.split('-').map(Number)\n\n  if (year === undefined || month === undefined || day === undefined) {\n    throw new Error(`Invalid date key: ${key}`)\n  }\n\n  return new Date(year, month - 1, day)\n}\n\n/**\n * Shifts a date key by whole calendar days.\n *\n * Uses `setDate`, which is calendar-aware: it rolls over month and year ends,\n * and stays correct across daylight-saving transitions. Adding\n * `days * 86_400_000` milliseconds would not — a DST day is 23 or 25 hours long.\n *\n * @param key - Starting `YYYY-MM-DD` key.\n * @param days - Days to add; negative goes back.\n * @returns The resulting key.\n *\n * @example\n * ```ts\n * addDays('2026-01-31', 1)   // '2026-02-01'\n * addDays('2026-01-01', -1)  // '2025-12-31'\n * addDays('2028-02-28', 1)   // '2028-02-29'  — leap year\n * ```\n */\nexport function addDays(key: string, days: number): string {\n  const date = fromDateKey(key)\n  date.setDate(date.getDate() + days)\n\n  return toDateKey(date)\n}\n\n/**\n * The last `count` days ending today, oldest first.\n *\n * `today` is a parameter so the function stays pure and testable; call sites\n * normally omit it.\n *\n * @param count - How many days to return, including `today`.\n * @param today - End of the range. Defaults to the real today.\n * @returns Keys in ascending order.\n *\n * @example\n * ```ts\n * lastNDays(3, '2026-08-23')  // ['2026-08-21', '2026-08-22', '2026-08-23']\n * ```\n */\nexport function lastNDays(count: number, today: string = todayKey()): string[] {\n  const keys: string[] = []\n\n  for (let offset = count - 1; offset >= 0; offset -= 1) {\n    keys.push(addDays(today, -offset))\n  }\n\n  return keys\n}\n\n/** 0 = week starts on Sunday, 1 = on Monday. Mirrors `profiles.week_starts_on`. */\nexport type WeekStart = 0 | 1\n\n/**\n * The first day of the week containing `key`.\n *\n * The user's preference is a parameter, not a module-level setting: changing it\n * in Profile has to re-render the week grid and the year heatmap immediately,\n * and a global would make that a hidden dependency.\n *\n * @param key - Any day in the week.\n * @param weekStartsOn - 0 for Sunday, 1 for Monday.\n * @returns Key of that week's first day.\n *\n * @example\n * ```ts\n * // 2026-08-23 is a Sunday\n * startOfWeek('2026-08-23', 1)  // '2026-08-17'  — previous Monday\n * startOfWeek('2026-08-23', 0)  // '2026-08-23'  — already Sunday\n * ```\n */\nexport function startOfWeek(key: string, weekStartsOn: WeekStart): string {\n  const weekday = fromDateKey(key).getDay()\n  const offset = (weekday - weekStartsOn + 7) % 7\n\n  return addDays(key, -offset)\n}\n\n/**\n * Every day of a calendar year, in order.\n *\n * Leap years fall out of the loop for free: it walks day by day until the year\n * rolls over, so February 29 is included when it exists.\n *\n * @param year - Four-digit year.\n * @returns 365 or 366 keys, oldest first.\n */\nexport function eachDayOfYear(year: number): string[] {\n  const keys: string[] = []\n  const date = new Date(year, 0, 1)\n\n  while (date.getFullYear() === year) {\n    keys.push(toDateKey(date))\n    date.setDate(date.getDate() + 1)\n  }\n\n  return keys\n}\n\n/**\n * Empty cells before a block's first day in a seven-row column grid.\n *\n * The grid fills column by column, so the first column is only partly used\n * unless the block starts exactly on the week's first day. An off-by-one here\n * shifts the whole block by a row, so this is unit tested.\n *\n * @param firstDayKey - First day of the block, e.g. `'2026-02-01'`.\n * @param weekStartsOn - 0 for Sunday, 1 for Monday.\n * @returns 0-6 blank cells.\n *\n * @example\n * ```ts\n * leadingBlanks('2026-01-01', 1)  // 3 — a Thursday, Mon-Wed are blank\n * leadingBlanks('2024-01-01', 1)  // 0 — a Monday\n * ```\n */\nexport function leadingBlanks(firstDayKey: string, weekStartsOn: WeekStart): number {\n  return (fromDateKey(firstDayKey).getDay() - weekStartsOn + 7) % 7\n}\n","import { ref } from 'vue'\n\n/**\n * The locale `Intl` formatting uses.\n *\n * Held here rather than imported from an i18n runtime so the utilities have no\n * i18n dependency at all: an app that never installs vue-i18n still gets dates\n * in the right language. `createI18nRuntime` sets this when it is used.\n */\nconst locale = ref<string>(typeof navigator === 'undefined' ? 'en' : (navigator.language ?? 'en'))\n\n/**\n * Points every formatter at a new locale.\n *\n * @example\n * ```ts\n * setFormatLocale('tr-TR')\n * ```\n */\nexport function setFormatLocale(next: string): void {\n  locale.value = next\n}\n\n/**\n * `Intl.DateTimeFormat` is expensive to construct, so instances are cached per\n * locale and option set. The key includes the locale, which is what lets the\n * cache survive a language change instead of returning stale formatters.\n */\nconst cache = new Map<string, Intl.DateTimeFormat>()\n\n/**\n * Formats a date in the active locale.\n *\n * Reading the locale ref here is deliberate: called from a `computed`, the\n * result re-evaluates when the language changes.\n *\n * @param date - Date to format.\n * @param options - Passed straight to `Intl.DateTimeFormat`.\n *\n * @example\n * ```ts\n * formatDate(new Date(), { weekday: 'narrow' }) // 'T'\n * ```\n */\nexport function formatDate(date: Date, options: Intl.DateTimeFormatOptions): string {\n  const tag = locale.value\n  const key = `${tag}:${JSON.stringify(options)}`\n\n  let formatter = cache.get(key)\n  if (!formatter) {\n    formatter = new Intl.DateTimeFormat(tag, options)\n    cache.set(key, formatter)\n  }\n\n  return formatter.format(date)\n}\n","import { addDays, fromDateKey } from './date'\nimport { formatDate } from './format'\n\n/** The two days worth naming rather than numbering. */\nexport interface DayLabels {\n  today: string\n  yesterday: string\n}\n\n/**\n * A short name for a day, relative to today.\n *\n * \"Today\" and \"Yesterday\" are worth spelling out — they are the two a user\n * actually reaches for. Anything older gets its weekday, which inside a\n * five-day window is unambiguous and stays two or three characters in every\n * language.\n *\n * The two words are arguments rather than translated here: a library that calls\n * `t()` forces every consumer onto one i18n setup.\n *\n * @param dateKey - The day to label (`YYYY-MM-DD`).\n * @param today - Today's key, passed in so the caller controls the clock.\n * @param labels - What to call today and yesterday.\n *\n * @example\n * ```ts\n * relativeDayLabel('2026-08-28', '2026-08-31', { today: 'Today', yesterday: 'Yesterday' })\n * // 'Fri'\n * ```\n */\nexport function relativeDayLabel(dateKey: string, today: string, labels: DayLabels): string {\n  if (dateKey === today) return labels.today\n  if (dateKey === addDays(today, -1)) return labels.yesterday\n\n  return formatDate(fromDateKey(dateKey), { weekday: 'short' })\n}\n","/**\n * Hands the user a file without a server round trip.\n *\n * @param data - Anything `JSON.stringify` can serialise.\n * @param filename - Suggested name, e.g. `hibi-export-2026-08-24.json`.\n */\nexport function downloadJson(data: unknown, filename: string): void {\n  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })\n  const url = URL.createObjectURL(blob)\n  const link = document.createElement('a')\n\n  link.href = url\n  link.download = filename\n  link.click()\n\n  URL.revokeObjectURL(url)\n}\n","/**\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 * 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","/**\n * Whether the app is running from the Home Screen rather than a browser tab.\n *\n * Two checks because iOS predates the standard one: `display-mode: standalone`\n * is the modern signal, `navigator.standalone` is Safari's own.\n */\nexport function isInstalled(): boolean {\n  if (typeof window === 'undefined') return false\n\n  return (\n    window.matchMedia('(display-mode: standalone)').matches ||\n    (navigator as Navigator & { standalone?: boolean }).standalone === true\n  )\n}\n\n/** iPhone and iPad, including iPadOS reporting itself as a Mac. */\nexport function isApplePortable(): boolean {\n  if (typeof window === 'undefined') return false\n\n  return (\n    /iPad|iPhone|iPod/.test(navigator.userAgent) ||\n    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)\n  )\n}\n\n/**\n * Whether this device can only receive notifications once the app is installed.\n *\n * Safari on iOS grants notification permission to an installed web app and to\n * nothing else — in a normal tab the request does not even prompt. Telling the\n * user to allow notifications there is asking for something the browser will\n * not offer, so the UI has to say \"add to Home Screen\" instead.\n *\n * @example\n * ```ts\n * if (needsIosInstall()) // show the Home Screen instruction, not the button\n * ```\n */\nexport function needsIosInstall(): boolean {\n  return isApplePortable() && !isInstalled()\n}\n","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 { readonly, ref } from 'vue'\n\nimport { todayKey } from '../utils/date'\n\n/**\n * Today's date key, kept current while the app stays open.\n *\n * `todayKey()` called once in `setup` freezes the date for the lifetime of the\n * component. Nobody notices in a session that lasts minutes, but a phone left\n * on the Today screen overnight would keep marking yesterday, and the Week grid\n * would disable the column that just became today.\n */\nconst current = ref(todayKey())\n\nlet timer: ReturnType<typeof setTimeout> | undefined\nlet watching = false\n\n/** A second past midnight, so a fast timer cannot fire on the old date. */\nfunction msUntilMidnight(): number {\n  const now = new Date()\n  const next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 1)\n\n  return next.getTime() - now.getTime()\n}\n\nfunction refresh() {\n  current.value = todayKey()\n}\n\nfunction schedule() {\n  clearTimeout(timer)\n  timer = setTimeout(() => {\n    refresh()\n    schedule()\n  }, msUntilMidnight())\n}\n\n/**\n * Starts the clock, once, and only where there is a clock to watch.\n *\n * This used to run at import time, which made the module impossible to load on\n * a server: `document` is not defined there, and a barrel export means one\n * `import { BaseButton } from 'rei-kit'` pulls this file in. Deferring it to\n * the first `useToday()` also means an app that never asks for today never\n * arms a timer.\n */\nfunction watchTheClock() {\n  if (watching || typeof document === 'undefined') return\n\n  watching = true\n  schedule()\n\n  // A sleeping phone does not run timers reliably, so the tab also re-checks\n  // the moment it comes back — which is when the user would see a stale date.\n  document.addEventListener('visibilitychange', () => {\n    if (document.visibilityState !== 'visible') return\n\n    refresh()\n    schedule()\n  })\n}\n\n/**\n * @returns Read-only ref holding today's `YYYY-MM-DD` key.\n *\n * Rendered on a server this is the *server's* today, which is a different day\n * from the visitor's either side of midnight. Anything prerendered from it\n * would hydrate to a different value; render it on the client.\n *\n * @example\n * ```ts\n * const today = useToday()\n * const isFuture = computed(() => day > today.value)\n * ```\n */\nexport function useToday() {\n  watchTheClock()\n\n  return readonly(current)\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 { onScopeDispose } from 'vue'\n\n/**\n * Delays a callback until the caller stops calling it.\n *\n * Used for note autosave: a request per keystroke would be wasteful, but losing\n * the last keystrokes when the user navigates away would be worse — so the\n * pending call is flushed on dispose, and `flush` is exposed for route guards.\n *\n * @param callback - Runs with the arguments of the most recent call.\n * @param delay - Quiet period in milliseconds.\n * @returns `run` to schedule, `flush` to run now, `cancel` to drop.\n *\n * @example\n * ```ts\n * const save = useDebouncedCallback((body: string) => mutate(body), 800)\n * watch(text, (value) => save.run(value))\n * onBeforeRouteLeave(() => save.flush())\n * ```\n */\nexport function useDebouncedCallback<A extends unknown[]>(\n  callback: (...args: A) => void,\n  delay = 800,\n) {\n  let timer: ReturnType<typeof setTimeout> | null = null\n  let pending: A | null = null\n\n  /** Runs the pending call right now, if there is one. */\n  function flush() {\n    if (timer !== null) clearTimeout(timer)\n    timer = null\n\n    if (pending !== null) {\n      const args = pending\n      pending = null\n      callback(...args)\n    }\n  }\n\n  /** Drops the pending call without running it. */\n  function cancel() {\n    if (timer !== null) clearTimeout(timer)\n    timer = null\n    pending = null\n  }\n\n  function run(...args: A) {\n    pending = args\n    if (timer !== null) clearTimeout(timer)\n    timer = setTimeout(flush, delay)\n  }\n\n  // A closing sheet or an unmounting view must not eat the last keystrokes.\n  onScopeDispose(flush)\n\n  return { run, flush, cancel }\n}\n","import { onScopeDispose, watch } from 'vue'\nimport type { Ref } from 'vue'\n\n/** Movement before a press counts as a drag rather than a tap. */\nconst DRAG_THRESHOLD_PX = 6\n\n/**\n * Drag-to-scroll for a horizontally scrolling element.\n *\n * The app puts `touch-action: pan-y` on the page content so the tab-swipe\n * gesture keeps its pointer events — the browser never claims a horizontal\n * drag, which also means it never pans this element natively. Rather than give\n * that up, horizontal scrolling is driven here.\n *\n * @param target - The scroll container.\n * @returns `didDrag`, so a click handler can ignore the press that ended a drag.\n *\n * @example\n * ```ts\n * const scroller = ref<HTMLElement | null>(null)\n * const { didDrag } = useDragScroll(scroller)\n *\n * function onClick() {\n *   if (didDrag()) return\n *   // …treat as a tap\n * }\n * ```\n */\nexport function useDragScroll(target: Ref<HTMLElement | null>) {\n  let pointerId: number | null = null\n  let startX = 0\n  let startScroll = 0\n  let dragged = false\n\n  function onPointerDown(event: PointerEvent) {\n    const element = target.value\n    if (!element || event.pointerType === 'mouse') return\n\n    pointerId = event.pointerId\n    startX = event.clientX\n    startScroll = element.scrollLeft\n    dragged = false\n  }\n\n  function onPointerMove(event: PointerEvent) {\n    const element = target.value\n    if (!element || event.pointerId !== pointerId) return\n\n    const dx = event.clientX - startX\n    if (!dragged && Math.abs(dx) < DRAG_THRESHOLD_PX) return\n\n    // Capture only once the gesture is clearly horizontal, so a vertical scroll\n    // that happens to start here still belongs to the page.\n    if (!dragged) {\n      dragged = true\n      element.setPointerCapture(event.pointerId)\n    }\n\n    element.scrollLeft = startScroll - dx\n  }\n\n  function onPointerUp(event: PointerEvent) {\n    const element = target.value\n    if (element?.hasPointerCapture(event.pointerId)) {\n      element.releasePointerCapture(event.pointerId)\n    }\n\n    pointerId = null\n  }\n\n  function bind(element: HTMLElement) {\n    element.addEventListener('pointerdown', onPointerDown)\n    element.addEventListener('pointermove', onPointerMove)\n    element.addEventListener('pointerup', onPointerUp)\n    element.addEventListener('pointercancel', onPointerUp)\n  }\n\n  function unbind(element: HTMLElement) {\n    element.removeEventListener('pointerdown', onPointerDown)\n    element.removeEventListener('pointermove', onPointerMove)\n    element.removeEventListener('pointerup', onPointerUp)\n    element.removeEventListener('pointercancel', onPointerUp)\n  }\n\n  watch(\n    target,\n    (element, previous) => {\n      if (previous) unbind(previous)\n      if (element) bind(element)\n    },\n    { immediate: true },\n  )\n\n  onScopeDispose(() => {\n    if (target.value) unbind(target.value)\n  })\n\n  return { didDrag: () => dragged }\n}\n","import { onBeforeUnmount, onMounted, ref } from 'vue'\n\n/**\n * Whether a media query matches, kept up to date.\n *\n * Starts false and resolves on mount, which is deliberate: this is the one\n * place a component is tempted to branch on viewport during render, and doing\n * that under prerendering produces HTML built for a screen the server does not\n * have. Hydration then swaps it and the page jumps. False first, correct a\n * frame later, no jump — and a layout that reads badly at `false` is a layout\n * with a mobile-first bug worth knowing about.\n *\n * Guarded for the server for the same reason the rest of the kit is: this\n * package has to be importable in Node, and `matchMedia` does not exist there.\n *\n * @example\n * ```ts\n * const wide = useMediaQuery('(min-width: 64rem)')\n * ```\n */\nexport function useMediaQuery(query: string) {\n  const matches = ref(false)\n\n  let list: MediaQueryList | undefined\n\n  function update(event: MediaQueryList | MediaQueryListEvent) {\n    matches.value = event.matches\n  }\n\n  onMounted(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return\n\n    list = window.matchMedia(query)\n    update(list)\n    list.addEventListener('change', update)\n  })\n\n  onBeforeUnmount(() => {\n    list?.removeEventListener('change', update)\n  })\n\n  return matches\n}\n","import { onScopeDispose, readonly, ref } from 'vue'\n\n/** The visible area, once the on-screen keyboard has taken its share. */\nexport interface VisualViewportRect {\n  height: number\n  offsetTop: number\n}\n\n/**\n * Tracks the visual viewport.\n *\n * Chrome and Android browsers honour `interactive-widget=resizes-content`, so\n * the layout viewport already shrinks for the keyboard there. Safari on iOS\n * does not implement it: it shrinks only the *visual* viewport, leaving a sheet\n * sized in `dvh` sitting partly underneath the keyboard.\n *\n * `null` means the API is unavailable, which callers should read as \"trust the\n * layout viewport\" rather than as zero. A server has no viewport at all, so it\n * gets that same `null` — this runs during `setup`, and a component using it\n * has to survive being rendered there.\n *\n * @example\n * ```ts\n * const viewport = useVisualViewport()\n * // :style=\"viewport ? { height: `${viewport.height}px` } : undefined\"\n * ```\n */\nexport function useVisualViewport() {\n  const rect = ref<VisualViewportRect | null>(null)\n\n  const viewport = typeof window === 'undefined' ? undefined : window.visualViewport\n  if (!viewport) return readonly(rect)\n\n  function read() {\n    if (!viewport) return\n\n    rect.value = { height: viewport.height, offsetTop: viewport.offsetTop }\n  }\n\n  read()\n\n  // `scroll` matters as much as `resize`: iOS shifts the visual viewport up to\n  // keep the focused field visible, without changing its height.\n  viewport.addEventListener('resize', read)\n  viewport.addEventListener('scroll', read)\n\n  onScopeDispose(() => {\n    viewport.removeEventListener('resize', read)\n    viewport.removeEventListener('scroll', read)\n  })\n\n  return readonly(rect)\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\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}\n\nexport interface ToastOptions {\n  /** Milliseconds on screen; `0` stays until dismissed. */\n  duration?: number | 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 * 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 = options.duration ?? (tone === 'danger' ? DANGER_DURATION : DEFAULT_DURATION)\n\n  const next = [...items.value, { id, message, tone, duration }]\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 */\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 } from 'vue'\n\n/**\n * A small standing label: a level, a state, a count.\n *\n * Not a button and never clickable — the moment one of these needs a click it\n * is a chip, which is a different component with focus, a hit area and a way\n * to be removed. Keeping that line drawn is most of the value.\n */\nconst { tone = 'neutral' } = defineProps<{\n  tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n}>()\n\nconst TONES = {\n  neutral: 'bg-muted text-ink-soft',\n  primary: 'bg-primary/10 text-primary',\n  success: 'bg-positive/12 text-positive',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-negative/12 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\n</script>\n\n<template>\n  <span\n    class=\"rounded-cell inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium whitespace-nowrap\"\n    :class=\"skin\"\n  >\n    <slot />\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A small standing label: a level, a state, a count.\n *\n * Not a button and never clickable — the moment one of these needs a click it\n * is a chip, which is a different component with focus, a hit area and a way\n * to be removed. Keeping that line drawn is most of the value.\n */\nconst { tone = 'neutral' } = defineProps<{\n  tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n}>()\n\nconst TONES = {\n  neutral: 'bg-muted text-ink-soft',\n  primary: 'bg-primary/10 text-primary',\n  success: 'bg-positive/12 text-positive',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-negative/12 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\n</script>\n\n<template>\n  <span\n    class=\"rounded-cell inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium whitespace-nowrap\"\n    :class=\"skin\"\n  >\n    <slot />\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * The kit's button, and — when asked — its link.\n *\n * `as` exists because a button and a link are the same shape and a different\n * element, and the app was resolving that by nesting them: a consumer had\n * `<RouterLink><BaseButton>` in every call to action, which is an `<a>` around\n * a `<button>`. That is invalid HTML, two stops in the tab order and two\n * controls to a screen reader, for one thing on the screen. Whether something\n * navigates is the app's decision; carrying it is this component's job.\n *\n * `router-link` is resolved by name rather than imported, so `vue-router` stays\n * the optional peer it is. Only an app that passes `as=\"router-link\"` needs it,\n * and an app that passes it has it.\n */\nconst {\n  as = 'button',\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  disabled = false,\n  type = 'button',\n  icon = false,\n  block = false,\n  pill = false,\n  pressed = undefined,\n  to = undefined,\n  href = undefined,\n} = defineProps<{\n  /** What to render. `button` unless this navigates. */\n  as?: 'button' | 'a' | 'router-link' | undefined\n  /**\n   * `link` is a real action that should read as text — \"clear this note\",\n   * \"remove\", \"change category\". It has no surface at all, so it also has no\n   * height and no padding: giving it either would make it a ghost button,\n   * which is a different thing and was already here.\n   */\n  variant?:\n    | 'primary'\n    | 'secondary'\n    | 'ghost'\n    | 'quiet'\n    | 'destructive'\n    | 'row'\n    | 'danger'\n    | 'positive'\n    | 'warning'\n    | 'accent'\n    | 'link'\n    | 'unstyled'\n    | undefined\n  /** `xs` is the action inside a prompt or a nudge, not on a page. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | undefined\n  loading?: boolean | undefined\n  disabled?: boolean | undefined\n  /** Ignored unless `as` is `button`. */\n  type?: 'button' | 'submit' | undefined\n  /**\n   * Square, sized to its icon, with no label beside it.\n   *\n   * **Pass `aria-label`.** An icon on its own has no accessible name, and a\n   * control a screen reader announces as \"button\" is not usable. Attributes\n   * fall through, so `aria-label` lands where it should — nothing here can\n   * check that you passed one, which is why it is said this loudly.\n   */\n  icon?: boolean | undefined\n  /** Fills its container. The ordinary case under a form. */\n  block?: boolean | undefined\n  /** For `as=\"router-link\"`. */\n  to?: string | Record<string, unknown> | undefined\n  /** For `as=\"a\"`. */\n  href?: string | undefined\n  /**\n   * Fully rounded rather than card-cornered.\n   *\n   * Every install prompt, update prompt and nudge across the apps used the\n   * same pair — a filled pill to act and a quiet one to dismiss — and none of\n   * them could use this component, because it only knew one corner radius.\n   */\n  pill?: boolean | undefined\n  /**\n   * That this button is a switch, and whether it is on.\n   *\n   * Omit it and the button is an action. Pass it and the button becomes a\n   * toggle: `aria-pressed` is written, and the variants that have an \"off\"\n   * look — ghost, quiet, secondary — take a filled one when on.\n   *\n   * There were 18 of these hand-written across the three apps, every one a\n   * picker cell or a filter chip, and almost none of them said `aria-pressed`\n   * at all. A screen reader met a row of identical buttons with no way to know\n   * which was chosen.\n   */\n  pressed?: boolean | undefined\n}>()\n\nconst VARIANT_CLASS = {\n  primary: 'bg-primary text-white hover:bg-primary/90',\n  /*\n   * An action that is real but not the one being urged.\n   *\n   * `ghost` had been standing in for this and cannot: with no border and no\n   * fill it reads as text, so \"Save draft\" sitting next to \"Publish\" looked\n   * like a caption rather than the other half of a choice. Ghost is for a\n   * control that should recede until it is wanted — a toolbar, a menu row —\n   * and that is a different job.\n   */\n  secondary: 'border-hair bg-surface text-ink border hover:bg-muted',\n  ghost: 'bg-transparent text-ink hover:bg-muted',\n  /*\n   * Quiet until you reach for it, and then plainly destructive: a delete at\n   * the end of a row, a \"remove this note\", an archive.\n   *\n   * Not `danger`, which is filled and shouts before it is needed — a red\n   * button in a list of rows makes the list look like a warning. And not\n   * `quiet` with a `hover:text-negative` class beside it, which is how all\n   * three apps were doing it: that class and the variant's own\n   * `hover:text-ink` set the same property at the same specificity, so which\n   * one wins depends on the order they happen to land in the stylesheet.\n   *\n   * Fifteen of these across the three apps, and every one of them was that\n   * coin toss.\n   */\n  destructive: 'bg-transparent text-ink-soft hover:text-negative',\n  /*\n   * A line in a list that is also a control: a settings row, a node in a tree,\n   * a heading that opens something.\n   *\n   * Full width, aligned to the start, and a hover that fills the whole line\n   * rather than a box inside it. Every app had written this — `.tree-row`,\n   * `.row`, `.header-action` — because a button that centres its content\n   * cannot be a row, and the alignment is the only thing that had to change.\n   *\n   * Padding stays the app's: a menu row and a tree node are not the same\n   * height, and the kit has no opinion about which one this is.\n   */\n  row: 'w-full justify-start text-left bg-transparent text-ink hover:bg-muted',\n  /*\n   * The control that is present without asking for attention: a dismiss beside\n   * an install prompt, a chevron beside a month, a delete at the end of a row.\n   *\n   * `ghost` is not this. Ghost keeps full-strength ink; this one starts soft\n   * and darkens, which is the difference between a control waiting to be used\n   * and one that is merely available. The pair `text-ink-soft hover:text-ink`\n   * was hand-written 47 times across the three apps.\n   *\n   * It fills on hover, and 0.11.0 got that half-right by fill... only for\n   * icons. The evidence said otherwise once the third app was read: an editor\n   * toolbar's buttons carry text and fill exactly the same way. The shape is\n   * \"a control in a strip\", not \"a control with a glyph in it\". A text action\n   * that should have no surface at all is `link`.\n   */\n  quiet: 'bg-transparent text-ink-soft hover:bg-muted hover:text-ink',\n  danger: 'bg-negative text-white hover:bg-negative/90',\n  /*\n   * The rest of the roles the kit already declares.\n   *\n   * `tokens.css` names five colour roles and this component exposed two of\n   * them, so an app that wanted a success-coloured action had to hand-write\n   * the button — which is what Hibi's green install button is. A component\n   * that cannot use a role its own design system declares is not avoiding a\n   * guess; it is incomplete.\n   */\n  positive: 'bg-positive text-white hover:bg-positive/90',\n  warning: 'bg-warning text-white hover:bg-warning/90',\n  accent: 'bg-accent text-white hover:bg-accent/90',\n  /* No fill, no border, no box: underlined so it is still obviously a control\n     without one. `ghost` cannot stand in — it has a hover surface and a\n     radius, so it reads as a button that happens to be empty. */\n  link: 'bg-transparent underline underline-offset-2 hover:opacity-80',\n  /*\n   * Everything this component is, except the paint.\n   *\n   * The reason it exists is measurable: across the three apps there were 58\n   * raw `<button>` elements sitting in 24 files that already imported and used\n   * `BaseButton`. The developer reached for the kit and gave up halfway down\n   * the same file — because the kit offered all of its appearance or none of\n   * itself, and what those places needed was everything but the appearance.\n   *\n   * A picker cell, a chip, a calendar day: the surface is the app's, and it\n   * should be. The element, the focus ring, the disabled handling, the\n   * `aria-pressed` bookkeeping and the `as` switch are not, and were being\n   * rewritten every time — usually without the focus ring.\n   */\n  unstyled: '',\n} as const\n\n/* Two scales, because a square control cannot take horizontal padding and\n   still be square. `lg` is here for a wide page's call to action: a 44px\n   button is right under a thumb and undersized under a headline. */\nconst SIZE_CLASS = {\n  xs: 'h-8 px-3 text-xs',\n  sm: 'h-9 px-3 text-sm',\n  md: 'h-11 px-4 text-base',\n  lg: 'h-14 px-6 text-lg',\n} as const\n\nconst ICON_SIZE_CLASS = {\n  xs: 'size-8 text-xs',\n  sm: 'size-9 text-sm',\n  md: 'size-11 text-base',\n  lg: 'size-14 text-lg',\n} as const\n\n/* A row is sized by its padding, not by a height. A settings line holds one\n   line of text and a tree node can hold two, and a fixed height turns the\n   second into an overflow. */\nconst ROW_SIZE_CLASS = {\n  xs: 'px-2 py-1.5 text-xs',\n  sm: 'px-3 py-2 text-sm',\n  md: 'px-3 py-2.5 text-base',\n  lg: 'px-4 py-3 text-lg',\n} as const\n\n/* A link takes the type size and nothing else. Height and padding are what\n   make a surface, and this variant is the one without one. */\nconst LINK_SIZE_CLASS = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n} as const\n\nconst sizing = computed(() => {\n  // Unstyled owns no box, so it takes no size: the app's own classes decide.\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return LINK_SIZE_CLASS[size]\n  if (variant === 'row') return ROW_SIZE_CLASS[size]\n  return icon ? ICON_SIZE_CLASS[size] : SIZE_CLASS[size]\n})\n\n/* The variants with an \"off\" look, and what \"on\" looks like for them. The\n   filled ones are already on; link and unstyled have no surface to fill. */\nconst PRESSED_CLASS: Partial<Record<string, string>> = {\n  ghost: 'bg-primary text-white hover:bg-primary/90',\n  quiet: 'bg-primary text-white hover:bg-primary/90',\n  secondary: 'bg-primary border-primary text-white hover:bg-primary/90',\n  /* A selected row is filled, not recoloured: the line stays a line, and the\n     fill is what a list uses to say \"this one\". Filling it with the primary\n     colour instead would make one row of a list shout. */\n  row: 'w-full justify-start text-left bg-muted text-ink hover:bg-muted',\n}\n\nconst surface = computed(() => {\n  if (pressed === true) return PRESSED_CLASS[variant] ?? VARIANT_CLASS[variant]\n\n  /* Destructive tints its own fill rather than borrowing the neutral one: a\n     red glyph on a grey wash reads as two different states at once. */\n  if (variant === 'destructive') return `${VARIANT_CLASS.destructive} hover:bg-negative/10`\n\n  return VARIANT_CLASS[variant]\n})\n\n/* Layout and feel, which unstyled does not impose either — but the focus ring\n   and the disabled handling stay, because those are the floor. A raw <button>\n   is what happens when a component makes them optional.\n   \n   Colour is in the transition, not just transform. Every variant here changes\n   colour on hover and none of them animated it, so every button in every\n   consuming app snapped while the hand-written controls beside them faded —\n   `transition-colors` appears 106 times across the three apps, which is the\n   convention this component was the only thing not following. */\nconst shell = computed(() => {\n  if (variant === 'unstyled') return ''\n\n  const feel = 'transition-[transform,color,background-color,border-color] duration-100 select-none'\n\n  /* A row does not press. Scaling a full-width line looks like the list itself\n     flinched, and every hand-written row in the apps animated colour only. */\n  if (variant === 'row') return `inline-flex items-center gap-2 font-medium ${feel}`\n\n  return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`\n})\n\nconst radius = computed(() => {\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return 'rounded-xs'\n  return pill ? 'rounded-full' : 'rounded-card'\n})\n\n/** Anything that is not a `<button>` cannot be `disabled`; it has to be told. */\nconst inactive = computed(() => disabled || loading)\n\nconst linkProps = computed(() => {\n  if (as === 'router-link') return { to }\n  // The href is dropped rather than kept alongside aria-disabled: an anchor\n  // without one is not focusable and not activatable, which is the whole of\n  // what \"disabled\" means for a link.\n  if (as === 'a') return inactive.value ? {} : { href }\n  return {}\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"linkProps\"\n    :type=\"as === 'button' ? type : undefined\"\n    :disabled=\"as === 'button' ? inactive : undefined\"\n    :aria-disabled=\"as !== 'button' && inactive ? 'true' : undefined\"\n    :aria-busy=\"loading\"\n    :aria-pressed=\"pressed === undefined ? undefined : String(pressed)\"\n    class=\"focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n    :class=\"[shell, surface, sizing, radius, block ? 'w-full' : '']\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"size-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    />\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * The kit's button, and — when asked — its link.\n *\n * `as` exists because a button and a link are the same shape and a different\n * element, and the app was resolving that by nesting them: a consumer had\n * `<RouterLink><BaseButton>` in every call to action, which is an `<a>` around\n * a `<button>`. That is invalid HTML, two stops in the tab order and two\n * controls to a screen reader, for one thing on the screen. Whether something\n * navigates is the app's decision; carrying it is this component's job.\n *\n * `router-link` is resolved by name rather than imported, so `vue-router` stays\n * the optional peer it is. Only an app that passes `as=\"router-link\"` needs it,\n * and an app that passes it has it.\n */\nconst {\n  as = 'button',\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  disabled = false,\n  type = 'button',\n  icon = false,\n  block = false,\n  pill = false,\n  pressed = undefined,\n  to = undefined,\n  href = undefined,\n} = defineProps<{\n  /** What to render. `button` unless this navigates. */\n  as?: 'button' | 'a' | 'router-link' | undefined\n  /**\n   * `link` is a real action that should read as text — \"clear this note\",\n   * \"remove\", \"change category\". It has no surface at all, so it also has no\n   * height and no padding: giving it either would make it a ghost button,\n   * which is a different thing and was already here.\n   */\n  variant?:\n    | 'primary'\n    | 'secondary'\n    | 'ghost'\n    | 'quiet'\n    | 'destructive'\n    | 'row'\n    | 'danger'\n    | 'positive'\n    | 'warning'\n    | 'accent'\n    | 'link'\n    | 'unstyled'\n    | undefined\n  /** `xs` is the action inside a prompt or a nudge, not on a page. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | undefined\n  loading?: boolean | undefined\n  disabled?: boolean | undefined\n  /** Ignored unless `as` is `button`. */\n  type?: 'button' | 'submit' | undefined\n  /**\n   * Square, sized to its icon, with no label beside it.\n   *\n   * **Pass `aria-label`.** An icon on its own has no accessible name, and a\n   * control a screen reader announces as \"button\" is not usable. Attributes\n   * fall through, so `aria-label` lands where it should — nothing here can\n   * check that you passed one, which is why it is said this loudly.\n   */\n  icon?: boolean | undefined\n  /** Fills its container. The ordinary case under a form. */\n  block?: boolean | undefined\n  /** For `as=\"router-link\"`. */\n  to?: string | Record<string, unknown> | undefined\n  /** For `as=\"a\"`. */\n  href?: string | undefined\n  /**\n   * Fully rounded rather than card-cornered.\n   *\n   * Every install prompt, update prompt and nudge across the apps used the\n   * same pair — a filled pill to act and a quiet one to dismiss — and none of\n   * them could use this component, because it only knew one corner radius.\n   */\n  pill?: boolean | undefined\n  /**\n   * That this button is a switch, and whether it is on.\n   *\n   * Omit it and the button is an action. Pass it and the button becomes a\n   * toggle: `aria-pressed` is written, and the variants that have an \"off\"\n   * look — ghost, quiet, secondary — take a filled one when on.\n   *\n   * There were 18 of these hand-written across the three apps, every one a\n   * picker cell or a filter chip, and almost none of them said `aria-pressed`\n   * at all. A screen reader met a row of identical buttons with no way to know\n   * which was chosen.\n   */\n  pressed?: boolean | undefined\n}>()\n\nconst VARIANT_CLASS = {\n  primary: 'bg-primary text-white hover:bg-primary/90',\n  /*\n   * An action that is real but not the one being urged.\n   *\n   * `ghost` had been standing in for this and cannot: with no border and no\n   * fill it reads as text, so \"Save draft\" sitting next to \"Publish\" looked\n   * like a caption rather than the other half of a choice. Ghost is for a\n   * control that should recede until it is wanted — a toolbar, a menu row —\n   * and that is a different job.\n   */\n  secondary: 'border-hair bg-surface text-ink border hover:bg-muted',\n  ghost: 'bg-transparent text-ink hover:bg-muted',\n  /*\n   * Quiet until you reach for it, and then plainly destructive: a delete at\n   * the end of a row, a \"remove this note\", an archive.\n   *\n   * Not `danger`, which is filled and shouts before it is needed — a red\n   * button in a list of rows makes the list look like a warning. And not\n   * `quiet` with a `hover:text-negative` class beside it, which is how all\n   * three apps were doing it: that class and the variant's own\n   * `hover:text-ink` set the same property at the same specificity, so which\n   * one wins depends on the order they happen to land in the stylesheet.\n   *\n   * Fifteen of these across the three apps, and every one of them was that\n   * coin toss.\n   */\n  destructive: 'bg-transparent text-ink-soft hover:text-negative',\n  /*\n   * A line in a list that is also a control: a settings row, a node in a tree,\n   * a heading that opens something.\n   *\n   * Full width, aligned to the start, and a hover that fills the whole line\n   * rather than a box inside it. Every app had written this — `.tree-row`,\n   * `.row`, `.header-action` — because a button that centres its content\n   * cannot be a row, and the alignment is the only thing that had to change.\n   *\n   * Padding stays the app's: a menu row and a tree node are not the same\n   * height, and the kit has no opinion about which one this is.\n   */\n  row: 'w-full justify-start text-left bg-transparent text-ink hover:bg-muted',\n  /*\n   * The control that is present without asking for attention: a dismiss beside\n   * an install prompt, a chevron beside a month, a delete at the end of a row.\n   *\n   * `ghost` is not this. Ghost keeps full-strength ink; this one starts soft\n   * and darkens, which is the difference between a control waiting to be used\n   * and one that is merely available. The pair `text-ink-soft hover:text-ink`\n   * was hand-written 47 times across the three apps.\n   *\n   * It fills on hover, and 0.11.0 got that half-right by fill... only for\n   * icons. The evidence said otherwise once the third app was read: an editor\n   * toolbar's buttons carry text and fill exactly the same way. The shape is\n   * \"a control in a strip\", not \"a control with a glyph in it\". A text action\n   * that should have no surface at all is `link`.\n   */\n  quiet: 'bg-transparent text-ink-soft hover:bg-muted hover:text-ink',\n  danger: 'bg-negative text-white hover:bg-negative/90',\n  /*\n   * The rest of the roles the kit already declares.\n   *\n   * `tokens.css` names five colour roles and this component exposed two of\n   * them, so an app that wanted a success-coloured action had to hand-write\n   * the button — which is what Hibi's green install button is. A component\n   * that cannot use a role its own design system declares is not avoiding a\n   * guess; it is incomplete.\n   */\n  positive: 'bg-positive text-white hover:bg-positive/90',\n  warning: 'bg-warning text-white hover:bg-warning/90',\n  accent: 'bg-accent text-white hover:bg-accent/90',\n  /* No fill, no border, no box: underlined so it is still obviously a control\n     without one. `ghost` cannot stand in — it has a hover surface and a\n     radius, so it reads as a button that happens to be empty. */\n  link: 'bg-transparent underline underline-offset-2 hover:opacity-80',\n  /*\n   * Everything this component is, except the paint.\n   *\n   * The reason it exists is measurable: across the three apps there were 58\n   * raw `<button>` elements sitting in 24 files that already imported and used\n   * `BaseButton`. The developer reached for the kit and gave up halfway down\n   * the same file — because the kit offered all of its appearance or none of\n   * itself, and what those places needed was everything but the appearance.\n   *\n   * A picker cell, a chip, a calendar day: the surface is the app's, and it\n   * should be. The element, the focus ring, the disabled handling, the\n   * `aria-pressed` bookkeeping and the `as` switch are not, and were being\n   * rewritten every time — usually without the focus ring.\n   */\n  unstyled: '',\n} as const\n\n/* Two scales, because a square control cannot take horizontal padding and\n   still be square. `lg` is here for a wide page's call to action: a 44px\n   button is right under a thumb and undersized under a headline. */\nconst SIZE_CLASS = {\n  xs: 'h-8 px-3 text-xs',\n  sm: 'h-9 px-3 text-sm',\n  md: 'h-11 px-4 text-base',\n  lg: 'h-14 px-6 text-lg',\n} as const\n\nconst ICON_SIZE_CLASS = {\n  xs: 'size-8 text-xs',\n  sm: 'size-9 text-sm',\n  md: 'size-11 text-base',\n  lg: 'size-14 text-lg',\n} as const\n\n/* A row is sized by its padding, not by a height. A settings line holds one\n   line of text and a tree node can hold two, and a fixed height turns the\n   second into an overflow. */\nconst ROW_SIZE_CLASS = {\n  xs: 'px-2 py-1.5 text-xs',\n  sm: 'px-3 py-2 text-sm',\n  md: 'px-3 py-2.5 text-base',\n  lg: 'px-4 py-3 text-lg',\n} as const\n\n/* A link takes the type size and nothing else. Height and padding are what\n   make a surface, and this variant is the one without one. */\nconst LINK_SIZE_CLASS = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n} as const\n\nconst sizing = computed(() => {\n  // Unstyled owns no box, so it takes no size: the app's own classes decide.\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return LINK_SIZE_CLASS[size]\n  if (variant === 'row') return ROW_SIZE_CLASS[size]\n  return icon ? ICON_SIZE_CLASS[size] : SIZE_CLASS[size]\n})\n\n/* The variants with an \"off\" look, and what \"on\" looks like for them. The\n   filled ones are already on; link and unstyled have no surface to fill. */\nconst PRESSED_CLASS: Partial<Record<string, string>> = {\n  ghost: 'bg-primary text-white hover:bg-primary/90',\n  quiet: 'bg-primary text-white hover:bg-primary/90',\n  secondary: 'bg-primary border-primary text-white hover:bg-primary/90',\n  /* A selected row is filled, not recoloured: the line stays a line, and the\n     fill is what a list uses to say \"this one\". Filling it with the primary\n     colour instead would make one row of a list shout. */\n  row: 'w-full justify-start text-left bg-muted text-ink hover:bg-muted',\n}\n\nconst surface = computed(() => {\n  if (pressed === true) return PRESSED_CLASS[variant] ?? VARIANT_CLASS[variant]\n\n  /* Destructive tints its own fill rather than borrowing the neutral one: a\n     red glyph on a grey wash reads as two different states at once. */\n  if (variant === 'destructive') return `${VARIANT_CLASS.destructive} hover:bg-negative/10`\n\n  return VARIANT_CLASS[variant]\n})\n\n/* Layout and feel, which unstyled does not impose either — but the focus ring\n   and the disabled handling stay, because those are the floor. A raw <button>\n   is what happens when a component makes them optional.\n   \n   Colour is in the transition, not just transform. Every variant here changes\n   colour on hover and none of them animated it, so every button in every\n   consuming app snapped while the hand-written controls beside them faded —\n   `transition-colors` appears 106 times across the three apps, which is the\n   convention this component was the only thing not following. */\nconst shell = computed(() => {\n  if (variant === 'unstyled') return ''\n\n  const feel = 'transition-[transform,color,background-color,border-color] duration-100 select-none'\n\n  /* A row does not press. Scaling a full-width line looks like the list itself\n     flinched, and every hand-written row in the apps animated colour only. */\n  if (variant === 'row') return `inline-flex items-center gap-2 font-medium ${feel}`\n\n  return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`\n})\n\nconst radius = computed(() => {\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return 'rounded-xs'\n  return pill ? 'rounded-full' : 'rounded-card'\n})\n\n/** Anything that is not a `<button>` cannot be `disabled`; it has to be told. */\nconst inactive = computed(() => disabled || loading)\n\nconst linkProps = computed(() => {\n  if (as === 'router-link') return { to }\n  // The href is dropped rather than kept alongside aria-disabled: an anchor\n  // without one is not focusable and not activatable, which is the whole of\n  // what \"disabled\" means for a link.\n  if (as === 'a') return inactive.value ? {} : { href }\n  return {}\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"linkProps\"\n    :type=\"as === 'button' ? type : undefined\"\n    :disabled=\"as === 'button' ? inactive : undefined\"\n    :aria-disabled=\"as !== 'button' && inactive ? 'true' : undefined\"\n    :aria-busy=\"loading\"\n    :aria-pressed=\"pressed === undefined ? undefined : String(pressed)\"\n    class=\"focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n    :class=\"[shell, surface, sizing, radius, block ? 'w-full' : '']\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"size-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    />\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, 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  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\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-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\n  if (hint) return hintId\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  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\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-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\n  if (hint) return hintId\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 FormField from './FormField.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  type = 'text',\n  labelHidden = false,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\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}>()\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 */\nconst model = defineModel<string | number | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\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=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border 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\">\nimport FormField from './FormField.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  type = 'text',\n  labelHidden = false,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\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}>()\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 */\nconst model = defineModel<string | number | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\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=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border 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\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n  title,\n  subtitle = '',\n  closeLabel = 'Close',\n} = defineProps<{\n  title: string\n  subtitle?: string | undefined\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop rather than a translation: a component that calls t() forces every\n   * consumer onto one i18n setup, and this is the package's only visible string.\n   */\n  closeLabel?: string | undefined\n}>()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n  viewport.value\n    ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n    : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n  open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    setBackgroundInert(true)\n    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n    window.addEventListener('keydown', onKeydown)\n    await nextTick()\n    panel.value?.focus()\n  } else {\n    window.removeEventListener('keydown', onKeydown)\n    lastFocused?.focus()\n    lastFocused = null\n    setBackgroundInert(false)\n  }\n})\n\n/**\n * `inert` takes the whole app out of tab order and pointer events while the\n * sheet is open — a real focus trap without keydown bookkeeping.\n *\n * The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it\n * stays interactive.\n */\nfunction setBackgroundInert(isInert: boolean) {\n  document.getElementById('app')?.toggleAttribute('inert', isInert)\n}\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeydown)\n  // Unmounting while open would otherwise leave the whole app inert forever.\n  setBackgroundInert(false)\n})\n</script>\n\n<template>\n  <Teleport to=\"#sheet-root\">\n    <Transition name=\"sheet\">\n      <div\n        v-if=\"open\"\n        class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n        :style=\"viewportStyle\"\n      >\n        <div\n          class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n        >\n          <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n          <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n               the on-screen keyboard shrinks the sheet instead of pushing its\n               content out of reach. -->\n          <section\n            ref=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-label=\"title\"\n            tabindex=\"-1\"\n            class=\"sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none\"\n          >\n            <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n              <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n            </div>\n\n            <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n              <div class=\"min-w-0 flex-1\">\n                <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n                <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n                  {{ subtitle }}\n                </p>\n              </div>\n\n              <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n                   gains is the focus ring it never had: this was a raw\n                   `<button>` with no `focus-visible` rule, so closing a sheet\n                   from the keyboard was invisible. -->\n              <BaseButton\n                variant=\"unstyled\"\n                class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\"\n              >\n                <X class=\"size-5\" />\n              </BaseButton>\n            </header>\n\n            <div\n              class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n            >\n              <slot />\n            </div>\n          </section>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n  transition: opacity 200ms ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n  opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n   sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n  transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheet-enter-from .sheet-panel,\n  .sheet-leave-to .sheet-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n  title,\n  subtitle = '',\n  closeLabel = 'Close',\n} = defineProps<{\n  title: string\n  subtitle?: string | undefined\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop rather than a translation: a component that calls t() forces every\n   * consumer onto one i18n setup, and this is the package's only visible string.\n   */\n  closeLabel?: string | undefined\n}>()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n  viewport.value\n    ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n    : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n  open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    setBackgroundInert(true)\n    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n    window.addEventListener('keydown', onKeydown)\n    await nextTick()\n    panel.value?.focus()\n  } else {\n    window.removeEventListener('keydown', onKeydown)\n    lastFocused?.focus()\n    lastFocused = null\n    setBackgroundInert(false)\n  }\n})\n\n/**\n * `inert` takes the whole app out of tab order and pointer events while the\n * sheet is open — a real focus trap without keydown bookkeeping.\n *\n * The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it\n * stays interactive.\n */\nfunction setBackgroundInert(isInert: boolean) {\n  document.getElementById('app')?.toggleAttribute('inert', isInert)\n}\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeydown)\n  // Unmounting while open would otherwise leave the whole app inert forever.\n  setBackgroundInert(false)\n})\n</script>\n\n<template>\n  <Teleport to=\"#sheet-root\">\n    <Transition name=\"sheet\">\n      <div\n        v-if=\"open\"\n        class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n        :style=\"viewportStyle\"\n      >\n        <div\n          class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n        >\n          <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n          <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n               the on-screen keyboard shrinks the sheet instead of pushing its\n               content out of reach. -->\n          <section\n            ref=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-label=\"title\"\n            tabindex=\"-1\"\n            class=\"sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none\"\n          >\n            <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n              <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n            </div>\n\n            <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n              <div class=\"min-w-0 flex-1\">\n                <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n                <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n                  {{ subtitle }}\n                </p>\n              </div>\n\n              <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n                   gains is the focus ring it never had: this was a raw\n                   `<button>` with no `focus-visible` rule, so closing a sheet\n                   from the keyboard was invisible. -->\n              <BaseButton\n                variant=\"unstyled\"\n                class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\"\n              >\n                <X class=\"size-5\" />\n              </BaseButton>\n            </header>\n\n            <div\n              class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n            >\n              <slot />\n            </div>\n          </section>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n  transition: opacity 200ms ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n  opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n   sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n  transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheet-enter-from .sheet-panel,\n  .sheet-leave-to .sheet-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * A surface with a border, and optionally a head and a foot.\n *\n * Every app here had written this div. That is not a crisis on its own — it is\n * four classes — but it is four classes that were slightly different in each,\n * so a card on one screen had a heavier border than a card on the next and\n * nobody could say why.\n *\n * `interactive` is for a card that is a link or a button: it adds the lift and\n * the press, and it is opt-in because a card holding a form should not move\n * when the pointer crosses it.\n */\nconst { interactive = false, as = 'div' } = defineProps<{\n  interactive?: boolean | undefined\n  as?: string | undefined\n}>()\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"border-hair bg-surface rounded-card border\"\n    :class=\"\n      interactive\n        ? 'transition-[transform,box-shadow] duration-300 ease-out hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 active:shadow-sm'\n        : ''\n    \"\n  >\n    <div v-if=\"$slots.head\" class=\"border-hair/70 border-b px-5 py-4\">\n      <slot name=\"head\" />\n    </div>\n\n    <div class=\"px-5 py-4\">\n      <slot />\n    </div>\n\n    <div v-if=\"$slots.foot\" class=\"border-hair/70 bg-muted/30 border-t px-5 py-3.5\">\n      <slot name=\"foot\" />\n    </div>\n  </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A surface with a border, and optionally a head and a foot.\n *\n * Every app here had written this div. That is not a crisis on its own — it is\n * four classes — but it is four classes that were slightly different in each,\n * so a card on one screen had a heavier border than a card on the next and\n * nobody could say why.\n *\n * `interactive` is for a card that is a link or a button: it adds the lift and\n * the press, and it is opt-in because a card holding a form should not move\n * when the pointer crosses it.\n */\nconst { interactive = false, as = 'div' } = defineProps<{\n  interactive?: boolean | undefined\n  as?: string | undefined\n}>()\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"border-hair bg-surface rounded-card border\"\n    :class=\"\n      interactive\n        ? 'transition-[transform,box-shadow] duration-300 ease-out hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 active:shadow-sm'\n        : ''\n    \"\n  >\n    <div v-if=\"$slots.head\" class=\"border-hair/70 border-b px-5 py-4\">\n      <slot name=\"head\" />\n    </div>\n\n    <div class=\"px-5 py-4\">\n      <slot />\n    </div>\n\n    <div v-if=\"$slots.foot\" class=\"border-hair/70 bg-muted/30 border-t px-5 py-3.5\">\n      <slot name=\"foot\" />\n    </div>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A single checkbox, with its label beside it.\n *\n * Deliberately not built on `FormField`. That component stacks a label above\n * its control, which is right for every field where the control is a box you\n * type into and wrong here: a checkbox is read as one sentence with a mark in\n * front of it, and putting the words above the box breaks the association a\n * sighted reader makes before they get to the accessible name.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  disabled = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  disabled?: boolean | undefined\n  /**\n   * `md` is a setting: a line the reader came here to change, in ink.\n   * `sm` is an aside — \"remember me\" under a sign-in form, \"show the ones I\n   * have learned\" above a list — quieter and tighter.\n   *\n   * The two are not a guess. Of the five hand-written checkboxes across the\n   * three consuming apps, four were the aside and one was the setting, and\n   * they differed in exactly these two ways.\n   */\n  size?: 'sm' | 'md' | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1.5\">\n    <label\n      :for=\"id\"\n      class=\"flex items-center\"\n      :class=\"[size === 'sm' ? 'gap-2' : 'gap-3', disabled ? 'opacity-50' : 'cursor-pointer']\"\n    >\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"Boolean(error)\"\n        :aria-describedby=\"describedBy\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-sm\" :class=\"size === 'sm' ? 'text-ink-soft' : 'text-ink'\">\n        {{ label }}\n      </span>\n    </label>\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 single checkbox, with its label beside it.\n *\n * Deliberately not built on `FormField`. That component stacks a label above\n * its control, which is right for every field where the control is a box you\n * type into and wrong here: a checkbox is read as one sentence with a mark in\n * front of it, and putting the words above the box breaks the association a\n * sighted reader makes before they get to the accessible name.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  disabled = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  disabled?: boolean | undefined\n  /**\n   * `md` is a setting: a line the reader came here to change, in ink.\n   * `sm` is an aside — \"remember me\" under a sign-in form, \"show the ones I\n   * have learned\" above a list — quieter and tighter.\n   *\n   * The two are not a guess. Of the five hand-written checkboxes across the\n   * three consuming apps, four were the aside and one was the setting, and\n   * they differed in exactly these two ways.\n   */\n  size?: 'sm' | 'md' | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1.5\">\n    <label\n      :for=\"id\"\n      class=\"flex items-center\"\n      :class=\"[size === 'sm' ? 'gap-2' : 'gap-3', disabled ? 'opacity-50' : 'cursor-pointer']\"\n    >\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"Boolean(error)\"\n        :aria-describedby=\"describedBy\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-sm\" :class=\"size === 'sm' ? 'text-ink-soft' : 'text-ink'\">\n        {{ label }}\n      </span>\n    </label>\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 set of radios, and the reason there is no `BaseRadio`.\n *\n * One radio on its own is not a control — it is half of a choice that cannot\n * be unmade, and every real use is a group. So the group is the component.\n *\n * `fieldset` and `legend` rather than a label: a label points at one element,\n * and the thing being named here is the question, not any single answer. Left\n * as a plain label, a screen reader reads the options with no idea what they\n * are options for.\n */\nconst {\n  legend,\n  options,\n  error = '',\n  hint = '',\n  legendHidden = false,\n} = defineProps<{\n  legend: string\n  options: readonly { value: string; label: string; disabled?: boolean | undefined }[]\n  error?: string | undefined\n  hint?: string | undefined\n  legendHidden?: boolean | undefined\n}>()\n\nconst model = defineModel<string | undefined>()\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <fieldset class=\"flex flex-col gap-1.5\" :aria-describedby=\"describedBy\">\n    <legend class=\"text-ink mb-1.5 text-sm font-medium\" :class=\"legendHidden ? 'sr-only' : ''\">\n      {{ legend }}\n    </legend>\n\n    <label\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      class=\"flex items-center gap-3\"\n      :class=\"option.disabled ? 'opacity-50' : 'cursor-pointer'\"\n    >\n      <input\n        v-model=\"model\"\n        type=\"radio\"\n        :name=\"id\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-ink text-sm\">{{ option.label }}</span>\n    </label>\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  </fieldset>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A set of radios, and the reason there is no `BaseRadio`.\n *\n * One radio on its own is not a control — it is half of a choice that cannot\n * be unmade, and every real use is a group. So the group is the component.\n *\n * `fieldset` and `legend` rather than a label: a label points at one element,\n * and the thing being named here is the question, not any single answer. Left\n * as a plain label, a screen reader reads the options with no idea what they\n * are options for.\n */\nconst {\n  legend,\n  options,\n  error = '',\n  hint = '',\n  legendHidden = false,\n} = defineProps<{\n  legend: string\n  options: readonly { value: string; label: string; disabled?: boolean | undefined }[]\n  error?: string | undefined\n  hint?: string | undefined\n  legendHidden?: boolean | undefined\n}>()\n\nconst model = defineModel<string | undefined>()\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <fieldset class=\"flex flex-col gap-1.5\" :aria-describedby=\"describedBy\">\n    <legend class=\"text-ink mb-1.5 text-sm font-medium\" :class=\"legendHidden ? 'sr-only' : ''\">\n      {{ legend }}\n    </legend>\n\n    <label\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      class=\"flex items-center gap-3\"\n      :class=\"option.disabled ? 'opacity-50' : 'cursor-pointer'\"\n    >\n      <input\n        v-model=\"model\"\n        type=\"radio\"\n        :name=\"id\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-ink text-sm\">{{ option.label }}</span>\n    </label>\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  </fieldset>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { ChevronDown } from 'lucide-vue-next'\n\nimport FormField from './FormField.vue'\n\n/**\n * A native `<select>`, wearing the kit's field.\n *\n * Native on purpose. A custom listbox has to reimplement typeahead, the\n * keyboard, and the way a phone lifts the options into its own picker — and it\n * gets one of them wrong. What is worth replacing is the chrome, so the arrow\n * is drawn and the browser's own is removed.\n *\n * Options are passed rather than slotted so the label can be a translated\n * string the kit never sees.\n *\n * Generic over the value, because a select whose value must be a string makes\n * every consumer with numbered options write conversion glue on both sides of\n * it — and a component you have to wrap to use is one you write yourself\n * instead. A day of the month is a number.\n */\nconst {\n  label,\n  options,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  placeholder = '',\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  options: readonly { value: T; label: string; disabled?: boolean | undefined }[]\n  error?: string | undefined\n  hint?: string | undefined\n  labelHidden?: boolean | undefined\n  /**\n   * An unselectable first row, for a field with no sensible default.\n   *\n   * Disabled rather than merely empty: an empty option that can be chosen lets\n   * someone go back to having answered nothing, which no form wants.\n   */\n  placeholder?: string | undefined\n  /**\n   * `sm` for a select that filters or sorts rather than answers a form.\n   *\n   * Every hand-written select across the three consuming apps was this one.\n   */\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}>()\n\n/* The scale is typographic, not dimensional. Both sizes keep the 44px touch\n   target — of the five hand-written controls this replaces, none was shorter\n   than 40px and two were exactly 44, and a select that filters a list is\n   pressed with the same thumb as one that answers a form. What changes is the\n   type, and with it how loudly the field asks to be read. */\nconst SIZE_CLASS = {\n  sm: 'h-11 text-sm',\n  md: 'h-11 text-base',\n} as const\n\nconst model = defineModel<T | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <div class=\"relative\">\n        <select\n          :id=\"id\"\n          v-model=\"model\"\n          :aria-invalid=\"invalid\"\n          :aria-describedby=\"describedBy\"\n          class=\"w-full appearance-none\"\n          :class=\"[\n            variant === 'unstyled'\n              ? ''\n              : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n            variant === 'unstyled' ? '' : SIZE_CLASS[size],\n            variant !== 'unstyled' && invalid ? 'border-negative' : '',\n          ]\"\n        >\n          <option v-if=\"placeholder\" :value=\"undefined\" disabled>{{ placeholder }}</option>\n          <option\n            v-for=\"option in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled\"\n          >\n            {{ option.label }}\n          </option>\n        </select>\n\n        <ChevronDown\n          class=\"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n      </div>\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { ChevronDown } from 'lucide-vue-next'\n\nimport FormField from './FormField.vue'\n\n/**\n * A native `<select>`, wearing the kit's field.\n *\n * Native on purpose. A custom listbox has to reimplement typeahead, the\n * keyboard, and the way a phone lifts the options into its own picker — and it\n * gets one of them wrong. What is worth replacing is the chrome, so the arrow\n * is drawn and the browser's own is removed.\n *\n * Options are passed rather than slotted so the label can be a translated\n * string the kit never sees.\n *\n * Generic over the value, because a select whose value must be a string makes\n * every consumer with numbered options write conversion glue on both sides of\n * it — and a component you have to wrap to use is one you write yourself\n * instead. A day of the month is a number.\n */\nconst {\n  label,\n  options,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  placeholder = '',\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  options: readonly { value: T; label: string; disabled?: boolean | undefined }[]\n  error?: string | undefined\n  hint?: string | undefined\n  labelHidden?: boolean | undefined\n  /**\n   * An unselectable first row, for a field with no sensible default.\n   *\n   * Disabled rather than merely empty: an empty option that can be chosen lets\n   * someone go back to having answered nothing, which no form wants.\n   */\n  placeholder?: string | undefined\n  /**\n   * `sm` for a select that filters or sorts rather than answers a form.\n   *\n   * Every hand-written select across the three consuming apps was this one.\n   */\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}>()\n\n/* The scale is typographic, not dimensional. Both sizes keep the 44px touch\n   target — of the five hand-written controls this replaces, none was shorter\n   than 40px and two were exactly 44, and a select that filters a list is\n   pressed with the same thumb as one that answers a form. What changes is the\n   type, and with it how loudly the field asks to be read. */\nconst SIZE_CLASS = {\n  sm: 'h-11 text-sm',\n  md: 'h-11 text-base',\n} as const\n\nconst model = defineModel<T | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <div class=\"relative\">\n        <select\n          :id=\"id\"\n          v-model=\"model\"\n          :aria-invalid=\"invalid\"\n          :aria-describedby=\"describedBy\"\n          class=\"w-full appearance-none\"\n          :class=\"[\n            variant === 'unstyled'\n              ? ''\n              : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n            variant === 'unstyled' ? '' : SIZE_CLASS[size],\n            variant !== 'unstyled' && invalid ? 'border-negative' : '',\n          ]\"\n        >\n          <option v-if=\"placeholder\" :value=\"undefined\" disabled>{{ placeholder }}</option>\n          <option\n            v-for=\"option in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled\"\n          >\n            {{ option.label }}\n          </option>\n        </select>\n\n        <ChevronDown\n          class=\"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n      </div>\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport FormField from './FormField.vue'\n\n/**\n * A multi-line field.\n *\n * `rows` rather than an auto-growing box: a textarea that resizes as it is\n * typed into moves everything below it, and in a form that means the button\n * the writer is heading for keeps sliding away. Growth is left to the browser's\n * own resize handle, which the writer controls.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  rows = 4,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  labelHidden?: boolean | undefined\n  rows?: number | undefined\n  /**\n   * `sm` tightens the label and the spacing. It does **not** shrink the text:\n   * iOS zooms the viewport when it focuses a field under 16px and never zooms\n   * back, which is why both phone apps force 16px on form elements in their\n   * base layer.\n   */\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}>()\n\nconst model = defineModel<string | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <textarea\n        :id=\"id\"\n        v-model=\"model\"\n        :rows=\"rows\"\n        :aria-invalid=\"invalid\"\n        :aria-describedby=\"describedBy\"\n        v-bind=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary resize-y border px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1',\n          'text-base',\n          variant !== 'unstyled' && invalid ? 'border-negative' : '',\n        ]\"\n      />\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport FormField from './FormField.vue'\n\n/**\n * A multi-line field.\n *\n * `rows` rather than an auto-growing box: a textarea that resizes as it is\n * typed into moves everything below it, and in a form that means the button\n * the writer is heading for keeps sliding away. Growth is left to the browser's\n * own resize handle, which the writer controls.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  rows = 4,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  labelHidden?: boolean | undefined\n  rows?: number | undefined\n  /**\n   * `sm` tightens the label and the spacing. It does **not** shrink the text:\n   * iOS zooms the viewport when it focuses a field under 16px and never zooms\n   * back, which is why both phone apps force 16px on form elements in their\n   * base layer.\n   */\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}>()\n\nconst model = defineModel<string | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <textarea\n        :id=\"id\"\n        v-model=\"model\"\n        :rows=\"rows\"\n        :aria-invalid=\"invalid\"\n        :aria-describedby=\"describedBy\"\n        v-bind=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary resize-y border px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1',\n          'text-base',\n          variant !== 'unstyled' && invalid ? 'border-negative' : '',\n        ]\"\n      />\n    </template>\n  </FormField>\n</template>\n","<script lang=\"ts\" setup>\nconst { title, description = '' } = defineProps<{\n  title: string\n  description?: string | undefined\n}>()\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center gap-3 px-6 py-10 text-center\">\n    <div\n      v-if=\"$slots.icon\"\n      class=\"bg-muted text-primary rounded-card flex size-12 items-center justify-center\"\n    >\n      <slot name=\"icon\" />\n    </div>\n\n    <h3 class=\"text-ink text-base font-semibold\">{{ title }}</h3>\n    <p v-if=\"description\" class=\"text-ink-soft max-w-[36ch] text-sm\">\n      {{ description }}\n    </p>\n\n    <div v-if=\"$slots.action\" class=\"mt-2 flex w-full flex-col gap-2\">\n      <slot name=\"action\" />\n    </div>\n  </div>\n</template>\n\n<style></style>\n","<script lang=\"ts\" setup>\nconst { title, description = '' } = defineProps<{\n  title: string\n  description?: string | undefined\n}>()\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center gap-3 px-6 py-10 text-center\">\n    <div\n      v-if=\"$slots.icon\"\n      class=\"bg-muted text-primary rounded-card flex size-12 items-center justify-center\"\n    >\n      <slot name=\"icon\" />\n    </div>\n\n    <h3 class=\"text-ink text-base font-semibold\">{{ title }}</h3>\n    <p v-if=\"description\" class=\"text-ink-soft max-w-[36ch] text-sm\">\n      {{ description }}\n    </p>\n\n    <div v-if=\"$slots.action\" class=\"mt-2 flex w-full flex-col gap-2\">\n      <slot name=\"action\" />\n    </div>\n  </div>\n</template>\n\n<style></style>\n","<script setup lang=\"ts\">\nimport { onErrorCaptured, ref, watch } from 'vue'\n\n/**\n * Keeps one broken screen from taking the whole app down.\n *\n * An error thrown while a component renders unmounts the tree above it, and a\n * single-page app has nothing underneath — the tab goes white and whoever was\n * using it loses what they were in the middle of.\n *\n * What it does *not* do is decide what that looks like. All three apps in this\n * workshop had written this component, and the parts they had in common were\n * the mechanism — catch, report, reset when the route changes — while the\n * parts that differed were the ones that should: an icon, a sentence, a way\n * back. So the fallback is a slot, and the kit stays out of the wording.\n *\n * Only errors thrown while rendering a descendant reach `onErrorCaptured`.\n * Rejected promises and failed queries do not, and should not: those belong to\n * the code that owns the request.\n *\n * @example\n * ```vue\n * <ErrorBoundary :resetKey=\"route.fullPath\" @error=\"reportError\">\n *   <template #fallback=\"{ reset }\">\n *     <EmptyState :title=\"t('error.title')\">\n *       <BaseButton @click=\"reset\">{{ t('error.retry') }}</BaseButton>\n *     </EmptyState>\n *   </template>\n *   <RouterView />\n * </ErrorBoundary>\n * ```\n */\nconst { resetKey } = defineProps<{\n  /**\n   * Clears the error whenever it changes — a route path, usually.\n   *\n   * An error on one screen should not follow somebody to the next one, and\n   * without this the boundary stays broken until a full reload.\n   */\n  resetKey?: string | number | undefined\n}>()\n\nconst emit = defineEmits<{ error: [cause: unknown] }>()\n\nconst failed = ref<unknown>(null)\n\nfunction reset() {\n  failed.value = null\n}\n\nonErrorCaptured((cause) => {\n  failed.value = cause\n  emit('error', cause)\n\n  // Swallowed on purpose: the fallback is now showing, and letting it travel\n  // further up would unmount the boundary along with everything else.\n  return false\n})\n\nwatch(\n  () => resetKey,\n  () => reset(),\n)\n</script>\n\n<template>\n  <slot v-if=\"failed\" name=\"fallback\" :error=\"failed\" :reset=\"reset\" />\n  <slot v-else />\n</template>\n","<script setup lang=\"ts\">\nimport { onErrorCaptured, ref, watch } from 'vue'\n\n/**\n * Keeps one broken screen from taking the whole app down.\n *\n * An error thrown while a component renders unmounts the tree above it, and a\n * single-page app has nothing underneath — the tab goes white and whoever was\n * using it loses what they were in the middle of.\n *\n * What it does *not* do is decide what that looks like. All three apps in this\n * workshop had written this component, and the parts they had in common were\n * the mechanism — catch, report, reset when the route changes — while the\n * parts that differed were the ones that should: an icon, a sentence, a way\n * back. So the fallback is a slot, and the kit stays out of the wording.\n *\n * Only errors thrown while rendering a descendant reach `onErrorCaptured`.\n * Rejected promises and failed queries do not, and should not: those belong to\n * the code that owns the request.\n *\n * @example\n * ```vue\n * <ErrorBoundary :resetKey=\"route.fullPath\" @error=\"reportError\">\n *   <template #fallback=\"{ reset }\">\n *     <EmptyState :title=\"t('error.title')\">\n *       <BaseButton @click=\"reset\">{{ t('error.retry') }}</BaseButton>\n *     </EmptyState>\n *   </template>\n *   <RouterView />\n * </ErrorBoundary>\n * ```\n */\nconst { resetKey } = defineProps<{\n  /**\n   * Clears the error whenever it changes — a route path, usually.\n   *\n   * An error on one screen should not follow somebody to the next one, and\n   * without this the boundary stays broken until a full reload.\n   */\n  resetKey?: string | number | undefined\n}>()\n\nconst emit = defineEmits<{ error: [cause: unknown] }>()\n\nconst failed = ref<unknown>(null)\n\nfunction reset() {\n  failed.value = null\n}\n\nonErrorCaptured((cause) => {\n  failed.value = cause\n  emit('error', cause)\n\n  // Swallowed on purpose: the fallback is now showing, and letting it travel\n  // further up would unmount the boundary along with everything else.\n  return false\n})\n\nwatch(\n  () => resetKey,\n  () => reset(),\n)\n</script>\n\n<template>\n  <slot v-if=\"failed\" name=\"fallback\" :error=\"failed\" :reset=\"reset\" />\n  <slot v-else />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One measure, centred, with the page's gutters.\n *\n * The first thing a desktop app needs and the last thing a kit built for\n * phones thinks to provide — a 430 px shell has no use for a maximum width, so\n * this was missing, and the consuming app wrote `max-w-[1200px] mx-auto px-6`\n * into every layout instead. Written once it costs nothing; written eleven\n * times it is eleven chances for one page to be forty pixels narrower than the\n * rest, which is the kind of thing nobody can name and everybody can see.\n *\n * Two widths rather than one, because a page and a passage are different\n * problems: `wide` is the page, `reading` is a column of prose at the width\n * type wants to be read at. Both come from tokens, so an app that measures its\n * page at 1120 rather than 1200 can still use this.\n */\nconst { width = 'wide', as = 'div' } = defineProps<{\n  /** `wide` for a page, `reading` for prose, `full` to opt out. */\n  width?: 'wide' | 'reading' | 'full' | undefined\n  /** The element to render. `main`, `section` and `article` all belong here. */\n  as?: string | undefined\n}>()\n\n/**\n * From tokens, not from literals.\n *\n * A width is a role the same way a colour is, and baking one in makes the\n * component unusable by any app that measured its own page differently — which\n * the first consumer had, deliberately. Override `--measure-page` and\n * `--measure-reading` in the app's `@theme` and every container follows.\n */\nconst WIDTHS = {\n  wide: 'var(--measure-page)',\n  reading: 'var(--measure-reading)',\n  full: 'none',\n} as const\n\nconst measure = computed(() => WIDTHS[width])\n</script>\n\n<template>\n  <component :is=\"as\" class=\"mx-auto w-full px-5 sm:px-8\" :style=\"{ maxWidth: measure }\">\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One measure, centred, with the page's gutters.\n *\n * The first thing a desktop app needs and the last thing a kit built for\n * phones thinks to provide — a 430 px shell has no use for a maximum width, so\n * this was missing, and the consuming app wrote `max-w-[1200px] mx-auto px-6`\n * into every layout instead. Written once it costs nothing; written eleven\n * times it is eleven chances for one page to be forty pixels narrower than the\n * rest, which is the kind of thing nobody can name and everybody can see.\n *\n * Two widths rather than one, because a page and a passage are different\n * problems: `wide` is the page, `reading` is a column of prose at the width\n * type wants to be read at. Both come from tokens, so an app that measures its\n * page at 1120 rather than 1200 can still use this.\n */\nconst { width = 'wide', as = 'div' } = defineProps<{\n  /** `wide` for a page, `reading` for prose, `full` to opt out. */\n  width?: 'wide' | 'reading' | 'full' | undefined\n  /** The element to render. `main`, `section` and `article` all belong here. */\n  as?: string | undefined\n}>()\n\n/**\n * From tokens, not from literals.\n *\n * A width is a role the same way a colour is, and baking one in makes the\n * component unusable by any app that measured its own page differently — which\n * the first consumer had, deliberately. Override `--measure-page` and\n * `--measure-reading` in the app's `@theme` and every container follows.\n */\nconst WIDTHS = {\n  wide: 'var(--measure-page)',\n  reading: 'var(--measure-reading)',\n  full: 'none',\n} as const\n\nconst measure = computed(() => WIDTHS[width])\n</script>\n\n<template>\n  <component :is=\"as\" class=\"mx-auto w-full px-5 sm:px-8\" :style=\"{ maxWidth: measure }\">\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nconst { title } = defineProps<{ title: string }>()\n</script>\n\n<template>\n  <header class=\"grid h-12 shrink-0 grid-cols-[2.5rem_1fr_2.5rem] items-center\">\n    <div class=\"justify-self-start\"><slot name=\"left\" /></div>\n\n    <h1 class=\"text-ink flex min-w-0 justify-center text-base font-semibold tabular-nums\">\n      <slot name=\"title\">\n        <span class=\"truncate\">{{ title }}</span>\n      </slot>\n    </h1>\n\n    <div class=\"justify-self-end\"><slot name=\"right\" /></div>\n  </header>\n</template>\n","<script setup lang=\"ts\">\nconst { title } = defineProps<{ title: string }>()\n</script>\n\n<template>\n  <header class=\"grid h-12 shrink-0 grid-cols-[2.5rem_1fr_2.5rem] items-center\">\n    <div class=\"justify-self-start\"><slot name=\"left\" /></div>\n\n    <h1 class=\"text-ink flex min-w-0 justify-center text-base font-semibold tabular-nums\">\n      <slot name=\"title\">\n        <span class=\"truncate\">{{ title }}</span>\n      </slot>\n    </h1>\n\n    <div class=\"justify-self-end\"><slot name=\"right\" /></div>\n  </header>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * How far through something somebody is.\n *\n * Clamped rather than trusted. A progress bar is always fed a computed number,\n * and computed numbers arrive as 101, as -0, and as NaN when the denominator\n * is zero — which is the ordinary state of a course nobody has started. Any of\n * those renders a bar that runs past its own track, and it is the sort of\n * thing that ships because the happy path was the only one anybody looked at.\n */\nconst {\n  value,\n  max = 100,\n  label,\n} = defineProps<{\n  value: number\n  max?: number | undefined\n  /** For screen readers. Without it this is a rectangle that means nothing. */\n  label?: string | undefined\n}>()\n\nconst portion = computed(() => {\n  if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0\n\n  return Math.min(100, Math.max(0, (value / max) * 100))\n})\n</script>\n\n<template>\n  <div\n    class=\"bg-muted h-1.5 w-full overflow-hidden rounded-full\"\n    role=\"progressbar\"\n    :aria-valuenow=\"Math.round(portion)\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    :aria-label=\"label\"\n  >\n    <div\n      class=\"bg-primary h-full rounded-full transition-[width] duration-700 ease-out\"\n      :style=\"{ width: `${portion}%` }\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * How far through something somebody is.\n *\n * Clamped rather than trusted. A progress bar is always fed a computed number,\n * and computed numbers arrive as 101, as -0, and as NaN when the denominator\n * is zero — which is the ordinary state of a course nobody has started. Any of\n * those renders a bar that runs past its own track, and it is the sort of\n * thing that ships because the happy path was the only one anybody looked at.\n */\nconst {\n  value,\n  max = 100,\n  label,\n} = defineProps<{\n  value: number\n  max?: number | undefined\n  /** For screen readers. Without it this is a rectangle that means nothing. */\n  label?: string | undefined\n}>()\n\nconst portion = computed(() => {\n  if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0\n\n  return Math.min(100, Math.max(0, (value / max) * 100))\n})\n</script>\n\n<template>\n  <div\n    class=\"bg-muted h-1.5 w-full overflow-hidden rounded-full\"\n    role=\"progressbar\"\n    :aria-valuenow=\"Math.round(portion)\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    :aria-label=\"label\"\n  >\n    <div\n      class=\"bg-primary h-full rounded-full transition-[width] duration-700 ease-out\"\n      :style=\"{ width: `${portion}%` }\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One plan in a pricing table.\n *\n * Every string arrives as a prop. A component in a kit that reaches for its\n * consumer's translations is not shared, it is one app's furniture parked\n * somewhere else — and the second app to want it would have to fork it.\n *\n * The tone is semantic rather than named after a colour. \"Gold\" and \"diamond\"\n * are one product's tiers; `warm` and `cool` are what a pricing table actually\n * needs, which is for three columns to be distinguishable at a glance without\n * any of them shouting. A table where every column is a different hue reads as\n * three products from three companies.\n */\nconst {\n  name,\n  lead,\n  price,\n  period,\n  note,\n  features,\n  tone = 'neutral',\n  badge,\n  chip,\n  recommended = false,\n} = defineProps<{\n  name: string\n  lead?: string | undefined\n  /** Already formatted, or whatever stands in while there is no price. */\n  price: string\n  period?: string | undefined\n  note?: string | undefined\n  features: readonly string[]\n  tone?: 'neutral' | 'warm' | 'cool' | undefined\n  /** Rides on the card's edge, e.g. \"Recommended\". */\n  badge?: string | undefined\n  /** Sits inside, e.g. \"30% cheaper\" or \"Your plan\". */\n  chip?: string | undefined\n  /** Raises the card and lets the badge show. */\n  recommended?: boolean | undefined\n}>()\n\nconst TONE = {\n  neutral: {\n    ring: 'border-hair/70',\n    soft: 'bg-muted text-ink-soft',\n    icon: 'bg-primary/10 text-primary',\n  },\n  warm: {\n    ring: 'border-[color-mix(in_oklab,#b8862c_35%,transparent)]',\n    soft: 'bg-[color-mix(in_oklab,#b8862c_14%,transparent)] text-[#8a6318] dark:text-[#d9ad5c]',\n    icon: 'bg-[color-mix(in_oklab,#b8862c_16%,transparent)] text-[#8a6318] dark:text-[#d9ad5c]',\n  },\n  cool: {\n    ring: 'border-[color-mix(in_oklab,#4a86a8_38%,transparent)]',\n    soft: 'bg-[color-mix(in_oklab,#4a86a8_14%,transparent)] text-[#2f6079] dark:text-[#8fc6de]',\n    icon: 'bg-[color-mix(in_oklab,#4a86a8_16%,transparent)] text-[#2f6079] dark:text-[#8fc6de]',\n  },\n} as const\n\nconst palette = computed(() => TONE[tone])\n</script>\n\n<template>\n  <article\n    class=\"bg-surface rounded-card relative flex h-full flex-col border p-7 shadow-[var(--shadow-card)] transition-[border-color,box-shadow,transform] duration-[420ms] hover:border-[color-mix(in_oklab,var(--color-primary)_60%,transparent)] hover:shadow-[var(--shadow-lift)] sm:p-8\"\n    :class=\"[palette.ring, recommended ? 'shadow-[var(--shadow-lift)]' : 'hover:-translate-y-0.5']\"\n  >\n    <!-- On the edge rather than inside, so it cannot be mistaken for one of\n         the plan's own features. -->\n    <span\n      v-if=\"badge && recommended\"\n      class=\"bg-primary rounded-cell absolute -top-3 left-7 px-3 py-1 text-[0.7rem] font-semibold text-white\"\n    >\n      {{ badge }}\n    </span>\n\n    <div class=\"flex items-start justify-between gap-4\">\n      <span\n        v-if=\"$slots.icon\"\n        class=\"rounded-card grid size-11 place-items-center text-xl\"\n        :class=\"palette.icon\"\n      >\n        <slot name=\"icon\" />\n      </span>\n\n      <span\n        v-if=\"chip\"\n        class=\"rounded-cell ml-auto px-2.5 py-1 text-[0.7rem] font-medium\"\n        :class=\"palette.soft\"\n      >\n        {{ chip }}\n      </span>\n    </div>\n\n    <h3 class=\"text-ink mt-5 text-lg font-semibold\">{{ name }}</h3>\n    <p v-if=\"lead\" class=\"text-ink-soft mt-1.5 text-sm leading-relaxed\">{{ lead }}</p>\n\n    <p class=\"mt-6 flex items-baseline gap-1.5\">\n      <span class=\"text-ink text-3xl font-semibold tracking-tight tabular-nums\">{{ price }}</span>\n      <span v-if=\"period\" class=\"text-ink-soft text-sm\">{{ period }}</span>\n    </p>\n    <p v-if=\"note\" class=\"text-ink-soft mt-1 text-xs\">{{ note }}</p>\n\n    <ul class=\"mt-7 flex-1 space-y-3\">\n      <li v-for=\"feature in features\" :key=\"feature\" class=\"flex gap-3 text-sm\">\n        <!-- The marker is a slot because a pricing table often uses it to say\n             something the tone cannot: on the tier you already have, these are\n             things you hold rather than things you would get. A consumer that\n             had drawn that distinction should not have to give it up to reach\n             for this component. -->\n        <span v-if=\"$slots.bullet\" class=\"mt-[0.45rem] shrink-0\"><slot name=\"bullet\" /></span>\n        <span\n          v-else\n          class=\"bg-primary/45 mt-[0.45rem] size-1.5 shrink-0 rounded-full\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"text-ink-soft leading-relaxed\">{{ feature }}</span>\n      </li>\n    </ul>\n\n    <div v-if=\"$slots.action\" class=\"mt-8\"><slot name=\"action\" /></div>\n  </article>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One plan in a pricing table.\n *\n * Every string arrives as a prop. A component in a kit that reaches for its\n * consumer's translations is not shared, it is one app's furniture parked\n * somewhere else — and the second app to want it would have to fork it.\n *\n * The tone is semantic rather than named after a colour. \"Gold\" and \"diamond\"\n * are one product's tiers; `warm` and `cool` are what a pricing table actually\n * needs, which is for three columns to be distinguishable at a glance without\n * any of them shouting. A table where every column is a different hue reads as\n * three products from three companies.\n */\nconst {\n  name,\n  lead,\n  price,\n  period,\n  note,\n  features,\n  tone = 'neutral',\n  badge,\n  chip,\n  recommended = false,\n} = defineProps<{\n  name: string\n  lead?: string | undefined\n  /** Already formatted, or whatever stands in while there is no price. */\n  price: string\n  period?: string | undefined\n  note?: string | undefined\n  features: readonly string[]\n  tone?: 'neutral' | 'warm' | 'cool' | undefined\n  /** Rides on the card's edge, e.g. \"Recommended\". */\n  badge?: string | undefined\n  /** Sits inside, e.g. \"30% cheaper\" or \"Your plan\". */\n  chip?: string | undefined\n  /** Raises the card and lets the badge show. */\n  recommended?: boolean | undefined\n}>()\n\nconst TONE = {\n  neutral: {\n    ring: 'border-hair/70',\n    soft: 'bg-muted text-ink-soft',\n    icon: 'bg-primary/10 text-primary',\n  },\n  warm: {\n    ring: 'border-[color-mix(in_oklab,#b8862c_35%,transparent)]',\n    soft: 'bg-[color-mix(in_oklab,#b8862c_14%,transparent)] text-[#8a6318] dark:text-[#d9ad5c]',\n    icon: 'bg-[color-mix(in_oklab,#b8862c_16%,transparent)] text-[#8a6318] dark:text-[#d9ad5c]',\n  },\n  cool: {\n    ring: 'border-[color-mix(in_oklab,#4a86a8_38%,transparent)]',\n    soft: 'bg-[color-mix(in_oklab,#4a86a8_14%,transparent)] text-[#2f6079] dark:text-[#8fc6de]',\n    icon: 'bg-[color-mix(in_oklab,#4a86a8_16%,transparent)] text-[#2f6079] dark:text-[#8fc6de]',\n  },\n} as const\n\nconst palette = computed(() => TONE[tone])\n</script>\n\n<template>\n  <article\n    class=\"bg-surface rounded-card relative flex h-full flex-col border p-7 shadow-[var(--shadow-card)] transition-[border-color,box-shadow,transform] duration-[420ms] hover:border-[color-mix(in_oklab,var(--color-primary)_60%,transparent)] hover:shadow-[var(--shadow-lift)] sm:p-8\"\n    :class=\"[palette.ring, recommended ? 'shadow-[var(--shadow-lift)]' : 'hover:-translate-y-0.5']\"\n  >\n    <!-- On the edge rather than inside, so it cannot be mistaken for one of\n         the plan's own features. -->\n    <span\n      v-if=\"badge && recommended\"\n      class=\"bg-primary rounded-cell absolute -top-3 left-7 px-3 py-1 text-[0.7rem] font-semibold text-white\"\n    >\n      {{ badge }}\n    </span>\n\n    <div class=\"flex items-start justify-between gap-4\">\n      <span\n        v-if=\"$slots.icon\"\n        class=\"rounded-card grid size-11 place-items-center text-xl\"\n        :class=\"palette.icon\"\n      >\n        <slot name=\"icon\" />\n      </span>\n\n      <span\n        v-if=\"chip\"\n        class=\"rounded-cell ml-auto px-2.5 py-1 text-[0.7rem] font-medium\"\n        :class=\"palette.soft\"\n      >\n        {{ chip }}\n      </span>\n    </div>\n\n    <h3 class=\"text-ink mt-5 text-lg font-semibold\">{{ name }}</h3>\n    <p v-if=\"lead\" class=\"text-ink-soft mt-1.5 text-sm leading-relaxed\">{{ lead }}</p>\n\n    <p class=\"mt-6 flex items-baseline gap-1.5\">\n      <span class=\"text-ink text-3xl font-semibold tracking-tight tabular-nums\">{{ price }}</span>\n      <span v-if=\"period\" class=\"text-ink-soft text-sm\">{{ period }}</span>\n    </p>\n    <p v-if=\"note\" class=\"text-ink-soft mt-1 text-xs\">{{ note }}</p>\n\n    <ul class=\"mt-7 flex-1 space-y-3\">\n      <li v-for=\"feature in features\" :key=\"feature\" class=\"flex gap-3 text-sm\">\n        <!-- The marker is a slot because a pricing table often uses it to say\n             something the tone cannot: on the tier you already have, these are\n             things you hold rather than things you would get. A consumer that\n             had drawn that distinction should not have to give it up to reach\n             for this component. -->\n        <span v-if=\"$slots.bullet\" class=\"mt-[0.45rem] shrink-0\"><slot name=\"bullet\" /></span>\n        <span\n          v-else\n          class=\"bg-primary/45 mt-[0.45rem] size-1.5 shrink-0 rounded-full\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"text-ink-soft leading-relaxed\">{{ feature }}</span>\n      </li>\n    </ul>\n\n    <div v-if=\"$slots.action\" class=\"mt-8\"><slot name=\"action\" /></div>\n  </article>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A small coloured dot, optionally labelled.\n *\n * Takes the colour as a class rather than a category, so an app can key it off\n * whatever its own domain calls a category — habit kinds, expense types,\n * priorities — without this component knowing about any of them.\n */\nconst { fill, label = '' } = defineProps<{\n  /** Background utility for the dot, e.g. `bg-positive`. */\n  fill: string\n  /** Optional text after the dot. Omit for a bare marker. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <span class=\"inline-flex items-center gap-1.5\">\n    <span class=\"size-2 rounded-full\" :class=\"fill\" />\n    <span v-if=\"label\" class=\"text-ink-soft text-xs font-medium\">{{ label }}</span>\n  </span>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A small coloured dot, optionally labelled.\n *\n * Takes the colour as a class rather than a category, so an app can key it off\n * whatever its own domain calls a category — habit kinds, expense types,\n * priorities — without this component knowing about any of them.\n */\nconst { fill, label = '' } = defineProps<{\n  /** Background utility for the dot, e.g. `bg-positive`. */\n  fill: string\n  /** Optional text after the dot. Omit for a bare marker. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <span class=\"inline-flex items-center gap-1.5\">\n    <span class=\"size-2 rounded-full\" :class=\"fill\" />\n    <span v-if=\"label\" class=\"text-ink-soft text-xs font-medium\">{{ label }}</span>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport ToneDot from './ToneDot.vue'\n\n/** The three classes a category needs to colour a heading. */\nexport interface Tone {\n  /** Solid background for the dot, e.g. `bg-positive`. */\n  fill: string\n  /** Tinted surface for the pill, e.g. `bg-positive/5 border-positive/25`. */\n  card: string\n  /** Foreground that pairs with the surface, e.g. `text-positive`. */\n  text: string\n}\n\n/**\n * A pill heading for a group of things.\n *\n * The tone arrives as three class strings rather than a category name: Tailwind\n * reads source files as plain text, so a class assembled at runtime never\n * reaches the stylesheet — the app has to write them out, and it is the app\n * that knows its own categories anyway.\n */\nconst {\n  tone,\n  label,\n  count = 0,\n} = defineProps<{\n  tone: Tone\n  label: string\n  /** Hidden when zero, so an empty group's heading stays quiet. */\n  count?: number | undefined\n}>()\n</script>\n\n<template>\n  <h2 class=\"flex items-center gap-2 self-start rounded-full border px-3 py-1\" :class=\"tone.card\">\n    <ToneDot :fill=\"tone.fill\" />\n    <span class=\"text-xs font-semibold tracking-wide uppercase\" :class=\"tone.text\">\n      {{ label }}\n    </span>\n    <span v-if=\"count > 0\" class=\"text-ink-soft text-xs tabular-nums\">{{ count }}</span>\n  </h2>\n</template>\n","<script setup lang=\"ts\">\nimport ToneDot from './ToneDot.vue'\n\n/** The three classes a category needs to colour a heading. */\nexport interface Tone {\n  /** Solid background for the dot, e.g. `bg-positive`. */\n  fill: string\n  /** Tinted surface for the pill, e.g. `bg-positive/5 border-positive/25`. */\n  card: string\n  /** Foreground that pairs with the surface, e.g. `text-positive`. */\n  text: string\n}\n\n/**\n * A pill heading for a group of things.\n *\n * The tone arrives as three class strings rather than a category name: Tailwind\n * reads source files as plain text, so a class assembled at runtime never\n * reaches the stylesheet — the app has to write them out, and it is the app\n * that knows its own categories anyway.\n */\nconst {\n  tone,\n  label,\n  count = 0,\n} = defineProps<{\n  tone: Tone\n  label: string\n  /** Hidden when zero, so an empty group's heading stays quiet. */\n  count?: number | undefined\n}>()\n</script>\n\n<template>\n  <h2 class=\"flex items-center gap-2 self-start rounded-full border px-3 py-1\" :class=\"tone.card\">\n    <ToneDot :fill=\"tone.fill\" />\n    <span class=\"text-xs font-semibold tracking-wide uppercase\" :class=\"tone.text\">\n      {{ label }}\n    </span>\n    <span v-if=\"count > 0\" class=\"text-ink-soft text-xs tabular-nums\">{{ count }}</span>\n  </h2>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { useId } from 'vue'\n\n/**\n * A row of mutually exclusive choices.\n *\n * Radio inputs rather than buttons: it is a single choice out of a small set,\n * so arrow-key navigation and the \"one of N selected\" announcement come free.\n */\nconst { options } = defineProps<{\n  options: readonly { value: T; label: string }[]\n}>()\n\nconst model = defineModel<T>({ required: true })\n\nconst name = useId()\n</script>\n\n<template>\n  <div class=\"bg-muted rounded-card flex w-full gap-1 p-1\">\n    <label v-for=\"option in options\" :key=\"String(option.value)\" class=\"flex-1 cursor-pointer\">\n      <input v-model=\"model\" type=\"radio\" :value=\"option.value\" :name=\"name\" class=\"sr-only\" />\n      <span\n        class=\"flex h-10 items-center justify-center rounded-xl px-2 text-sm font-medium transition-colors select-none\"\n        :class=\"model === option.value ? 'bg-surface text-ink shadow-sm' : 'text-ink-soft'\"\n      >\n        {{ option.label }}\n      </span>\n    </label>\n  </div>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { useId } from 'vue'\n\n/**\n * A row of mutually exclusive choices.\n *\n * Radio inputs rather than buttons: it is a single choice out of a small set,\n * so arrow-key navigation and the \"one of N selected\" announcement come free.\n */\nconst { options } = defineProps<{\n  options: readonly { value: T; label: string }[]\n}>()\n\nconst model = defineModel<T>({ required: true })\n\nconst name = useId()\n</script>\n\n<template>\n  <div class=\"bg-muted rounded-card flex w-full gap-1 p-1\">\n    <label v-for=\"option in options\" :key=\"String(option.value)\" class=\"flex-1 cursor-pointer\">\n      <input v-model=\"model\" type=\"radio\" :value=\"option.value\" :name=\"name\" class=\"sr-only\" />\n      <span\n        class=\"flex h-10 items-center justify-center rounded-xl px-2 text-sm font-medium transition-colors select-none\"\n        :class=\"model === option.value ? 'bg-surface text-ink shadow-sm' : 'text-ink-soft'\"\n      >\n        {{ option.label }}\n      </span>\n    </label>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{ title: string }>()\n</script>\n\n<template>\n  <section class=\"flex flex-col gap-2\">\n    <h2 class=\"text-ink-soft px-1 text-xs font-semibold tracking-wide uppercase\">{{ title }}</h2>\n\n    <!-- One card per group, rows divided by hairlines. Loose fields floating on\n         the page gave no sense of what belonged with what. -->\n    <div class=\"border-hair bg-surface rounded-card divide-hair divide-y overflow-hidden border\">\n      <slot />\n    </div>\n  </section>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{ title: string }>()\n</script>\n\n<template>\n  <section class=\"flex flex-col gap-2\">\n    <h2 class=\"text-ink-soft px-1 text-xs font-semibold tracking-wide uppercase\">{{ title }}</h2>\n\n    <!-- One card per group, rows divided by hairlines. Loose fields floating on\n         the page gave no sense of what belonged with what. -->\n    <div class=\"border-hair bg-surface rounded-card divide-hair divide-y overflow-hidden border\">\n      <slot />\n    </div>\n  </section>\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","<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 { computed } from 'vue'\n\nconst {\n  rows = 3,\n  rowHeight = 'h-14',\n  label = 'Loading…',\n} = defineProps<{\n  rows?: number | undefined\n  /**\n   * How tall each row is, as either a utility class (`h-20`) or a CSS length\n   * (`5rem`, `72px`, `var(--row)`).\n   *\n   * Both are accepted because the class-only version failed silently: a length\n   * passed here landed in `class` as `5rem`, which is not a class, so the rows\n   * had no height and the placeholder rendered as nothing at all. A loading\n   * state that shows an empty page is worse than no loading state, because it\n   * looks like the page is finished and empty.\n   */\n  rowHeight?: string | undefined\n  label?: string | undefined\n}>()\n\n/** A length starts with a digit, a dot, or opens a CSS function. */\nconst isLength = computed(() => /^(?:[.\\d]|calc\\(|var\\(|clamp\\(|min\\(|max\\()/.test(rowHeight))\n</script>\n\n<template>\n  <div role=\"status\" class=\"flex flex-col gap-1\">\n    <span class=\"sr-only\">{{ label }}</span>\n\n    <div\n      v-for=\"row in rows\"\n      :key=\"row\"\n      class=\"bg-muted rounded-card animate-pulse\"\n      :class=\"isLength ? undefined : rowHeight\"\n      :style=\"isLength ? { height: rowHeight } : undefined\"\n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst {\n  rows = 3,\n  rowHeight = 'h-14',\n  label = 'Loading…',\n} = defineProps<{\n  rows?: number | undefined\n  /**\n   * How tall each row is, as either a utility class (`h-20`) or a CSS length\n   * (`5rem`, `72px`, `var(--row)`).\n   *\n   * Both are accepted because the class-only version failed silently: a length\n   * passed here landed in `class` as `5rem`, which is not a class, so the rows\n   * had no height and the placeholder rendered as nothing at all. A loading\n   * state that shows an empty page is worse than no loading state, because it\n   * looks like the page is finished and empty.\n   */\n  rowHeight?: string | undefined\n  label?: string | undefined\n}>()\n\n/** A length starts with a digit, a dot, or opens a CSS function. */\nconst isLength = computed(() => /^(?:[.\\d]|calc\\(|var\\(|clamp\\(|min\\(|max\\()/.test(rowHeight))\n</script>\n\n<template>\n  <div role=\"status\" class=\"flex flex-col gap-1\">\n    <span class=\"sr-only\">{{ label }}</span>\n\n    <div\n      v-for=\"row in rows\"\n      :key=\"row\"\n      class=\"bg-muted rounded-card animate-pulse\"\n      :class=\"isLength ? undefined : rowHeight\"\n      :style=\"isLength ? { height: rowHeight } : undefined\"\n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ArrowDown, ArrowRight, ArrowUp } from 'lucide-vue-next'\n\nconst {\n  value,\n  label,\n  trend = null,\n} = defineProps<{\n  value: string\n  label: string\n  trend?: 'up' | 'down' | 'flat' | null | undefined\n}>()\n\nconst TREND_ICON = { up: ArrowUp, down: ArrowDown, flat: ArrowRight } as const\n</script>\n\n<template>\n  <div class=\"border-hair rounded-card flex flex-1 flex-col gap-0.5 border p-3\">\n    <div class=\"flex items-baseline gap-1\">\n      <span class=\"text-ink text-xl font-semibold tabular-nums\">{{ value }}</span>\n      <component :is=\"TREND_ICON[trend]\" v-if=\"trend\" class=\"text-ink-soft size-3\" />\n    </div>\n    <span class=\"text-ink-soft text-xs\">{{ label }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ArrowDown, ArrowRight, ArrowUp } from 'lucide-vue-next'\n\nconst {\n  value,\n  label,\n  trend = null,\n} = defineProps<{\n  value: string\n  label: string\n  trend?: 'up' | 'down' | 'flat' | null | undefined\n}>()\n\nconst TREND_ICON = { up: ArrowUp, down: ArrowDown, flat: ArrowRight } as const\n</script>\n\n<template>\n  <div class=\"border-hair rounded-card flex flex-1 flex-col gap-0.5 border p-3\">\n    <div class=\"flex items-baseline gap-1\">\n      <span class=\"text-ink text-xl font-semibold tabular-nums\">{{ value }}</span>\n      <component :is=\"TREND_ICON[trend]\" v-if=\"trend\" class=\"text-ink-soft size-3\" />\n    </div>\n    <span class=\"text-ink-soft text-xs\">{{ label }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-vue-next'\n\nimport BaseButton from './BaseButton.vue'\nimport { useToast } from '../composables/use-toast'\nimport type { ToastTone } from '../composables/use-toast'\n\n/**\n * Where the toasts land. One of these, at the app root.\n *\n * @example\n * ```vue\n * <!-- App.vue -->\n * <ToastHost :close-label=\"$t('common.close')\" />\n * ```\n */\nconst { closeLabel, bottom = false } = defineProps<{\n  /**\n   * The accessible name of each dismiss button. Required, because the button\n   * is an X and an X has no name — and the kit does not know the language.\n   */\n  closeLabel: string\n  /**\n   * Stack from the bottom instead of the top. For a phone shell, where the top\n   * is a status bar and a header and the thumb is nowhere near it.\n   */\n  bottom?: boolean | undefined\n}>()\n\nconst { toasts, dismiss, pause, resume } = useToast()\n\n/**\n * Teleport needs a `body`, and a server has none.\n *\n * Rendering nothing until mounted is also correct rather than merely safe: a\n * prerendered page has no toasts in it, so there is nothing to hydrate and\n * nothing to flash.\n */\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n\nconst ICON = {\n  info: Info,\n  success: CheckCircle2,\n  warning: TriangleAlert,\n  danger: XCircle,\n} as const satisfies Record<ToastTone, unknown>\n\n/* Roles, never colours. The app repaints these by redefining the token. */\nconst TONE_CLASS = {\n  info: 'text-primary',\n  success: 'text-positive',\n  warning: 'text-warning',\n  danger: 'text-negative',\n} as const satisfies Record<ToastTone, string>\n</script>\n\n<template>\n  <Teleport v-if=\"mounted\" to=\"body\">\n    <!--\n      `polite`, not `assertive`, and it is a considered choice: a toast reports\n      something that already happened, and interrupting a screen reader\n      mid-sentence to say \"saved\" is ruder than waiting. A failure the reader\n      must act on belongs in a `BaseAlert` beside the thing that failed.\n\n      `role=\"status\"` rather than `role=\"log\"` so the whole region is read when\n      it changes, not only the appended line.\n    -->\n    <div\n      class=\"pointer-events-none fixed inset-x-0 z-[100] flex flex-col items-center gap-2 px-4\"\n      :class=\"bottom ? 'bottom-0 pb-[max(1rem,env(safe-area-inset-bottom))]' : 'top-0 pt-4'\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <TransitionGroup name=\"toast\">\n        <div\n          v-for=\"toast in toasts\"\n          :key=\"toast.id\"\n          class=\"border-hair bg-surface text-ink rounded-card pointer-events-auto flex w-full max-w-sm items-start gap-3 border p-3 shadow-lg\"\n          @mouseenter=\"pause(toast.id)\"\n          @mouseleave=\"resume(toast.id)\"\n          @focusin=\"pause(toast.id)\"\n          @focusout=\"resume(toast.id)\"\n        >\n          <component\n            :is=\"ICON[toast.tone]\"\n            class=\"mt-0.5 size-5 shrink-0\"\n            :class=\"TONE_CLASS[toast.tone]\"\n            aria-hidden=\"true\"\n          />\n\n          <p class=\"flex-1 text-sm leading-snug\">{{ toast.message }}</p>\n\n          <BaseButton\n            variant=\"quiet\"\n            icon\n            pill\n            size=\"sm\"\n            class=\"-my-1 shrink-0\"\n            :aria-label=\"closeLabel\"\n            @click=\"dismiss(toast.id)\"\n          >\n            <X class=\"size-4\" />\n          </BaseButton>\n        </div>\n      </TransitionGroup>\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n/* Movement is small and downward from the top, upward from the bottom — the\n   direction it came from either way. */\n.toast-enter-active,\n.toast-leave-active {\n  transition:\n    opacity 200ms ease-out,\n    transform 200ms ease-out;\n}\n\n.toast-enter-from,\n.toast-leave-to {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n/* Leaving is taken out of flow so the ones below close the gap smoothly\n   instead of jumping when it unmounts. */\n.toast-leave-active {\n  position: absolute;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-enter-active,\n  .toast-leave-active {\n    transition-duration: 1ms;\n  }\n\n  .toast-enter-from,\n  .toast-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-vue-next'\n\nimport BaseButton from './BaseButton.vue'\nimport { useToast } from '../composables/use-toast'\nimport type { ToastTone } from '../composables/use-toast'\n\n/**\n * Where the toasts land. One of these, at the app root.\n *\n * @example\n * ```vue\n * <!-- App.vue -->\n * <ToastHost :close-label=\"$t('common.close')\" />\n * ```\n */\nconst { closeLabel, bottom = false } = defineProps<{\n  /**\n   * The accessible name of each dismiss button. Required, because the button\n   * is an X and an X has no name — and the kit does not know the language.\n   */\n  closeLabel: string\n  /**\n   * Stack from the bottom instead of the top. For a phone shell, where the top\n   * is a status bar and a header and the thumb is nowhere near it.\n   */\n  bottom?: boolean | undefined\n}>()\n\nconst { toasts, dismiss, pause, resume } = useToast()\n\n/**\n * Teleport needs a `body`, and a server has none.\n *\n * Rendering nothing until mounted is also correct rather than merely safe: a\n * prerendered page has no toasts in it, so there is nothing to hydrate and\n * nothing to flash.\n */\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n\nconst ICON = {\n  info: Info,\n  success: CheckCircle2,\n  warning: TriangleAlert,\n  danger: XCircle,\n} as const satisfies Record<ToastTone, unknown>\n\n/* Roles, never colours. The app repaints these by redefining the token. */\nconst TONE_CLASS = {\n  info: 'text-primary',\n  success: 'text-positive',\n  warning: 'text-warning',\n  danger: 'text-negative',\n} as const satisfies Record<ToastTone, string>\n</script>\n\n<template>\n  <Teleport v-if=\"mounted\" to=\"body\">\n    <!--\n      `polite`, not `assertive`, and it is a considered choice: a toast reports\n      something that already happened, and interrupting a screen reader\n      mid-sentence to say \"saved\" is ruder than waiting. A failure the reader\n      must act on belongs in a `BaseAlert` beside the thing that failed.\n\n      `role=\"status\"` rather than `role=\"log\"` so the whole region is read when\n      it changes, not only the appended line.\n    -->\n    <div\n      class=\"pointer-events-none fixed inset-x-0 z-[100] flex flex-col items-center gap-2 px-4\"\n      :class=\"bottom ? 'bottom-0 pb-[max(1rem,env(safe-area-inset-bottom))]' : 'top-0 pt-4'\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <TransitionGroup name=\"toast\">\n        <div\n          v-for=\"toast in toasts\"\n          :key=\"toast.id\"\n          class=\"border-hair bg-surface text-ink rounded-card pointer-events-auto flex w-full max-w-sm items-start gap-3 border p-3 shadow-lg\"\n          @mouseenter=\"pause(toast.id)\"\n          @mouseleave=\"resume(toast.id)\"\n          @focusin=\"pause(toast.id)\"\n          @focusout=\"resume(toast.id)\"\n        >\n          <component\n            :is=\"ICON[toast.tone]\"\n            class=\"mt-0.5 size-5 shrink-0\"\n            :class=\"TONE_CLASS[toast.tone]\"\n            aria-hidden=\"true\"\n          />\n\n          <p class=\"flex-1 text-sm leading-snug\">{{ toast.message }}</p>\n\n          <BaseButton\n            variant=\"quiet\"\n            icon\n            pill\n            size=\"sm\"\n            class=\"-my-1 shrink-0\"\n            :aria-label=\"closeLabel\"\n            @click=\"dismiss(toast.id)\"\n          >\n            <X class=\"size-4\" />\n          </BaseButton>\n        </div>\n      </TransitionGroup>\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n/* Movement is small and downward from the top, upward from the bottom — the\n   direction it came from either way. */\n.toast-enter-active,\n.toast-leave-active {\n  transition:\n    opacity 200ms ease-out,\n    transform 200ms ease-out;\n}\n\n.toast-enter-from,\n.toast-leave-to {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n/* Leaving is taken out of flow so the ones below close the gap smoothly\n   instead of jumping when it unmounts. */\n.toast-leave-active {\n  position: absolute;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-enter-active,\n  .toast-leave-active {\n    transition-duration: 1ms;\n  }\n\n  .toast-enter-from,\n  .toast-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"L extends string\">\n/**\n * A flat language switcher for screens with no Settings behind them.\n *\n * The list and the labels are props: only the app knows which languages it\n * ships, and endonyms — each language written in itself — are what make the\n * right option legible to someone who cannot read the current interface.\n */\nconst {\n  locales,\n  labels,\n  label = '',\n} = defineProps<{\n  locales: readonly L[]\n  /** Endonyms, e.g. `{ en: 'English', tr: 'Türkçe' }`. */\n  labels: Record<L, string>\n  /** Accessible name for the group. */\n  label?: string | undefined\n}>()\n\n/**\n * Two-way bound rather than taking the runtime's ref as a prop: props are not\n * unwrapped in a template and cannot be assigned to, so the ref would compare\n * against itself and the click handler would not compile.\n */\nconst preference = defineModel<'system' | L>({ required: true })\n</script>\n\n<template>\n  <nav class=\"flex flex-wrap items-center justify-center gap-1\" :aria-label=\"label || undefined\">\n    <button\n      v-for=\"locale in locales\"\n      :key=\"locale\"\n      type=\"button\"\n      :lang=\"locale\"\n      class=\"rounded-full px-2.5 py-1.5 text-xs transition-colors\"\n      :class=\"\n        preference === locale ? 'bg-muted text-ink font-semibold' : 'text-ink-soft hover:text-ink'\n      \"\n      :aria-pressed=\"preference === locale\"\n      @click=\"preference = locale\"\n    >\n      {{ labels[locale] }}\n    </button>\n  </nav>\n</template>\n","<script setup lang=\"ts\" generic=\"L extends string\">\n/**\n * A flat language switcher for screens with no Settings behind them.\n *\n * The list and the labels are props: only the app knows which languages it\n * ships, and endonyms — each language written in itself — are what make the\n * right option legible to someone who cannot read the current interface.\n */\nconst {\n  locales,\n  labels,\n  label = '',\n} = defineProps<{\n  locales: readonly L[]\n  /** Endonyms, e.g. `{ en: 'English', tr: 'Türkçe' }`. */\n  labels: Record<L, string>\n  /** Accessible name for the group. */\n  label?: string | undefined\n}>()\n\n/**\n * Two-way bound rather than taking the runtime's ref as a prop: props are not\n * unwrapped in a template and cannot be assigned to, so the ref would compare\n * against itself and the click handler would not compile.\n */\nconst preference = defineModel<'system' | L>({ required: true })\n</script>\n\n<template>\n  <nav class=\"flex flex-wrap items-center justify-center gap-1\" :aria-label=\"label || undefined\">\n    <button\n      v-for=\"locale in locales\"\n      :key=\"locale\"\n      type=\"button\"\n      :lang=\"locale\"\n      class=\"rounded-full px-2.5 py-1.5 text-xs transition-colors\"\n      :class=\"\n        preference === locale ? 'bg-muted text-ink font-semibold' : 'text-ink-soft hover:text-ink'\n      \"\n      :aria-pressed=\"preference === locale\"\n      @click=\"preference = locale\"\n    >\n      {{ labels[locale] }}\n    </button>\n  </nav>\n</template>\n","<script setup lang=\"ts\">\nconst { label } = defineProps<{ label: string }>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    class=\"border-hair bg-surface text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 border text-sm font-medium transition-colors active:scale-95\"\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\">\nconst { label } = defineProps<{ label: string }>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    class=\"border-hair bg-surface text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 border text-sm font-medium transition-colors active:scale-95\"\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\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\nimport type { Component } from 'vue'\n\nimport { tapFeedback } from '../utils/haptics'\n\nexport interface TabItem<K extends string> {\n  /** Identity, compared against `active`. */\n  key: K\n  /** Router destination. */\n  to: string\n  /** Text under the icon. Already translated. */\n  label: string\n  icon: Component\n}\n\n/**\n * The floating bottom bar.\n *\n * Items and the active key are props: the package has no opinion about how an\n * app names its screens, and reading `route.meta` here would force one.\n */\nconst {\n  items,\n  active,\n  label = '',\n} = defineProps<{\n  items: readonly TabItem<K>[]\n  /** Which item is current. Usually from `route.meta`. */\n  active?: K | undefined\n  /** Accessible name for the navigation landmark. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <header class=\"tab-bar\">\n    <nav class=\"tab-bar-inner\" :aria-label=\"label || undefined\">\n      <RouterLink\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        :to=\"item.to\"\n        class=\"tab-link\"\n        :class=\"{ 'is-active': item.key === active }\"\n        :aria-current=\"item.key === active ? 'page' : undefined\"\n        @click=\"tapFeedback()\"\n      >\n        <span class=\"tab-icon-slot\">\n          <component :is=\"item.icon\" class=\"tab-icon\" />\n        </span>\n        <span class=\"tab-label\">{{ item.label }}</span>\n      </RouterLink>\n    </nav>\n  </header>\n</template>\n\n<style scoped>\n@reference \"../styles/_reference.css\";\n\n/* absolute, not fixed: the bar hangs inside the app shell. Fixed would pin it\n   to the browser window, which on a desktop is nowhere near the app. */\n.tab-bar {\n  @apply absolute left-1/2 z-40 w-full max-w-[360px] -translate-x-1/2 px-4;\n  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.tab-bar-inner {\n  @apply border-hair bg-surface/85 flex items-center justify-between gap-1 border p-1.5 shadow-lg backdrop-blur-md;\n  border-radius: var(--radius-shell);\n}\n\n.tab-link {\n  @apply text-ink-soft flex min-h-[52px] flex-1 cursor-pointer flex-col items-center justify-center gap-1 py-1.5;\n  border-radius: calc(var(--radius-shell) - 6px);\n  /* Only the icon reacts to a press. Scaling the whole link drags the label and\n     the pill with it, which reads as the bar wobbling. */\n  transition: color 200ms ease;\n}\n\n.tab-link:hover {\n  @apply text-ink;\n}\n\n/* The pill sits behind the icon rather than the link, so the active tab grows a\n   marker instead of the row changing shape. */\n.tab-icon-slot {\n  @apply flex h-7 w-12 items-center justify-center rounded-full transition-all duration-200 ease-out;\n}\n\n.tab-link:active .tab-icon-slot {\n  transform: scale(0.88);\n}\n\n.is-active {\n  @apply text-primary;\n}\n\n.is-active .tab-icon-slot {\n  @apply bg-muted;\n}\n\n.tab-icon {\n  @apply size-[18px] stroke-2 transition-transform duration-200;\n}\n\n.is-active .tab-icon {\n  @apply scale-110 stroke-[2.5px];\n}\n\n.tab-label {\n  @apply text-[10px] leading-none font-medium;\n}\n\n.is-active .tab-label {\n  @apply font-semibold;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tab-icon-slot,\n  .tab-icon {\n    transition: none;\n  }\n  .tab-link:active .tab-icon-slot {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\nimport type { Component } from 'vue'\n\nimport { tapFeedback } from '../utils/haptics'\n\nexport interface TabItem<K extends string> {\n  /** Identity, compared against `active`. */\n  key: K\n  /** Router destination. */\n  to: string\n  /** Text under the icon. Already translated. */\n  label: string\n  icon: Component\n}\n\n/**\n * The floating bottom bar.\n *\n * Items and the active key are props: the package has no opinion about how an\n * app names its screens, and reading `route.meta` here would force one.\n */\nconst {\n  items,\n  active,\n  label = '',\n} = defineProps<{\n  items: readonly TabItem<K>[]\n  /** Which item is current. Usually from `route.meta`. */\n  active?: K | undefined\n  /** Accessible name for the navigation landmark. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <header class=\"tab-bar\">\n    <nav class=\"tab-bar-inner\" :aria-label=\"label || undefined\">\n      <RouterLink\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        :to=\"item.to\"\n        class=\"tab-link\"\n        :class=\"{ 'is-active': item.key === active }\"\n        :aria-current=\"item.key === active ? 'page' : undefined\"\n        @click=\"tapFeedback()\"\n      >\n        <span class=\"tab-icon-slot\">\n          <component :is=\"item.icon\" class=\"tab-icon\" />\n        </span>\n        <span class=\"tab-label\">{{ item.label }}</span>\n      </RouterLink>\n    </nav>\n  </header>\n</template>\n\n<style scoped>\n@reference \"../styles/_reference.css\";\n\n/* absolute, not fixed: the bar hangs inside the app shell. Fixed would pin it\n   to the browser window, which on a desktop is nowhere near the app. */\n.tab-bar {\n  @apply absolute left-1/2 z-40 w-full max-w-[360px] -translate-x-1/2 px-4;\n  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.tab-bar-inner {\n  @apply border-hair bg-surface/85 flex items-center justify-between gap-1 border p-1.5 shadow-lg backdrop-blur-md;\n  border-radius: var(--radius-shell);\n}\n\n.tab-link {\n  @apply text-ink-soft flex min-h-[52px] flex-1 cursor-pointer flex-col items-center justify-center gap-1 py-1.5;\n  border-radius: calc(var(--radius-shell) - 6px);\n  /* Only the icon reacts to a press. Scaling the whole link drags the label and\n     the pill with it, which reads as the bar wobbling. */\n  transition: color 200ms ease;\n}\n\n.tab-link:hover {\n  @apply text-ink;\n}\n\n/* The pill sits behind the icon rather than the link, so the active tab grows a\n   marker instead of the row changing shape. */\n.tab-icon-slot {\n  @apply flex h-7 w-12 items-center justify-center rounded-full transition-all duration-200 ease-out;\n}\n\n.tab-link:active .tab-icon-slot {\n  transform: scale(0.88);\n}\n\n.is-active {\n  @apply text-primary;\n}\n\n.is-active .tab-icon-slot {\n  @apply bg-muted;\n}\n\n.tab-icon {\n  @apply size-[18px] stroke-2 transition-transform duration-200;\n}\n\n.is-active .tab-icon {\n  @apply scale-110 stroke-[2.5px];\n}\n\n.tab-label {\n  @apply text-[10px] leading-none font-medium;\n}\n\n.is-active .tab-label {\n  @apply font-semibold;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tab-icon-slot,\n  .tab-icon {\n    transition: none;\n  }\n  .tab-link:active .tab-icon-slot {\n    transform: none;\n  }\n}\n</style>\n","import { computed, ref, watchEffect } from 'vue'\nimport { createI18n } from 'vue-i18n'\n\nimport { setFormatLocale } from '../utils/format'\n\n/** What the user picked. `system` re-reads the browser on every launch. */\nexport type LocalePreference<L extends string> = 'system' | L\n\nexport interface I18nRuntimeOptions<L extends string, Schema> {\n  /** Languages the app ships, in no particular order. */\n  locales: readonly L[]\n  /** The one that is always loaded, and the fallback when a load fails. */\n  fallback: L\n  /**\n   * BCP 47 tag per locale, for `Intl`.\n   *\n   * Message lookup only needs the base language, but dates and numbers need a\n   * region to be right — `zh` alone would leave the formatter to guess.\n   */\n  intlTags: Record<L, string>\n  /** The fallback's messages, bundled. */\n  messages: Schema\n  /** The rest, fetched only when they are the one in use. */\n  loaders?: Partial<Record<L, () => Promise<{ default: Schema }>>>\n  /** Where the choice is stored. Namespace it per app. */\n  storageKey?: string\n}\n\n/**\n * Builds an i18n runtime around an app's own catalogue.\n *\n * A factory rather than a module singleton because the schema is the app's:\n * typing every locale as `typeof en` is what makes a missing key a build error,\n * and this package has no `en` of its own to type against.\n *\n * @example\n * ```ts\n * export const { i18n, t, useLocalePreference, loadActiveLocale } =\n *   createI18nRuntime({\n *     locales: ['en', 'tr'] as const,\n *     fallback: 'en',\n *     intlTags: { en: 'en-GB', tr: 'tr-TR' },\n *     messages: en,\n *     loaders: { tr: () => import('./locales/tr') },\n *     storageKey: 'myapp-locale',\n *   })\n * ```\n */\nexport function createI18nRuntime<L extends string, Schema extends Record<string, unknown>>(\n  options: I18nRuntimeOptions<L, Schema>,\n) {\n  const { locales, fallback, intlTags, messages, storageKey = 'rei-locale' } = options\n\n  // Typed rather than defaulted to `{}`, which erases the locale keys and makes\n  // `loaders[locale]` an index into an empty object.\n  const loaders: Partial<Record<L, () => Promise<{ default: Schema }>>> = options.loaders ?? {}\n\n  function isSupported(value: string): value is L {\n    return (locales as readonly string[]).includes(value)\n  }\n\n  /**\n   * First browser language the app can actually speak.\n   *\n   * `navigator.languages` is ordered by the user's own preference, so the first\n   * match is the best one — not simply the first entry.\n   */\n  function detectSystemLocale(): L {\n    // No browser to ask. The fallback is the right answer on a server: it is\n    // the locale whose messages are bundled, so it is the only one that could\n    // render without a load.\n    //\n    // The test is `document`, not `navigator`. Node has shipped a global\n    // `navigator` since v21, so `typeof navigator === 'undefined'` is false on\n    // a server and this would read the *build machine's* language and bake it\n    // into every prerendered page. `document` is the only one of the two that\n    // still means \"a browser\".\n    if (typeof document === 'undefined') return fallback\n\n    for (const tag of navigator.languages ?? [navigator.language]) {\n      const base = tag.split('-')[0]?.toLowerCase()\n      if (base && isSupported(base)) return base\n    }\n\n    return fallback\n  }\n\n  function readStored(): LocalePreference<L> {\n    try {\n      const stored = localStorage.getItem(storageKey)\n      if (stored === 'system' || (stored && isSupported(stored))) return stored\n    } catch {\n      // Storage blocked; fall through to the system language.\n    }\n\n    return 'system'\n  }\n\n  const preference = ref<LocalePreference<L>>(readStored())\n\n  const activeLocale = computed<L>(() =>\n    preference.value === 'system' ? detectSystemLocale() : (preference.value as L),\n  )\n\n  const intlLocale = computed(() => intlTags[activeLocale.value])\n\n  // Only the fallback at construction; the rest arrive through\n  // setLocaleMessage.\n  const initial = { [fallback]: messages } as Record<string, Record<string, unknown>>\n\n  const i18n = createI18n({\n    legacy: false,\n    locale: activeLocale.value as string,\n    fallbackLocale: fallback as string,\n    messages: initial,\n  } as unknown as Parameters<typeof createI18n>[0])\n\n  /**\n   * A narrow view of the instance.\n   *\n   * vue-i18n infers its own generics from the messages it is handed, which\n   * fights a runtime that is generic over the app's schema. Casting once, here,\n   * keeps that fight out of every call site — and the surface below is the\n   * whole of what this runtime uses.\n   */\n  const core = i18n.global as unknown as {\n    locale: { value: string }\n    setLocaleMessage: (locale: string, messages: Schema) => void\n    t: (key: string, named?: Record<string, unknown>) => string\n  }\n\n  const loaded = new Set<L>([fallback])\n\n  /**\n   * Makes sure a locale's messages are in place before it becomes active.\n   *\n   * Awaited rather than fired and forgotten: setting the locale first paints one\n   * frame of the fallback at every other user, which is the flash a fallback\n   * exists to prevent, not cause.\n   */\n  async function ensureMessages(locale: L): Promise<void> {\n    if (loaded.has(locale)) return\n\n    const load = loaders[locale]\n    if (!load) return\n\n    try {\n      const module = await load()\n      core.setLocaleMessage(locale, module.default)\n      loaded.add(locale)\n    } catch {\n      // Offline, or a stale chunk after a deploy. The fallback is loaded and\n      // will carry the UI, which beats a blank screen.\n    }\n  }\n\n  /** Loads whatever the stored preference resolves to. Call before mounting. */\n  function loadActiveLocale(): Promise<void> {\n    return ensureMessages(activeLocale.value)\n  }\n\n  // Keeps vue-i18n, `Intl` and the document in step. `lang` matters beyond\n  // tidiness: it drives hyphenation, font fallback and screen readers.\n  watchEffect(() => {\n    core.locale.value = activeLocale.value\n    setFormatLocale(intlLocale.value)\n\n    if (typeof document !== 'undefined') {\n      document.documentElement.lang = activeLocale.value\n    }\n  })\n\n  /** Read and write the language preference. */\n  function useLocalePreference() {\n    return computed<LocalePreference<L>>({\n      get: () => preference.value,\n      set: (next) => {\n        const resolved = next === 'system' ? detectSystemLocale() : (next as L)\n\n        // Messages first, then the switch — the other order shows the fallback\n        // for a frame on the way to the language the user just picked.\n        void ensureMessages(resolved).then(() => {\n          preference.value = next\n        })\n\n        try {\n          localStorage.setItem(storageKey, next)\n        } catch {\n          // Storage blocked; the choice lasts for this session only.\n        }\n      },\n    })\n  }\n\n  return {\n    i18n,\n    /** `t` for code outside a component. Tracks the locale inside a computed. */\n    t: core.t,\n    activeLocale,\n    intlLocale,\n    ensureMessages,\n    loadActiveLocale,\n    useLocalePreference,\n  }\n}\n","/**\n * rei-kit — the layer every app starts from.\n *\n * Everything here is free of any backend, router or i18n choice. Components\n * take strings rather than calling a translator, and utilities take the clock\n * rather than reading it, so nothing in this package can force a decision on\n * the app that installs it.\n *\n * @see https://github.com/ramazandogna/rei-kit\n */\n\n/**\n * The published version, replaced at build time from `package.json`.\n *\n * It was a literal `'0.0.0'` and nothing ever rewrote it, so every consumer\n * that imported this — and the showcase, which is how it was noticed — was\n * told the kit was at 0.0.0 whatever it actually was. A symbol in a public API\n * that reports something false is worse than one that is missing: nobody\n * checks a value that looks like it works.\n *\n * The fallback keeps `vitest` and `vite dev` honest, where no define runs.\n */\nexport const VERSION: string =\n  typeof __REI_KIT_VERSION__ === 'string' ? __REI_KIT_VERSION__ : '0.0.0-dev'\n\n// ── Utilities ──────────────────────────────────────────────────────────────\nexport {\n  addDays,\n  eachDayOfYear,\n  fromDateKey,\n  lastNDays,\n  leadingBlanks,\n  startOfWeek,\n  toDateKey,\n  todayKey,\n} from './utils/date'\nexport type { WeekStart } from './utils/date'\n\nexport { formatDate, setFormatLocale } from './utils/format'\nexport { relativeDayLabel } from './utils/day-label'\nexport type { DayLabels } from './utils/day-label'\n\nexport { downloadJson } from './utils/download'\nexport { safeRedirect } from './utils/redirect'\nexport type { QueryValue } from './utils/redirect'\nexport { tapFeedback } from './utils/haptics'\nexport { isApplePortable, isInstalled, needsIosInstall } from './utils/platform'\n\nexport { AppError, registerErrorMapper, toAppError } from './utils/app-error'\nexport type { AppErrorKind, ErrorMapper } from './utils/app-error'\n\n// ── Composables ────────────────────────────────────────────────────────────\nexport {\n  applyTheme,\n  isThemePreference,\n  readStoredTheme,\n  setThemeStorageKey,\n  useTheme,\n} from './composables/use-theme'\nexport type { ThemePreference } from './composables/use-theme'\n\nexport { useToday } from './composables/use-today'\nexport { useOnline } from './composables/use-online'\nexport { useDebouncedCallback } from './composables/use-debounced-callback'\nexport { useDragScroll } from './composables/use-drag-scroll'\nexport { useMediaQuery } from './composables/use-media-query'\nexport { useVisualViewport } from './composables/use-visual-viewport'\nexport { useToast } from './composables/use-toast'\nexport type { Toast, ToastOptions, ToastTone } from './composables/use-toast'\nexport type { VisualViewportRect } from './composables/use-visual-viewport'\n\n// ── Components ─────────────────────────────────────────────────────────────\nexport { default as BaseAlert } from './components/BaseAlert.vue'\nexport { default as BaseBadge } from './components/BaseBadge.vue'\nexport { default as BaseButton } from './components/BaseButton.vue'\nexport { default as BaseInput } from './components/BaseInput.vue'\nexport { default as BaseSheet } from './components/BaseSheet.vue'\nexport { default as BaseCard } from './components/BaseCard.vue'\nexport { default as BaseCheckbox } from './components/BaseCheckbox.vue'\nexport { default as BaseRadioGroup } from './components/BaseRadioGroup.vue'\nexport { default as BaseSelect } from './components/BaseSelect.vue'\nexport { default as BaseTextarea } from './components/BaseTextarea.vue'\nexport { default as EmptyState } from './components/EmptyState.vue'\nexport { default as FormField } from './components/FormField.vue'\nexport { default as ErrorBoundary } from './components/ErrorBoundary.vue'\nexport { default as PageContainer } from './components/PageContainer.vue'\nexport { default as PageHeader } from './components/PageHeader.vue'\nexport { default as ProgressBar } from './components/ProgressBar.vue'\nexport { default as PriceCard } from './components/PriceCard.vue'\nexport { default as SectionHeading } from './components/SectionHeading.vue'\nexport { default as SegmentedControl } from './components/SegmentedControl.vue'\nexport { default as SettingsGroup } from './components/SettingsGroup.vue'\nexport { default as SettingsRow } from './components/SettingsRow.vue'\nexport { default as SkeletonList } from './components/SkeletonList.vue'\nexport { default as StatCard } from './components/StatCard.vue'\nexport { default as ToastHost } from './components/ToastHost.vue'\nexport { default as ToneDot } from './components/ToneDot.vue'\nexport type { Tone } from './components/SectionHeading.vue'\nexport { default as LocaleLinks } from './components/LocaleLinks.vue'\nexport { default as GoogleButton } from './components/GoogleButton.vue'\nexport { default as TabBar } from './components/TabBar.vue'\nexport type { TabItem } from './components/TabBar.vue'\n\n// ── i18n ───────────────────────────────────────────────────────────────────\nexport { createI18nRuntime } from './i18n/runtime'\nexport type { I18nRuntimeOptions, LocalePreference } from './i18n/runtime'\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["$slots","$attrs","$slots","$attrs","$slots","$slots"],"sources":["../src/utils/date.ts","../src/utils/format.ts","../src/utils/day-label.ts","../src/utils/download.ts","../src/utils/redirect.ts","../src/utils/haptics.ts","../src/utils/platform.ts","../src/composables/use-theme.ts","../src/composables/use-today.ts","../src/composables/use-online.ts","../src/composables/use-debounced-callback.ts","../src/composables/use-drag-scroll.ts","../src/composables/use-media-query.ts","../src/composables/use-visual-viewport.ts","../src/composables/use-toast.ts","../src/components/BaseAlert.vue","../src/components/BaseAlert.vue","../src/components/BaseBadge.vue","../src/components/BaseBadge.vue","../src/components/BaseButton.vue","../src/components/BaseButton.vue","../src/components/FormField.vue","../src/components/FormField.vue","../src/components/BaseInput.vue","../src/components/BaseInput.vue","../src/components/BaseSheet.vue","../src/components/BaseSheet.vue","../src/components/BaseCard.vue","../src/components/BaseCard.vue","../src/components/BaseCheckbox.vue","../src/components/BaseCheckbox.vue","../src/components/BaseRadioGroup.vue","../src/components/BaseRadioGroup.vue","../src/components/BaseSelect.vue","../src/components/BaseSelect.vue","../src/components/BaseTextarea.vue","../src/components/BaseTextarea.vue","../src/components/EmptyState.vue","../src/components/EmptyState.vue","../src/components/ErrorBoundary.vue","../src/components/ErrorBoundary.vue","../src/components/PageContainer.vue","../src/components/PageContainer.vue","../src/components/PageHeader.vue","../src/components/PageHeader.vue","../src/components/ProgressBar.vue","../src/components/ProgressBar.vue","../src/components/PriceCard.vue","../src/components/PriceCard.vue","../src/components/ToneDot.vue","../src/components/ToneDot.vue","../src/components/SectionHeading.vue","../src/components/SectionHeading.vue","../src/components/SegmentedControl.vue","../src/components/SegmentedControl.vue","../src/components/SettingsGroup.vue","../src/components/SettingsGroup.vue","../src/components/SettingsRow.vue","../src/components/SettingsRow.vue","../src/components/SkeletonList.vue","../src/components/SkeletonList.vue","../src/components/StatCard.vue","../src/components/StatCard.vue","../src/components/ToastHost.vue","../src/components/ToastHost.vue","../src/components/LocaleLinks.vue","../src/components/LocaleLinks.vue","../src/components/GoogleButton.vue","../src/components/GoogleButton.vue","../src/components/TabBar.vue","../src/components/TabBar.vue","../src/i18n/runtime.ts","../src/index.ts"],"sourcesContent":["/**\n * Local calendar-day helpers.\n *\n * Every function is pure and works on `YYYY-MM-DD` keys, the same shape as the\n * `date` columns in Postgres. Nothing here calls `toISOString`: that converts to\n * UTC, so in a UTC+9 timezone every entry made between midnight and 09:00 would\n * be written to the previous day.\n */\n\n/**\n * Formats a `Date` as a local `YYYY-MM-DD` key.\n *\n * @param date - Any `Date`; only its local year, month and day are read.\n * @returns The calendar day in the runtime's own timezone.\n *\n * @example\n * ```ts\n * // 2026-08-23 01:30 in Tokyo\n * toDateKey(new Date())        // '2026-08-23'\n * new Date().toISOString()     // '2026-08-22T16:30…'  ← the bug\n * ```\n */\nexport function toDateKey(date: Date): string {\n  const year = String(date.getFullYear()).padStart(4, '0')\n  const month = String(date.getMonth() + 1).padStart(2, '0')\n  const day = String(date.getDate()).padStart(2, '0')\n\n  return `${year}-${month}-${day}`\n}\n\n/** Today's key in the user's own timezone. */\nexport function todayKey(): string {\n  return toDateKey(new Date())\n}\n\n/**\n * Parses a `YYYY-MM-DD` key into a `Date` at local midnight.\n *\n * @param key - A key produced by {@link toDateKey}.\n * @returns Local midnight of that calendar day.\n * @throws If the key is not three numeric parts.\n *\n * @example\n * ```ts\n * fromDateKey('2026-08-23')      // local midnight, correct\n * new Date('2026-08-23')         // UTC midnight — shifts a day in some zones\n * ```\n */\nexport function fromDateKey(key: string): Date {\n  const [year, month, day] = key.split('-').map(Number)\n\n  if (year === undefined || month === undefined || day === undefined) {\n    throw new Error(`Invalid date key: ${key}`)\n  }\n\n  return new Date(year, month - 1, day)\n}\n\n/**\n * Shifts a date key by whole calendar days.\n *\n * Uses `setDate`, which is calendar-aware: it rolls over month and year ends,\n * and stays correct across daylight-saving transitions. Adding\n * `days * 86_400_000` milliseconds would not — a DST day is 23 or 25 hours long.\n *\n * @param key - Starting `YYYY-MM-DD` key.\n * @param days - Days to add; negative goes back.\n * @returns The resulting key.\n *\n * @example\n * ```ts\n * addDays('2026-01-31', 1)   // '2026-02-01'\n * addDays('2026-01-01', -1)  // '2025-12-31'\n * addDays('2028-02-28', 1)   // '2028-02-29'  — leap year\n * ```\n */\nexport function addDays(key: string, days: number): string {\n  const date = fromDateKey(key)\n  date.setDate(date.getDate() + days)\n\n  return toDateKey(date)\n}\n\n/**\n * The last `count` days ending today, oldest first.\n *\n * `today` is a parameter so the function stays pure and testable; call sites\n * normally omit it.\n *\n * @param count - How many days to return, including `today`.\n * @param today - End of the range. Defaults to the real today.\n * @returns Keys in ascending order.\n *\n * @example\n * ```ts\n * lastNDays(3, '2026-08-23')  // ['2026-08-21', '2026-08-22', '2026-08-23']\n * ```\n */\nexport function lastNDays(count: number, today: string = todayKey()): string[] {\n  const keys: string[] = []\n\n  for (let offset = count - 1; offset >= 0; offset -= 1) {\n    keys.push(addDays(today, -offset))\n  }\n\n  return keys\n}\n\n/** 0 = week starts on Sunday, 1 = on Monday. Mirrors `profiles.week_starts_on`. */\nexport type WeekStart = 0 | 1\n\n/**\n * The first day of the week containing `key`.\n *\n * The user's preference is a parameter, not a module-level setting: changing it\n * in Profile has to re-render the week grid and the year heatmap immediately,\n * and a global would make that a hidden dependency.\n *\n * @param key - Any day in the week.\n * @param weekStartsOn - 0 for Sunday, 1 for Monday.\n * @returns Key of that week's first day.\n *\n * @example\n * ```ts\n * // 2026-08-23 is a Sunday\n * startOfWeek('2026-08-23', 1)  // '2026-08-17'  — previous Monday\n * startOfWeek('2026-08-23', 0)  // '2026-08-23'  — already Sunday\n * ```\n */\nexport function startOfWeek(key: string, weekStartsOn: WeekStart): string {\n  const weekday = fromDateKey(key).getDay()\n  const offset = (weekday - weekStartsOn + 7) % 7\n\n  return addDays(key, -offset)\n}\n\n/**\n * Every day of a calendar year, in order.\n *\n * Leap years fall out of the loop for free: it walks day by day until the year\n * rolls over, so February 29 is included when it exists.\n *\n * @param year - Four-digit year.\n * @returns 365 or 366 keys, oldest first.\n */\nexport function eachDayOfYear(year: number): string[] {\n  const keys: string[] = []\n  const date = new Date(year, 0, 1)\n\n  while (date.getFullYear() === year) {\n    keys.push(toDateKey(date))\n    date.setDate(date.getDate() + 1)\n  }\n\n  return keys\n}\n\n/**\n * Empty cells before a block's first day in a seven-row column grid.\n *\n * The grid fills column by column, so the first column is only partly used\n * unless the block starts exactly on the week's first day. An off-by-one here\n * shifts the whole block by a row, so this is unit tested.\n *\n * @param firstDayKey - First day of the block, e.g. `'2026-02-01'`.\n * @param weekStartsOn - 0 for Sunday, 1 for Monday.\n * @returns 0-6 blank cells.\n *\n * @example\n * ```ts\n * leadingBlanks('2026-01-01', 1)  // 3 — a Thursday, Mon-Wed are blank\n * leadingBlanks('2024-01-01', 1)  // 0 — a Monday\n * ```\n */\nexport function leadingBlanks(firstDayKey: string, weekStartsOn: WeekStart): number {\n  return (fromDateKey(firstDayKey).getDay() - weekStartsOn + 7) % 7\n}\n","import { ref } from 'vue'\n\n/**\n * The locale `Intl` formatting uses.\n *\n * Held here rather than imported from an i18n runtime so the utilities have no\n * i18n dependency at all: an app that never installs vue-i18n still gets dates\n * in the right language. `createI18nRuntime` sets this when it is used.\n */\nconst locale = ref<string>(typeof navigator === 'undefined' ? 'en' : (navigator.language ?? 'en'))\n\n/**\n * Points every formatter at a new locale.\n *\n * @example\n * ```ts\n * setFormatLocale('tr-TR')\n * ```\n */\nexport function setFormatLocale(next: string): void {\n  locale.value = next\n}\n\n/**\n * `Intl.DateTimeFormat` is expensive to construct, so instances are cached per\n * locale and option set. The key includes the locale, which is what lets the\n * cache survive a language change instead of returning stale formatters.\n */\nconst cache = new Map<string, Intl.DateTimeFormat>()\n\n/**\n * Formats a date in the active locale.\n *\n * Reading the locale ref here is deliberate: called from a `computed`, the\n * result re-evaluates when the language changes.\n *\n * @param date - Date to format.\n * @param options - Passed straight to `Intl.DateTimeFormat`.\n *\n * @example\n * ```ts\n * formatDate(new Date(), { weekday: 'narrow' }) // 'T'\n * ```\n */\nexport function formatDate(date: Date, options: Intl.DateTimeFormatOptions): string {\n  const tag = locale.value\n  const key = `${tag}:${JSON.stringify(options)}`\n\n  let formatter = cache.get(key)\n  if (!formatter) {\n    formatter = new Intl.DateTimeFormat(tag, options)\n    cache.set(key, formatter)\n  }\n\n  return formatter.format(date)\n}\n","import { addDays, fromDateKey } from './date'\nimport { formatDate } from './format'\n\n/** The two days worth naming rather than numbering. */\nexport interface DayLabels {\n  today: string\n  yesterday: string\n}\n\n/**\n * A short name for a day, relative to today.\n *\n * \"Today\" and \"Yesterday\" are worth spelling out — they are the two a user\n * actually reaches for. Anything older gets its weekday, which inside a\n * five-day window is unambiguous and stays two or three characters in every\n * language.\n *\n * The two words are arguments rather than translated here: a library that calls\n * `t()` forces every consumer onto one i18n setup.\n *\n * @param dateKey - The day to label (`YYYY-MM-DD`).\n * @param today - Today's key, passed in so the caller controls the clock.\n * @param labels - What to call today and yesterday.\n *\n * @example\n * ```ts\n * relativeDayLabel('2026-08-28', '2026-08-31', { today: 'Today', yesterday: 'Yesterday' })\n * // 'Fri'\n * ```\n */\nexport function relativeDayLabel(dateKey: string, today: string, labels: DayLabels): string {\n  if (dateKey === today) return labels.today\n  if (dateKey === addDays(today, -1)) return labels.yesterday\n\n  return formatDate(fromDateKey(dateKey), { weekday: 'short' })\n}\n","/**\n * Hands the user a file without a server round trip.\n *\n * @param data - Anything `JSON.stringify` can serialise.\n * @param filename - Suggested name, e.g. `hibi-export-2026-08-24.json`.\n */\nexport function downloadJson(data: unknown, filename: string): void {\n  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' })\n  const url = URL.createObjectURL(blob)\n  const link = document.createElement('a')\n\n  link.href = url\n  link.download = filename\n  link.click()\n\n  URL.revokeObjectURL(url)\n}\n","/**\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 * 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","/**\n * Whether the app is running from the Home Screen rather than a browser tab.\n *\n * Two checks because iOS predates the standard one: `display-mode: standalone`\n * is the modern signal, `navigator.standalone` is Safari's own.\n */\nexport function isInstalled(): boolean {\n  if (typeof window === 'undefined') return false\n\n  return (\n    window.matchMedia('(display-mode: standalone)').matches ||\n    (navigator as Navigator & { standalone?: boolean }).standalone === true\n  )\n}\n\n/** iPhone and iPad, including iPadOS reporting itself as a Mac. */\nexport function isApplePortable(): boolean {\n  if (typeof window === 'undefined') return false\n\n  return (\n    /iPad|iPhone|iPod/.test(navigator.userAgent) ||\n    (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)\n  )\n}\n\n/**\n * Whether this device can only receive notifications once the app is installed.\n *\n * Safari on iOS grants notification permission to an installed web app and to\n * nothing else — in a normal tab the request does not even prompt. Telling the\n * user to allow notifications there is asking for something the browser will\n * not offer, so the UI has to say \"add to Home Screen\" instead.\n *\n * @example\n * ```ts\n * if (needsIosInstall()) // show the Home Screen instruction, not the button\n * ```\n */\nexport function needsIosInstall(): boolean {\n  return isApplePortable() && !isInstalled()\n}\n","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 { readonly, ref } from 'vue'\n\nimport { todayKey } from '../utils/date'\n\n/**\n * Today's date key, kept current while the app stays open.\n *\n * `todayKey()` called once in `setup` freezes the date for the lifetime of the\n * component. Nobody notices in a session that lasts minutes, but a phone left\n * on the Today screen overnight would keep marking yesterday, and the Week grid\n * would disable the column that just became today.\n */\nconst current = ref(todayKey())\n\nlet timer: ReturnType<typeof setTimeout> | undefined\nlet watching = false\n\n/** A second past midnight, so a fast timer cannot fire on the old date. */\nfunction msUntilMidnight(): number {\n  const now = new Date()\n  const next = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 1, 0, 0, 1)\n\n  return next.getTime() - now.getTime()\n}\n\nfunction refresh() {\n  current.value = todayKey()\n}\n\nfunction schedule() {\n  clearTimeout(timer)\n  timer = setTimeout(() => {\n    refresh()\n    schedule()\n  }, msUntilMidnight())\n}\n\n/**\n * Starts the clock, once, and only where there is a clock to watch.\n *\n * This used to run at import time, which made the module impossible to load on\n * a server: `document` is not defined there, and a barrel export means one\n * `import { BaseButton } from 'rei-kit'` pulls this file in. Deferring it to\n * the first `useToday()` also means an app that never asks for today never\n * arms a timer.\n */\nfunction watchTheClock() {\n  if (watching || typeof document === 'undefined') return\n\n  watching = true\n  schedule()\n\n  // A sleeping phone does not run timers reliably, so the tab also re-checks\n  // the moment it comes back — which is when the user would see a stale date.\n  document.addEventListener('visibilitychange', () => {\n    if (document.visibilityState !== 'visible') return\n\n    refresh()\n    schedule()\n  })\n}\n\n/**\n * @returns Read-only ref holding today's `YYYY-MM-DD` key.\n *\n * Rendered on a server this is the *server's* today, which is a different day\n * from the visitor's either side of midnight. Anything prerendered from it\n * would hydrate to a different value; render it on the client.\n *\n * @example\n * ```ts\n * const today = useToday()\n * const isFuture = computed(() => day > today.value)\n * ```\n */\nexport function useToday() {\n  watchTheClock()\n\n  return readonly(current)\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 { onScopeDispose } from 'vue'\n\n/**\n * Delays a callback until the caller stops calling it.\n *\n * Used for note autosave: a request per keystroke would be wasteful, but losing\n * the last keystrokes when the user navigates away would be worse — so the\n * pending call is flushed on dispose, and `flush` is exposed for route guards.\n *\n * @param callback - Runs with the arguments of the most recent call.\n * @param delay - Quiet period in milliseconds.\n * @returns `run` to schedule, `flush` to run now, `cancel` to drop.\n *\n * @example\n * ```ts\n * const save = useDebouncedCallback((body: string) => mutate(body), 800)\n * watch(text, (value) => save.run(value))\n * onBeforeRouteLeave(() => save.flush())\n * ```\n */\nexport function useDebouncedCallback<A extends unknown[]>(\n  callback: (...args: A) => void,\n  delay = 800,\n) {\n  let timer: ReturnType<typeof setTimeout> | null = null\n  let pending: A | null = null\n\n  /** Runs the pending call right now, if there is one. */\n  function flush() {\n    if (timer !== null) clearTimeout(timer)\n    timer = null\n\n    if (pending !== null) {\n      const args = pending\n      pending = null\n      callback(...args)\n    }\n  }\n\n  /** Drops the pending call without running it. */\n  function cancel() {\n    if (timer !== null) clearTimeout(timer)\n    timer = null\n    pending = null\n  }\n\n  function run(...args: A) {\n    pending = args\n    if (timer !== null) clearTimeout(timer)\n    timer = setTimeout(flush, delay)\n  }\n\n  // A closing sheet or an unmounting view must not eat the last keystrokes.\n  onScopeDispose(flush)\n\n  return { run, flush, cancel }\n}\n","import { onScopeDispose, watch } from 'vue'\nimport type { Ref } from 'vue'\n\n/** Movement before a press counts as a drag rather than a tap. */\nconst DRAG_THRESHOLD_PX = 6\n\n/**\n * Drag-to-scroll for a horizontally scrolling element.\n *\n * The app puts `touch-action: pan-y` on the page content so the tab-swipe\n * gesture keeps its pointer events — the browser never claims a horizontal\n * drag, which also means it never pans this element natively. Rather than give\n * that up, horizontal scrolling is driven here.\n *\n * @param target - The scroll container.\n * @returns `didDrag`, so a click handler can ignore the press that ended a drag.\n *\n * @example\n * ```ts\n * const scroller = ref<HTMLElement | null>(null)\n * const { didDrag } = useDragScroll(scroller)\n *\n * function onClick() {\n *   if (didDrag()) return\n *   // …treat as a tap\n * }\n * ```\n */\nexport function useDragScroll(target: Ref<HTMLElement | null>) {\n  let pointerId: number | null = null\n  let startX = 0\n  let startScroll = 0\n  let dragged = false\n\n  function onPointerDown(event: PointerEvent) {\n    const element = target.value\n    if (!element || event.pointerType === 'mouse') return\n\n    pointerId = event.pointerId\n    startX = event.clientX\n    startScroll = element.scrollLeft\n    dragged = false\n  }\n\n  function onPointerMove(event: PointerEvent) {\n    const element = target.value\n    if (!element || event.pointerId !== pointerId) return\n\n    const dx = event.clientX - startX\n    if (!dragged && Math.abs(dx) < DRAG_THRESHOLD_PX) return\n\n    // Capture only once the gesture is clearly horizontal, so a vertical scroll\n    // that happens to start here still belongs to the page.\n    if (!dragged) {\n      dragged = true\n      element.setPointerCapture(event.pointerId)\n    }\n\n    element.scrollLeft = startScroll - dx\n  }\n\n  function onPointerUp(event: PointerEvent) {\n    const element = target.value\n    if (element?.hasPointerCapture(event.pointerId)) {\n      element.releasePointerCapture(event.pointerId)\n    }\n\n    pointerId = null\n  }\n\n  function bind(element: HTMLElement) {\n    element.addEventListener('pointerdown', onPointerDown)\n    element.addEventListener('pointermove', onPointerMove)\n    element.addEventListener('pointerup', onPointerUp)\n    element.addEventListener('pointercancel', onPointerUp)\n  }\n\n  function unbind(element: HTMLElement) {\n    element.removeEventListener('pointerdown', onPointerDown)\n    element.removeEventListener('pointermove', onPointerMove)\n    element.removeEventListener('pointerup', onPointerUp)\n    element.removeEventListener('pointercancel', onPointerUp)\n  }\n\n  watch(\n    target,\n    (element, previous) => {\n      if (previous) unbind(previous)\n      if (element) bind(element)\n    },\n    { immediate: true },\n  )\n\n  onScopeDispose(() => {\n    if (target.value) unbind(target.value)\n  })\n\n  return { didDrag: () => dragged }\n}\n","import { onBeforeUnmount, onMounted, ref } from 'vue'\n\n/**\n * Whether a media query matches, kept up to date.\n *\n * Starts false and resolves on mount, which is deliberate: this is the one\n * place a component is tempted to branch on viewport during render, and doing\n * that under prerendering produces HTML built for a screen the server does not\n * have. Hydration then swaps it and the page jumps. False first, correct a\n * frame later, no jump — and a layout that reads badly at `false` is a layout\n * with a mobile-first bug worth knowing about.\n *\n * Guarded for the server for the same reason the rest of the kit is: this\n * package has to be importable in Node, and `matchMedia` does not exist there.\n *\n * @example\n * ```ts\n * const wide = useMediaQuery('(min-width: 64rem)')\n * ```\n */\nexport function useMediaQuery(query: string) {\n  const matches = ref(false)\n\n  let list: MediaQueryList | undefined\n\n  function update(event: MediaQueryList | MediaQueryListEvent) {\n    matches.value = event.matches\n  }\n\n  onMounted(() => {\n    if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return\n\n    list = window.matchMedia(query)\n    update(list)\n    list.addEventListener('change', update)\n  })\n\n  onBeforeUnmount(() => {\n    list?.removeEventListener('change', update)\n  })\n\n  return matches\n}\n","import { onScopeDispose, readonly, ref } from 'vue'\n\n/** The visible area, once the on-screen keyboard has taken its share. */\nexport interface VisualViewportRect {\n  height: number\n  offsetTop: number\n}\n\n/**\n * Tracks the visual viewport.\n *\n * Chrome and Android browsers honour `interactive-widget=resizes-content`, so\n * the layout viewport already shrinks for the keyboard there. Safari on iOS\n * does not implement it: it shrinks only the *visual* viewport, leaving a sheet\n * sized in `dvh` sitting partly underneath the keyboard.\n *\n * `null` means the API is unavailable, which callers should read as \"trust the\n * layout viewport\" rather than as zero. A server has no viewport at all, so it\n * gets that same `null` — this runs during `setup`, and a component using it\n * has to survive being rendered there.\n *\n * @example\n * ```ts\n * const viewport = useVisualViewport()\n * // :style=\"viewport ? { height: `${viewport.height}px` } : undefined\"\n * ```\n */\nexport function useVisualViewport() {\n  const rect = ref<VisualViewportRect | null>(null)\n\n  const viewport = typeof window === 'undefined' ? undefined : window.visualViewport\n  if (!viewport) return readonly(rect)\n\n  function read() {\n    if (!viewport) return\n\n    rect.value = { height: viewport.height, offsetTop: viewport.offsetTop }\n  }\n\n  read()\n\n  // `scroll` matters as much as `resize`: iOS shifts the visual viewport up to\n  // keep the focused field visible, without changing its height.\n  viewport.addEventListener('resize', read)\n  viewport.addEventListener('scroll', read)\n\n  onScopeDispose(() => {\n    viewport.removeEventListener('resize', read)\n    viewport.removeEventListener('scroll', read)\n  })\n\n  return readonly(rect)\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\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}\n\nexport interface ToastOptions {\n  /** Milliseconds on screen; `0` stays until dismissed. */\n  duration?: number | 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 * 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 = options.duration ?? (tone === 'danger' ? DANGER_DURATION : DEFAULT_DURATION)\n\n  const next = [...items.value, { id, message, tone, duration }]\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 */\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 } from 'vue'\n\n/**\n * A small standing label: a level, a state, a count.\n *\n * Not a button and never clickable — the moment one of these needs a click it\n * is a chip, which is a different component with focus, a hit area and a way\n * to be removed. Keeping that line drawn is most of the value.\n */\nconst { tone = 'neutral' } = defineProps<{\n  tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n}>()\n\nconst TONES = {\n  neutral: 'bg-muted text-ink-soft',\n  primary: 'bg-primary/10 text-primary',\n  success: 'bg-positive/12 text-positive',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-negative/12 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\n</script>\n\n<template>\n  <span\n    class=\"rounded-cell inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium whitespace-nowrap\"\n    :class=\"skin\"\n  >\n    <slot />\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * A small standing label: a level, a state, a count.\n *\n * Not a button and never clickable — the moment one of these needs a click it\n * is a chip, which is a different component with focus, a hit area and a way\n * to be removed. Keeping that line drawn is most of the value.\n */\nconst { tone = 'neutral' } = defineProps<{\n  tone?: 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | undefined\n}>()\n\nconst TONES = {\n  neutral: 'bg-muted text-ink-soft',\n  primary: 'bg-primary/10 text-primary',\n  success: 'bg-positive/12 text-positive',\n  warning: 'bg-warning/15 text-warning',\n  danger: 'bg-negative/12 text-negative',\n} as const\n\nconst skin = computed(() => TONES[tone])\n</script>\n\n<template>\n  <span\n    class=\"rounded-cell inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium whitespace-nowrap\"\n    :class=\"skin\"\n  >\n    <slot />\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * The kit's button, and — when asked — its link.\n *\n * `as` exists because a button and a link are the same shape and a different\n * element, and the app was resolving that by nesting them: a consumer had\n * `<RouterLink><BaseButton>` in every call to action, which is an `<a>` around\n * a `<button>`. That is invalid HTML, two stops in the tab order and two\n * controls to a screen reader, for one thing on the screen. Whether something\n * navigates is the app's decision; carrying it is this component's job.\n *\n * `router-link` is resolved by name rather than imported, so `vue-router` stays\n * the optional peer it is. Only an app that passes `as=\"router-link\"` needs it,\n * and an app that passes it has it.\n */\nconst {\n  as = 'button',\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  disabled = false,\n  type = 'button',\n  icon = false,\n  block = false,\n  pill = false,\n  pressed = undefined,\n  to = undefined,\n  href = undefined,\n} = defineProps<{\n  /** What to render. `button` unless this navigates. */\n  as?: 'button' | 'a' | 'router-link' | undefined\n  /**\n   * `link` is a real action that should read as text — \"clear this note\",\n   * \"remove\", \"change category\". It has no surface at all, so it also has no\n   * height and no padding: giving it either would make it a ghost button,\n   * which is a different thing and was already here.\n   */\n  variant?:\n    | 'primary'\n    | 'secondary'\n    | 'ghost'\n    | 'quiet'\n    | 'destructive'\n    | 'row'\n    | 'danger'\n    | 'positive'\n    | 'warning'\n    | 'accent'\n    | 'link'\n    | 'unstyled'\n    | undefined\n  /** `xs` is the action inside a prompt or a nudge, not on a page. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | undefined\n  loading?: boolean | undefined\n  disabled?: boolean | undefined\n  /** Ignored unless `as` is `button`. */\n  type?: 'button' | 'submit' | undefined\n  /**\n   * Square, sized to its icon, with no label beside it.\n   *\n   * **Pass `aria-label`.** An icon on its own has no accessible name, and a\n   * control a screen reader announces as \"button\" is not usable. Attributes\n   * fall through, so `aria-label` lands where it should — nothing here can\n   * check that you passed one, which is why it is said this loudly.\n   */\n  icon?: boolean | undefined\n  /** Fills its container. The ordinary case under a form. */\n  block?: boolean | undefined\n  /** For `as=\"router-link\"`. */\n  to?: string | Record<string, unknown> | undefined\n  /** For `as=\"a\"`. */\n  href?: string | undefined\n  /**\n   * Fully rounded rather than card-cornered.\n   *\n   * Every install prompt, update prompt and nudge across the apps used the\n   * same pair — a filled pill to act and a quiet one to dismiss — and none of\n   * them could use this component, because it only knew one corner radius.\n   */\n  pill?: boolean | undefined\n  /**\n   * That this button is a switch, and whether it is on.\n   *\n   * Omit it and the button is an action. Pass it and the button becomes a\n   * toggle: `aria-pressed` is written, and the variants that have an \"off\"\n   * look — ghost, quiet, secondary — take a filled one when on.\n   *\n   * There were 18 of these hand-written across the three apps, every one a\n   * picker cell or a filter chip, and almost none of them said `aria-pressed`\n   * at all. A screen reader met a row of identical buttons with no way to know\n   * which was chosen.\n   */\n  pressed?: boolean | undefined\n}>()\n\nconst VARIANT_CLASS = {\n  primary: 'bg-primary text-white hover:bg-primary/90',\n  /*\n   * An action that is real but not the one being urged.\n   *\n   * `ghost` had been standing in for this and cannot: with no border and no\n   * fill it reads as text, so \"Save draft\" sitting next to \"Publish\" looked\n   * like a caption rather than the other half of a choice. Ghost is for a\n   * control that should recede until it is wanted — a toolbar, a menu row —\n   * and that is a different job.\n   */\n  secondary: 'border-hair bg-surface text-ink border hover:bg-muted',\n  ghost: 'bg-transparent text-ink hover:bg-muted',\n  /*\n   * Quiet until you reach for it, and then plainly destructive: a delete at\n   * the end of a row, a \"remove this note\", an archive.\n   *\n   * Not `danger`, which is filled and shouts before it is needed — a red\n   * button in a list of rows makes the list look like a warning. And not\n   * `quiet` with a `hover:text-negative` class beside it, which is how all\n   * three apps were doing it: that class and the variant's own\n   * `hover:text-ink` set the same property at the same specificity, so which\n   * one wins depends on the order they happen to land in the stylesheet.\n   *\n   * Fifteen of these across the three apps, and every one of them was that\n   * coin toss.\n   */\n  destructive: 'bg-transparent text-ink-soft hover:text-negative',\n  /*\n   * A line in a list that is also a control: a settings row, a node in a tree,\n   * a heading that opens something.\n   *\n   * Full width, aligned to the start, and a hover that fills the whole line\n   * rather than a box inside it. Every app had written this — `.tree-row`,\n   * `.row`, `.header-action` — because a button that centres its content\n   * cannot be a row, and the alignment is the only thing that had to change.\n   *\n   * Padding stays the app's: a menu row and a tree node are not the same\n   * height, and the kit has no opinion about which one this is.\n   */\n  row: 'w-full justify-start text-left bg-transparent text-ink hover:bg-muted',\n  /*\n   * The control that is present without asking for attention: a dismiss beside\n   * an install prompt, a chevron beside a month, a delete at the end of a row.\n   *\n   * `ghost` is not this. Ghost keeps full-strength ink; this one starts soft\n   * and darkens, which is the difference between a control waiting to be used\n   * and one that is merely available. The pair `text-ink-soft hover:text-ink`\n   * was hand-written 47 times across the three apps.\n   *\n   * It fills on hover, and 0.11.0 got that half-right by fill... only for\n   * icons. The evidence said otherwise once the third app was read: an editor\n   * toolbar's buttons carry text and fill exactly the same way. The shape is\n   * \"a control in a strip\", not \"a control with a glyph in it\". A text action\n   * that should have no surface at all is `link`.\n   */\n  quiet: 'bg-transparent text-ink-soft hover:bg-muted hover:text-ink',\n  danger: 'bg-negative text-white hover:bg-negative/90',\n  /*\n   * The rest of the roles the kit already declares.\n   *\n   * `tokens.css` names five colour roles and this component exposed two of\n   * them, so an app that wanted a success-coloured action had to hand-write\n   * the button — which is what Hibi's green install button is. A component\n   * that cannot use a role its own design system declares is not avoiding a\n   * guess; it is incomplete.\n   */\n  positive: 'bg-positive text-white hover:bg-positive/90',\n  warning: 'bg-warning text-white hover:bg-warning/90',\n  accent: 'bg-accent text-white hover:bg-accent/90',\n  /* No fill, no border, no box: underlined so it is still obviously a control\n     without one. `ghost` cannot stand in — it has a hover surface and a\n     radius, so it reads as a button that happens to be empty. */\n  link: 'bg-transparent underline underline-offset-2 hover:opacity-80',\n  /*\n   * Everything this component is, except the paint.\n   *\n   * The reason it exists is measurable: across the three apps there were 58\n   * raw `<button>` elements sitting in 24 files that already imported and used\n   * `BaseButton`. The developer reached for the kit and gave up halfway down\n   * the same file — because the kit offered all of its appearance or none of\n   * itself, and what those places needed was everything but the appearance.\n   *\n   * A picker cell, a chip, a calendar day: the surface is the app's, and it\n   * should be. The element, the focus ring, the disabled handling, the\n   * `aria-pressed` bookkeeping and the `as` switch are not, and were being\n   * rewritten every time — usually without the focus ring.\n   */\n  unstyled: '',\n} as const\n\n/* Two scales, because a square control cannot take horizontal padding and\n   still be square. `lg` is here for a wide page's call to action: a 44px\n   button is right under a thumb and undersized under a headline. */\nconst SIZE_CLASS = {\n  xs: 'h-8 px-3 text-xs',\n  sm: 'h-9 px-3 text-sm',\n  md: 'h-11 px-4 text-base',\n  lg: 'h-14 px-6 text-lg',\n} as const\n\nconst ICON_SIZE_CLASS = {\n  xs: 'size-8 text-xs',\n  sm: 'size-9 text-sm',\n  md: 'size-11 text-base',\n  lg: 'size-14 text-lg',\n} as const\n\n/* A row is sized by its padding, not by a height. A settings line holds one\n   line of text and a tree node can hold two, and a fixed height turns the\n   second into an overflow. */\nconst ROW_SIZE_CLASS = {\n  xs: 'px-2 py-1.5 text-xs',\n  sm: 'px-3 py-2 text-sm',\n  md: 'px-3 py-2.5 text-base',\n  lg: 'px-4 py-3 text-lg',\n} as const\n\n/* A link takes the type size and nothing else. Height and padding are what\n   make a surface, and this variant is the one without one. */\nconst LINK_SIZE_CLASS = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n} as const\n\nconst sizing = computed(() => {\n  // Unstyled owns no box, so it takes no size: the app's own classes decide.\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return LINK_SIZE_CLASS[size]\n  if (variant === 'row') return ROW_SIZE_CLASS[size]\n  return icon ? ICON_SIZE_CLASS[size] : SIZE_CLASS[size]\n})\n\n/* The variants with an \"off\" look, and what \"on\" looks like for them. The\n   filled ones are already on; link and unstyled have no surface to fill. */\nconst PRESSED_CLASS: Partial<Record<string, string>> = {\n  ghost: 'bg-primary text-white hover:bg-primary/90',\n  quiet: 'bg-primary text-white hover:bg-primary/90',\n  secondary: 'bg-primary border-primary text-white hover:bg-primary/90',\n  /* A selected row is filled, not recoloured: the line stays a line, and the\n     fill is what a list uses to say \"this one\". Filling it with the primary\n     colour instead would make one row of a list shout. */\n  row: 'w-full justify-start text-left bg-muted text-ink hover:bg-muted',\n}\n\nconst surface = computed(() => {\n  if (pressed === true) return PRESSED_CLASS[variant] ?? VARIANT_CLASS[variant]\n\n  /* Destructive tints its own fill rather than borrowing the neutral one: a\n     red glyph on a grey wash reads as two different states at once. */\n  if (variant === 'destructive') return `${VARIANT_CLASS.destructive} hover:bg-negative/10`\n\n  return VARIANT_CLASS[variant]\n})\n\n/* Layout and feel, which unstyled does not impose either — but the focus ring\n   and the disabled handling stay, because those are the floor. A raw <button>\n   is what happens when a component makes them optional.\n   \n   Colour is in the transition, not just transform. Every variant here changes\n   colour on hover and none of them animated it, so every button in every\n   consuming app snapped while the hand-written controls beside them faded —\n   `transition-colors` appears 106 times across the three apps, which is the\n   convention this component was the only thing not following. */\nconst shell = computed(() => {\n  if (variant === 'unstyled') return ''\n\n  const feel = 'transition-[transform,color,background-color,border-color] duration-100 select-none'\n\n  /* A row does not press. Scaling a full-width line looks like the list itself\n     flinched, and every hand-written row in the apps animated colour only. */\n  if (variant === 'row') return `inline-flex items-center gap-2 font-medium ${feel}`\n\n  return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`\n})\n\nconst radius = computed(() => {\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return 'rounded-xs'\n  return pill ? 'rounded-full' : 'rounded-card'\n})\n\n/** Anything that is not a `<button>` cannot be `disabled`; it has to be told. */\nconst inactive = computed(() => disabled || loading)\n\nconst linkProps = computed(() => {\n  if (as === 'router-link') return { to }\n  // The href is dropped rather than kept alongside aria-disabled: an anchor\n  // without one is not focusable and not activatable, which is the whole of\n  // what \"disabled\" means for a link.\n  if (as === 'a') return inactive.value ? {} : { href }\n  return {}\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"linkProps\"\n    :type=\"as === 'button' ? type : undefined\"\n    :disabled=\"as === 'button' ? inactive : undefined\"\n    :aria-disabled=\"as !== 'button' && inactive ? 'true' : undefined\"\n    :aria-busy=\"loading\"\n    :aria-pressed=\"pressed === undefined ? undefined : String(pressed)\"\n    class=\"focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n    :class=\"[shell, surface, sizing, radius, block ? 'w-full' : '']\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"size-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    />\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * The kit's button, and — when asked — its link.\n *\n * `as` exists because a button and a link are the same shape and a different\n * element, and the app was resolving that by nesting them: a consumer had\n * `<RouterLink><BaseButton>` in every call to action, which is an `<a>` around\n * a `<button>`. That is invalid HTML, two stops in the tab order and two\n * controls to a screen reader, for one thing on the screen. Whether something\n * navigates is the app's decision; carrying it is this component's job.\n *\n * `router-link` is resolved by name rather than imported, so `vue-router` stays\n * the optional peer it is. Only an app that passes `as=\"router-link\"` needs it,\n * and an app that passes it has it.\n */\nconst {\n  as = 'button',\n  variant = 'primary',\n  size = 'md',\n  loading = false,\n  disabled = false,\n  type = 'button',\n  icon = false,\n  block = false,\n  pill = false,\n  pressed = undefined,\n  to = undefined,\n  href = undefined,\n} = defineProps<{\n  /** What to render. `button` unless this navigates. */\n  as?: 'button' | 'a' | 'router-link' | undefined\n  /**\n   * `link` is a real action that should read as text — \"clear this note\",\n   * \"remove\", \"change category\". It has no surface at all, so it also has no\n   * height and no padding: giving it either would make it a ghost button,\n   * which is a different thing and was already here.\n   */\n  variant?:\n    | 'primary'\n    | 'secondary'\n    | 'ghost'\n    | 'quiet'\n    | 'destructive'\n    | 'row'\n    | 'danger'\n    | 'positive'\n    | 'warning'\n    | 'accent'\n    | 'link'\n    | 'unstyled'\n    | undefined\n  /** `xs` is the action inside a prompt or a nudge, not on a page. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | undefined\n  loading?: boolean | undefined\n  disabled?: boolean | undefined\n  /** Ignored unless `as` is `button`. */\n  type?: 'button' | 'submit' | undefined\n  /**\n   * Square, sized to its icon, with no label beside it.\n   *\n   * **Pass `aria-label`.** An icon on its own has no accessible name, and a\n   * control a screen reader announces as \"button\" is not usable. Attributes\n   * fall through, so `aria-label` lands where it should — nothing here can\n   * check that you passed one, which is why it is said this loudly.\n   */\n  icon?: boolean | undefined\n  /** Fills its container. The ordinary case under a form. */\n  block?: boolean | undefined\n  /** For `as=\"router-link\"`. */\n  to?: string | Record<string, unknown> | undefined\n  /** For `as=\"a\"`. */\n  href?: string | undefined\n  /**\n   * Fully rounded rather than card-cornered.\n   *\n   * Every install prompt, update prompt and nudge across the apps used the\n   * same pair — a filled pill to act and a quiet one to dismiss — and none of\n   * them could use this component, because it only knew one corner radius.\n   */\n  pill?: boolean | undefined\n  /**\n   * That this button is a switch, and whether it is on.\n   *\n   * Omit it and the button is an action. Pass it and the button becomes a\n   * toggle: `aria-pressed` is written, and the variants that have an \"off\"\n   * look — ghost, quiet, secondary — take a filled one when on.\n   *\n   * There were 18 of these hand-written across the three apps, every one a\n   * picker cell or a filter chip, and almost none of them said `aria-pressed`\n   * at all. A screen reader met a row of identical buttons with no way to know\n   * which was chosen.\n   */\n  pressed?: boolean | undefined\n}>()\n\nconst VARIANT_CLASS = {\n  primary: 'bg-primary text-white hover:bg-primary/90',\n  /*\n   * An action that is real but not the one being urged.\n   *\n   * `ghost` had been standing in for this and cannot: with no border and no\n   * fill it reads as text, so \"Save draft\" sitting next to \"Publish\" looked\n   * like a caption rather than the other half of a choice. Ghost is for a\n   * control that should recede until it is wanted — a toolbar, a menu row —\n   * and that is a different job.\n   */\n  secondary: 'border-hair bg-surface text-ink border hover:bg-muted',\n  ghost: 'bg-transparent text-ink hover:bg-muted',\n  /*\n   * Quiet until you reach for it, and then plainly destructive: a delete at\n   * the end of a row, a \"remove this note\", an archive.\n   *\n   * Not `danger`, which is filled and shouts before it is needed — a red\n   * button in a list of rows makes the list look like a warning. And not\n   * `quiet` with a `hover:text-negative` class beside it, which is how all\n   * three apps were doing it: that class and the variant's own\n   * `hover:text-ink` set the same property at the same specificity, so which\n   * one wins depends on the order they happen to land in the stylesheet.\n   *\n   * Fifteen of these across the three apps, and every one of them was that\n   * coin toss.\n   */\n  destructive: 'bg-transparent text-ink-soft hover:text-negative',\n  /*\n   * A line in a list that is also a control: a settings row, a node in a tree,\n   * a heading that opens something.\n   *\n   * Full width, aligned to the start, and a hover that fills the whole line\n   * rather than a box inside it. Every app had written this — `.tree-row`,\n   * `.row`, `.header-action` — because a button that centres its content\n   * cannot be a row, and the alignment is the only thing that had to change.\n   *\n   * Padding stays the app's: a menu row and a tree node are not the same\n   * height, and the kit has no opinion about which one this is.\n   */\n  row: 'w-full justify-start text-left bg-transparent text-ink hover:bg-muted',\n  /*\n   * The control that is present without asking for attention: a dismiss beside\n   * an install prompt, a chevron beside a month, a delete at the end of a row.\n   *\n   * `ghost` is not this. Ghost keeps full-strength ink; this one starts soft\n   * and darkens, which is the difference between a control waiting to be used\n   * and one that is merely available. The pair `text-ink-soft hover:text-ink`\n   * was hand-written 47 times across the three apps.\n   *\n   * It fills on hover, and 0.11.0 got that half-right by fill... only for\n   * icons. The evidence said otherwise once the third app was read: an editor\n   * toolbar's buttons carry text and fill exactly the same way. The shape is\n   * \"a control in a strip\", not \"a control with a glyph in it\". A text action\n   * that should have no surface at all is `link`.\n   */\n  quiet: 'bg-transparent text-ink-soft hover:bg-muted hover:text-ink',\n  danger: 'bg-negative text-white hover:bg-negative/90',\n  /*\n   * The rest of the roles the kit already declares.\n   *\n   * `tokens.css` names five colour roles and this component exposed two of\n   * them, so an app that wanted a success-coloured action had to hand-write\n   * the button — which is what Hibi's green install button is. A component\n   * that cannot use a role its own design system declares is not avoiding a\n   * guess; it is incomplete.\n   */\n  positive: 'bg-positive text-white hover:bg-positive/90',\n  warning: 'bg-warning text-white hover:bg-warning/90',\n  accent: 'bg-accent text-white hover:bg-accent/90',\n  /* No fill, no border, no box: underlined so it is still obviously a control\n     without one. `ghost` cannot stand in — it has a hover surface and a\n     radius, so it reads as a button that happens to be empty. */\n  link: 'bg-transparent underline underline-offset-2 hover:opacity-80',\n  /*\n   * Everything this component is, except the paint.\n   *\n   * The reason it exists is measurable: across the three apps there were 58\n   * raw `<button>` elements sitting in 24 files that already imported and used\n   * `BaseButton`. The developer reached for the kit and gave up halfway down\n   * the same file — because the kit offered all of its appearance or none of\n   * itself, and what those places needed was everything but the appearance.\n   *\n   * A picker cell, a chip, a calendar day: the surface is the app's, and it\n   * should be. The element, the focus ring, the disabled handling, the\n   * `aria-pressed` bookkeeping and the `as` switch are not, and were being\n   * rewritten every time — usually without the focus ring.\n   */\n  unstyled: '',\n} as const\n\n/* Two scales, because a square control cannot take horizontal padding and\n   still be square. `lg` is here for a wide page's call to action: a 44px\n   button is right under a thumb and undersized under a headline. */\nconst SIZE_CLASS = {\n  xs: 'h-8 px-3 text-xs',\n  sm: 'h-9 px-3 text-sm',\n  md: 'h-11 px-4 text-base',\n  lg: 'h-14 px-6 text-lg',\n} as const\n\nconst ICON_SIZE_CLASS = {\n  xs: 'size-8 text-xs',\n  sm: 'size-9 text-sm',\n  md: 'size-11 text-base',\n  lg: 'size-14 text-lg',\n} as const\n\n/* A row is sized by its padding, not by a height. A settings line holds one\n   line of text and a tree node can hold two, and a fixed height turns the\n   second into an overflow. */\nconst ROW_SIZE_CLASS = {\n  xs: 'px-2 py-1.5 text-xs',\n  sm: 'px-3 py-2 text-sm',\n  md: 'px-3 py-2.5 text-base',\n  lg: 'px-4 py-3 text-lg',\n} as const\n\n/* A link takes the type size and nothing else. Height and padding are what\n   make a surface, and this variant is the one without one. */\nconst LINK_SIZE_CLASS = {\n  xs: 'text-xs',\n  sm: 'text-sm',\n  md: 'text-base',\n  lg: 'text-lg',\n} as const\n\nconst sizing = computed(() => {\n  // Unstyled owns no box, so it takes no size: the app's own classes decide.\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return LINK_SIZE_CLASS[size]\n  if (variant === 'row') return ROW_SIZE_CLASS[size]\n  return icon ? ICON_SIZE_CLASS[size] : SIZE_CLASS[size]\n})\n\n/* The variants with an \"off\" look, and what \"on\" looks like for them. The\n   filled ones are already on; link and unstyled have no surface to fill. */\nconst PRESSED_CLASS: Partial<Record<string, string>> = {\n  ghost: 'bg-primary text-white hover:bg-primary/90',\n  quiet: 'bg-primary text-white hover:bg-primary/90',\n  secondary: 'bg-primary border-primary text-white hover:bg-primary/90',\n  /* A selected row is filled, not recoloured: the line stays a line, and the\n     fill is what a list uses to say \"this one\". Filling it with the primary\n     colour instead would make one row of a list shout. */\n  row: 'w-full justify-start text-left bg-muted text-ink hover:bg-muted',\n}\n\nconst surface = computed(() => {\n  if (pressed === true) return PRESSED_CLASS[variant] ?? VARIANT_CLASS[variant]\n\n  /* Destructive tints its own fill rather than borrowing the neutral one: a\n     red glyph on a grey wash reads as two different states at once. */\n  if (variant === 'destructive') return `${VARIANT_CLASS.destructive} hover:bg-negative/10`\n\n  return VARIANT_CLASS[variant]\n})\n\n/* Layout and feel, which unstyled does not impose either — but the focus ring\n   and the disabled handling stay, because those are the floor. A raw <button>\n   is what happens when a component makes them optional.\n   \n   Colour is in the transition, not just transform. Every variant here changes\n   colour on hover and none of them animated it, so every button in every\n   consuming app snapped while the hand-written controls beside them faded —\n   `transition-colors` appears 106 times across the three apps, which is the\n   convention this component was the only thing not following. */\nconst shell = computed(() => {\n  if (variant === 'unstyled') return ''\n\n  const feel = 'transition-[transform,color,background-color,border-color] duration-100 select-none'\n\n  /* A row does not press. Scaling a full-width line looks like the list itself\n     flinched, and every hand-written row in the apps animated colour only. */\n  if (variant === 'row') return `inline-flex items-center gap-2 font-medium ${feel}`\n\n  return `inline-flex items-center justify-center gap-2 font-medium ${feel} active:scale-95`\n})\n\nconst radius = computed(() => {\n  if (variant === 'unstyled') return ''\n  if (variant === 'link') return 'rounded-xs'\n  return pill ? 'rounded-full' : 'rounded-card'\n})\n\n/** Anything that is not a `<button>` cannot be `disabled`; it has to be told. */\nconst inactive = computed(() => disabled || loading)\n\nconst linkProps = computed(() => {\n  if (as === 'router-link') return { to }\n  // The href is dropped rather than kept alongside aria-disabled: an anchor\n  // without one is not focusable and not activatable, which is the whole of\n  // what \"disabled\" means for a link.\n  if (as === 'a') return inactive.value ? {} : { href }\n  return {}\n})\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    v-bind=\"linkProps\"\n    :type=\"as === 'button' ? type : undefined\"\n    :disabled=\"as === 'button' ? inactive : undefined\"\n    :aria-disabled=\"as !== 'button' && inactive ? 'true' : undefined\"\n    :aria-busy=\"loading\"\n    :aria-pressed=\"pressed === undefined ? undefined : String(pressed)\"\n    class=\"focus-visible:outline-primary focus-visible:outline-2 focus-visible:outline-offset-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50\"\n    :class=\"[shell, surface, sizing, radius, block ? 'w-full' : '']\"\n  >\n    <span\n      v-if=\"loading\"\n      class=\"size-4 animate-spin rounded-full border-2 border-current border-t-transparent\"\n      aria-hidden=\"true\"\n    />\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, 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  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\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-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\n  if (hint) return hintId\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  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\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-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\n  if (hint) return hintId\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 FormField from './FormField.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  type = 'text',\n  labelHidden = false,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\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}>()\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 */\nconst model = defineModel<string | number | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\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=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border 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\">\nimport FormField from './FormField.vue'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  type = 'text',\n  labelHidden = false,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\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}>()\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 */\nconst model = defineModel<string | number | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\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=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border 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\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n  title,\n  subtitle = '',\n  closeLabel = 'Close',\n} = defineProps<{\n  title: string\n  subtitle?: string | undefined\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop rather than a translation: a component that calls t() forces every\n   * consumer onto one i18n setup, and this is the package's only visible string.\n   */\n  closeLabel?: string | undefined\n}>()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n  viewport.value\n    ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n    : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n  open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    setBackgroundInert(true)\n    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n    window.addEventListener('keydown', onKeydown)\n    await nextTick()\n    panel.value?.focus()\n  } else {\n    window.removeEventListener('keydown', onKeydown)\n    lastFocused?.focus()\n    lastFocused = null\n    setBackgroundInert(false)\n  }\n})\n\n/**\n * `inert` takes the whole app out of tab order and pointer events while the\n * sheet is open — a real focus trap without keydown bookkeeping.\n *\n * The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it\n * stays interactive.\n */\nfunction setBackgroundInert(isInert: boolean) {\n  document.getElementById('app')?.toggleAttribute('inert', isInert)\n}\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeydown)\n  // Unmounting while open would otherwise leave the whole app inert forever.\n  setBackgroundInert(false)\n})\n</script>\n\n<template>\n  <Teleport to=\"#sheet-root\">\n    <Transition name=\"sheet\">\n      <div\n        v-if=\"open\"\n        class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n        :style=\"viewportStyle\"\n      >\n        <div\n          class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n        >\n          <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n          <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n               the on-screen keyboard shrinks the sheet instead of pushing its\n               content out of reach. -->\n          <section\n            ref=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-label=\"title\"\n            tabindex=\"-1\"\n            class=\"sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none\"\n          >\n            <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n              <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n            </div>\n\n            <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n              <div class=\"min-w-0 flex-1\">\n                <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n                <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n                  {{ subtitle }}\n                </p>\n              </div>\n\n              <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n                   gains is the focus ring it never had: this was a raw\n                   `<button>` with no `focus-visible` rule, so closing a sheet\n                   from the keyboard was invisible. -->\n              <BaseButton\n                variant=\"unstyled\"\n                class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\"\n              >\n                <X class=\"size-5\" />\n              </BaseButton>\n            </header>\n\n            <div\n              class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n            >\n              <slot />\n            </div>\n          </section>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n  transition: opacity 200ms ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n  opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n   sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n  transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheet-enter-from .sheet-panel,\n  .sheet-leave-to .sheet-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport BaseButton from './BaseButton.vue'\nimport { computed, nextTick, onUnmounted, ref, watch } from 'vue'\nimport { X } from 'lucide-vue-next'\n\nimport { useVisualViewport } from '../composables/use-visual-viewport'\n\nconst open = defineModel<boolean>({ required: true })\nconst {\n  title,\n  subtitle = '',\n  closeLabel = 'Close',\n} = defineProps<{\n  title: string\n  subtitle?: string | undefined\n  /**\n   * Accessible name for the close button.\n   *\n   * A prop rather than a translation: a component that calls t() forces every\n   * consumer onto one i18n setup, and this is the package's only visible string.\n   */\n  closeLabel?: string | undefined\n}>()\n\nconst viewport = useVisualViewport()\n\n/**\n * Pins the sheet to the area the keyboard has left visible.\n *\n * Only needed where the layout viewport does not shrink on its own — iOS. On\n * Android the numbers already agree, so this is a no-op there rather than a\n * second, competing adjustment.\n */\nconst viewportStyle = computed(() =>\n  viewport.value\n    ? { height: `${viewport.value.height}px`, top: `${viewport.value.offsetTop}px` }\n    : undefined,\n)\n\nconst panel = ref<HTMLElement | null>(null)\nlet lastFocused: HTMLElement | null = null\n\nfunction close() {\n  open.value = false\n}\n\nfunction onKeydown(event: KeyboardEvent) {\n  if (event.key === 'Escape') close()\n}\n\nwatch(open, async (isOpen) => {\n  if (isOpen) {\n    setBackgroundInert(true)\n    lastFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null\n    window.addEventListener('keydown', onKeydown)\n    await nextTick()\n    panel.value?.focus()\n  } else {\n    window.removeEventListener('keydown', onKeydown)\n    lastFocused?.focus()\n    lastFocused = null\n    setBackgroundInert(false)\n  }\n})\n\n/**\n * `inert` takes the whole app out of tab order and pointer events while the\n * sheet is open — a real focus trap without keydown bookkeeping.\n *\n * The sheet itself is teleported to `#sheet-root`, a sibling of `#app`, so it\n * stays interactive.\n */\nfunction setBackgroundInert(isInert: boolean) {\n  document.getElementById('app')?.toggleAttribute('inert', isInert)\n}\n\nonUnmounted(() => {\n  window.removeEventListener('keydown', onKeydown)\n  // Unmounting while open would otherwise leave the whole app inert forever.\n  setBackgroundInert(false)\n})\n</script>\n\n<template>\n  <Teleport to=\"#sheet-root\">\n    <Transition name=\"sheet\">\n      <div\n        v-if=\"open\"\n        class=\"fixed inset-x-0 top-0 bottom-0 z-50 flex items-center justify-center\"\n        :style=\"viewportStyle\"\n      >\n        <div\n          class=\"shell-frame md:rounded-shell relative flex max-h-full flex-col justify-end overflow-hidden\"\n        >\n          <div class=\"bg-ink/45 absolute inset-0 backdrop-blur-[2px]\" @click=\"close\" />\n\n          <!-- Header and footer stay put; only the slot scrolls. Sized in dvh so\n               the on-screen keyboard shrinks the sheet instead of pushing its\n               content out of reach. -->\n          <section\n            ref=\"panel\"\n            role=\"dialog\"\n            aria-modal=\"true\"\n            :aria-label=\"title\"\n            tabindex=\"-1\"\n            class=\"sheet-panel bg-surface relative flex max-h-[94%] min-h-[56dvh] flex-col rounded-t-[28px] shadow-2xl outline-none\"\n          >\n            <div class=\"flex shrink-0 justify-center pt-3\" aria-hidden=\"true\">\n              <span class=\"bg-hair h-1.5 w-10 rounded-full\" />\n            </div>\n\n            <header class=\"flex shrink-0 items-start gap-3 px-6 pt-4 pb-5\">\n              <div class=\"min-w-0 flex-1\">\n                <h2 class=\"text-ink text-xl leading-tight font-semibold\">{{ title }}</h2>\n                <p v-if=\"subtitle\" class=\"text-ink-soft mt-1 text-sm leading-snug\">\n                  {{ subtitle }}\n                </p>\n              </div>\n\n              <!-- `unstyled`, so the sheet keeps the exact button it had. What it\n                   gains is the focus ring it never had: this was a raw\n                   `<button>` with no `focus-visible` rule, so closing a sheet\n                   from the keyboard was invisible. -->\n              <BaseButton\n                variant=\"unstyled\"\n                class=\"text-ink-soft hover:bg-muted hover:text-ink -mt-1 flex size-10 shrink-0 items-center justify-center rounded-full transition-colors active:scale-90\"\n                :aria-label=\"closeLabel\"\n                @click=\"close\"\n              >\n                <X class=\"size-5\" />\n              </BaseButton>\n            </header>\n\n            <div\n              class=\"min-h-0 flex-1 overflow-y-auto px-6 pb-[calc(2rem+env(safe-area-inset-bottom,0px))]\"\n            >\n              <slot />\n            </div>\n          </section>\n        </div>\n      </div>\n    </Transition>\n  </Teleport>\n</template>\n\n<style scoped>\n.sheet-enter-active,\n.sheet-leave-active {\n  transition: opacity 200ms ease;\n}\n.sheet-enter-from,\n.sheet-leave-to {\n  opacity: 0;\n}\n\n/* The panel travels further than the scrim fades, which is what makes the\n   sheet read as rising rather than appearing. */\n.sheet-enter-active .sheet-panel,\n.sheet-leave-active .sheet-panel {\n  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);\n}\n.sheet-enter-from .sheet-panel,\n.sheet-leave-to .sheet-panel {\n  transform: translateY(6%);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .sheet-enter-from .sheet-panel,\n  .sheet-leave-to .sheet-panel {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * A surface with a border, and optionally a head and a foot.\n *\n * Every app here had written this div. That is not a crisis on its own — it is\n * four classes — but it is four classes that were slightly different in each,\n * so a card on one screen had a heavier border than a card on the next and\n * nobody could say why.\n *\n * With no head and no foot there is no wrapper div: the padding lands on the\n * card itself and the card *is* the element. That matters more than a saved\n * node — most cards in the apps lay their contents out (`flex items-center\n * gap-4`, `flex flex-col gap-3`), and with a wrapper in the way those classes\n * reach the border and not the content, so the app has to add back the div\n * this component exists to remove. One that makes you do that is one you skip.\n *\n * `interactive` is for a card that is a link or a button: it adds the lift and\n * the press, and it is opt-in because a card holding a form should not move\n * when the pointer crosses it.\n */\nconst {\n  interactive = false,\n  as = 'div',\n  padding = 'md',\n} = defineProps<{\n  interactive?: boolean | undefined\n  as?: string | undefined\n  /**\n   * How much room the card gives its contents.\n   *\n   * This component shipped with `px-5 py-4` baked in and was then used by\n   * nobody, across three apps and thirty-five hand-written card surfaces —\n   * which used `p-3` six times, `p-4` six times, `p-5` five times and `p-1`\n   * four times, and not once the pair this insisted on. A card that fixes its\n   * padding cannot be reached for, which is the same mistake `PageContainer`\n   * made with its width and `size=\"sm\"` made with its height.\n   *\n   * `none` is for a card that holds a list: the rows own the padding, and the\n   * dividers have to reach the border.\n   */\n  padding?: 'none' | 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst BODY = {\n  none: '',\n  sm: 'p-3',\n  md: 'p-4',\n  lg: 'p-5',\n} as const\n\n/* The head and the foot follow the body, so a card cannot be tight around its\n   contents and loose around its title. */\nconst HEAD = {\n  none: '',\n  sm: 'px-3 py-2.5',\n  md: 'px-4 py-3',\n  lg: 'px-5 py-4',\n} as const\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"border-hair bg-surface rounded-card border\"\n    :class=\"[\n      interactive\n        ? 'transition-[transform,box-shadow] duration-300 ease-out hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 active:shadow-sm'\n        : '',\n      $slots.head || $slots.foot ? '' : BODY[padding],\n    ]\"\n  >\n    <div v-if=\"$slots.head\" class=\"border-hair/70 border-b\" :class=\"HEAD[padding]\">\n      <slot name=\"head\" />\n    </div>\n\n    <div v-if=\"$slots.head || $slots.foot\" :class=\"BODY[padding]\"><slot /></div>\n    <slot v-else />\n\n    <div v-if=\"$slots.foot\" class=\"border-hair/70 bg-muted/30 border-t\" :class=\"HEAD[padding]\">\n      <slot name=\"foot\" />\n    </div>\n  </component>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A surface with a border, and optionally a head and a foot.\n *\n * Every app here had written this div. That is not a crisis on its own — it is\n * four classes — but it is four classes that were slightly different in each,\n * so a card on one screen had a heavier border than a card on the next and\n * nobody could say why.\n *\n * With no head and no foot there is no wrapper div: the padding lands on the\n * card itself and the card *is* the element. That matters more than a saved\n * node — most cards in the apps lay their contents out (`flex items-center\n * gap-4`, `flex flex-col gap-3`), and with a wrapper in the way those classes\n * reach the border and not the content, so the app has to add back the div\n * this component exists to remove. One that makes you do that is one you skip.\n *\n * `interactive` is for a card that is a link or a button: it adds the lift and\n * the press, and it is opt-in because a card holding a form should not move\n * when the pointer crosses it.\n */\nconst {\n  interactive = false,\n  as = 'div',\n  padding = 'md',\n} = defineProps<{\n  interactive?: boolean | undefined\n  as?: string | undefined\n  /**\n   * How much room the card gives its contents.\n   *\n   * This component shipped with `px-5 py-4` baked in and was then used by\n   * nobody, across three apps and thirty-five hand-written card surfaces —\n   * which used `p-3` six times, `p-4` six times, `p-5` five times and `p-1`\n   * four times, and not once the pair this insisted on. A card that fixes its\n   * padding cannot be reached for, which is the same mistake `PageContainer`\n   * made with its width and `size=\"sm\"` made with its height.\n   *\n   * `none` is for a card that holds a list: the rows own the padding, and the\n   * dividers have to reach the border.\n   */\n  padding?: 'none' | 'sm' | 'md' | 'lg' | undefined\n}>()\n\nconst BODY = {\n  none: '',\n  sm: 'p-3',\n  md: 'p-4',\n  lg: 'p-5',\n} as const\n\n/* The head and the foot follow the body, so a card cannot be tight around its\n   contents and loose around its title. */\nconst HEAD = {\n  none: '',\n  sm: 'px-3 py-2.5',\n  md: 'px-4 py-3',\n  lg: 'px-5 py-4',\n} as const\n</script>\n\n<template>\n  <component\n    :is=\"as\"\n    class=\"border-hair bg-surface rounded-card border\"\n    :class=\"[\n      interactive\n        ? 'transition-[transform,box-shadow] duration-300 ease-out hover:-translate-y-0.5 hover:shadow-lg active:translate-y-0 active:shadow-sm'\n        : '',\n      $slots.head || $slots.foot ? '' : BODY[padding],\n    ]\"\n  >\n    <div v-if=\"$slots.head\" class=\"border-hair/70 border-b\" :class=\"HEAD[padding]\">\n      <slot name=\"head\" />\n    </div>\n\n    <div v-if=\"$slots.head || $slots.foot\" :class=\"BODY[padding]\"><slot /></div>\n    <slot v-else />\n\n    <div v-if=\"$slots.foot\" class=\"border-hair/70 bg-muted/30 border-t\" :class=\"HEAD[padding]\">\n      <slot name=\"foot\" />\n    </div>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A single checkbox, with its label beside it.\n *\n * Deliberately not built on `FormField`. That component stacks a label above\n * its control, which is right for every field where the control is a box you\n * type into and wrong here: a checkbox is read as one sentence with a mark in\n * front of it, and putting the words above the box breaks the association a\n * sighted reader makes before they get to the accessible name.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  disabled = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  disabled?: boolean | undefined\n  /**\n   * `md` is a setting: a line the reader came here to change, in ink.\n   * `sm` is an aside — \"remember me\" under a sign-in form, \"show the ones I\n   * have learned\" above a list — quieter and tighter.\n   *\n   * The two are not a guess. Of the five hand-written checkboxes across the\n   * three consuming apps, four were the aside and one was the setting, and\n   * they differed in exactly these two ways.\n   */\n  size?: 'sm' | 'md' | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1.5\">\n    <label\n      :for=\"id\"\n      class=\"flex items-center\"\n      :class=\"[size === 'sm' ? 'gap-2' : 'gap-3', disabled ? 'opacity-50' : 'cursor-pointer']\"\n    >\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"Boolean(error)\"\n        :aria-describedby=\"describedBy\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-sm\" :class=\"size === 'sm' ? 'text-ink-soft' : 'text-ink'\">\n        {{ label }}\n      </span>\n    </label>\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 single checkbox, with its label beside it.\n *\n * Deliberately not built on `FormField`. That component stacks a label above\n * its control, which is right for every field where the control is a box you\n * type into and wrong here: a checkbox is read as one sentence with a mark in\n * front of it, and putting the words above the box breaks the association a\n * sighted reader makes before they get to the accessible name.\n *\n * The whole row is the label, so the words are part of the hit target. On a\n * phone that is the difference between a control and a coin toss.\n */\nconst {\n  label,\n  error = '',\n  hint = '',\n  disabled = false,\n  size = 'md',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  disabled?: boolean | undefined\n  /**\n   * `md` is a setting: a line the reader came here to change, in ink.\n   * `sm` is an aside — \"remember me\" under a sign-in form, \"show the ones I\n   * have learned\" above a list — quieter and tighter.\n   *\n   * The two are not a guess. Of the five hand-written checkboxes across the\n   * three consuming apps, four were the aside and one was the setting, and\n   * they differed in exactly these two ways.\n   */\n  size?: 'sm' | 'md' | undefined\n}>()\n\nconst model = defineModel<boolean>({ default: false })\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <div class=\"flex flex-col gap-1.5\">\n    <label\n      :for=\"id\"\n      class=\"flex items-center\"\n      :class=\"[size === 'sm' ? 'gap-2' : 'gap-3', disabled ? 'opacity-50' : 'cursor-pointer']\"\n    >\n      <input\n        :id=\"id\"\n        v-model=\"model\"\n        type=\"checkbox\"\n        :disabled=\"disabled\"\n        :aria-invalid=\"Boolean(error)\"\n        :aria-describedby=\"describedBy\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-sm\" :class=\"size === 'sm' ? 'text-ink-soft' : 'text-ink'\">\n        {{ label }}\n      </span>\n    </label>\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 set of radios, and the reason there is no `BaseRadio`.\n *\n * One radio on its own is not a control — it is half of a choice that cannot\n * be unmade, and every real use is a group. So the group is the component.\n *\n * `fieldset` and `legend` rather than a label: a label points at one element,\n * and the thing being named here is the question, not any single answer. Left\n * as a plain label, a screen reader reads the options with no idea what they\n * are options for.\n */\nconst {\n  legend,\n  options,\n  error = '',\n  hint = '',\n  legendHidden = false,\n} = defineProps<{\n  legend: string\n  options: readonly { value: string; label: string; disabled?: boolean | undefined }[]\n  error?: string | undefined\n  hint?: string | undefined\n  legendHidden?: boolean | undefined\n}>()\n\nconst model = defineModel<string | undefined>()\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <fieldset class=\"flex flex-col gap-1.5\" :aria-describedby=\"describedBy\">\n    <legend class=\"text-ink mb-1.5 text-sm font-medium\" :class=\"legendHidden ? 'sr-only' : ''\">\n      {{ legend }}\n    </legend>\n\n    <label\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      class=\"flex items-center gap-3\"\n      :class=\"option.disabled ? 'opacity-50' : 'cursor-pointer'\"\n    >\n      <input\n        v-model=\"model\"\n        type=\"radio\"\n        :name=\"id\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-ink text-sm\">{{ option.label }}</span>\n    </label>\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  </fieldset>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, useId } from 'vue'\n\n/**\n * A set of radios, and the reason there is no `BaseRadio`.\n *\n * One radio on its own is not a control — it is half of a choice that cannot\n * be unmade, and every real use is a group. So the group is the component.\n *\n * `fieldset` and `legend` rather than a label: a label points at one element,\n * and the thing being named here is the question, not any single answer. Left\n * as a plain label, a screen reader reads the options with no idea what they\n * are options for.\n */\nconst {\n  legend,\n  options,\n  error = '',\n  hint = '',\n  legendHidden = false,\n} = defineProps<{\n  legend: string\n  options: readonly { value: string; label: string; disabled?: boolean | undefined }[]\n  error?: string | undefined\n  hint?: string | undefined\n  legendHidden?: boolean | undefined\n}>()\n\nconst model = defineModel<string | undefined>()\n\nconst id = useId()\nconst errorId = `${id}-error`\nconst hintId = `${id}-hint`\n\nconst describedBy = computed(() => {\n  if (error) return errorId\n  if (hint) return hintId\n  return undefined\n})\n</script>\n\n<template>\n  <fieldset class=\"flex flex-col gap-1.5\" :aria-describedby=\"describedBy\">\n    <legend class=\"text-ink mb-1.5 text-sm font-medium\" :class=\"legendHidden ? 'sr-only' : ''\">\n      {{ legend }}\n    </legend>\n\n    <label\n      v-for=\"option in options\"\n      :key=\"option.value\"\n      class=\"flex items-center gap-3\"\n      :class=\"option.disabled ? 'opacity-50' : 'cursor-pointer'\"\n    >\n      <input\n        v-model=\"model\"\n        type=\"radio\"\n        :name=\"id\"\n        :value=\"option.value\"\n        :disabled=\"option.disabled\"\n        class=\"accent-primary focus-visible:outline-primary size-4 shrink-0 focus-visible:outline-2 focus-visible:outline-offset-2\"\n      />\n      <span class=\"text-ink text-sm\">{{ option.label }}</span>\n    </label>\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  </fieldset>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { ChevronDown } from 'lucide-vue-next'\n\nimport FormField from './FormField.vue'\n\n/**\n * A native `<select>`, wearing the kit's field.\n *\n * Native on purpose. A custom listbox has to reimplement typeahead, the\n * keyboard, and the way a phone lifts the options into its own picker — and it\n * gets one of them wrong. What is worth replacing is the chrome, so the arrow\n * is drawn and the browser's own is removed.\n *\n * Options are passed rather than slotted so the label can be a translated\n * string the kit never sees.\n *\n * Generic over the value, because a select whose value must be a string makes\n * every consumer with numbered options write conversion glue on both sides of\n * it — and a component you have to wrap to use is one you write yourself\n * instead. A day of the month is a number.\n */\nconst {\n  label,\n  options,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  placeholder = '',\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  options: readonly { value: T; label: string; disabled?: boolean | undefined }[]\n  error?: string | undefined\n  hint?: string | undefined\n  labelHidden?: boolean | undefined\n  /**\n   * An unselectable first row, for a field with no sensible default.\n   *\n   * Disabled rather than merely empty: an empty option that can be chosen lets\n   * someone go back to having answered nothing, which no form wants.\n   */\n  placeholder?: string | undefined\n  /**\n   * `sm` for a select that filters or sorts rather than answers a form.\n   *\n   * Every hand-written select across the three consuming apps was this one.\n   */\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}>()\n\n/* The scale is typographic, not dimensional. Both sizes keep the 44px touch\n   target — of the five hand-written controls this replaces, none was shorter\n   than 40px and two were exactly 44, and a select that filters a list is\n   pressed with the same thumb as one that answers a form. What changes is the\n   type, and with it how loudly the field asks to be read. */\nconst SIZE_CLASS = {\n  sm: 'h-11 text-sm',\n  md: 'h-11 text-base',\n} as const\n\nconst model = defineModel<T | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <div class=\"relative\">\n        <select\n          :id=\"id\"\n          v-model=\"model\"\n          :aria-invalid=\"invalid\"\n          :aria-describedby=\"describedBy\"\n          class=\"w-full appearance-none\"\n          :class=\"[\n            variant === 'unstyled'\n              ? ''\n              : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n            variant === 'unstyled' ? '' : SIZE_CLASS[size],\n            variant !== 'unstyled' && invalid ? 'border-negative' : '',\n          ]\"\n        >\n          <option v-if=\"placeholder\" :value=\"undefined\" disabled>{{ placeholder }}</option>\n          <option\n            v-for=\"option in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled\"\n          >\n            {{ option.label }}\n          </option>\n        </select>\n\n        <ChevronDown\n          class=\"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n      </div>\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { ChevronDown } from 'lucide-vue-next'\n\nimport FormField from './FormField.vue'\n\n/**\n * A native `<select>`, wearing the kit's field.\n *\n * Native on purpose. A custom listbox has to reimplement typeahead, the\n * keyboard, and the way a phone lifts the options into its own picker — and it\n * gets one of them wrong. What is worth replacing is the chrome, so the arrow\n * is drawn and the browser's own is removed.\n *\n * Options are passed rather than slotted so the label can be a translated\n * string the kit never sees.\n *\n * Generic over the value, because a select whose value must be a string makes\n * every consumer with numbered options write conversion glue on both sides of\n * it — and a component you have to wrap to use is one you write yourself\n * instead. A day of the month is a number.\n */\nconst {\n  label,\n  options,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  placeholder = '',\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  options: readonly { value: T; label: string; disabled?: boolean | undefined }[]\n  error?: string | undefined\n  hint?: string | undefined\n  labelHidden?: boolean | undefined\n  /**\n   * An unselectable first row, for a field with no sensible default.\n   *\n   * Disabled rather than merely empty: an empty option that can be chosen lets\n   * someone go back to having answered nothing, which no form wants.\n   */\n  placeholder?: string | undefined\n  /**\n   * `sm` for a select that filters or sorts rather than answers a form.\n   *\n   * Every hand-written select across the three consuming apps was this one.\n   */\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}>()\n\n/* The scale is typographic, not dimensional. Both sizes keep the 44px touch\n   target — of the five hand-written controls this replaces, none was shorter\n   than 40px and two were exactly 44, and a select that filters a list is\n   pressed with the same thumb as one that answers a form. What changes is the\n   type, and with it how loudly the field asks to be read. */\nconst SIZE_CLASS = {\n  sm: 'h-11 text-sm',\n  md: 'h-11 text-base',\n} as const\n\nconst model = defineModel<T | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <div class=\"relative\">\n        <select\n          :id=\"id\"\n          v-model=\"model\"\n          :aria-invalid=\"invalid\"\n          :aria-describedby=\"describedBy\"\n          class=\"w-full appearance-none\"\n          :class=\"[\n            variant === 'unstyled'\n              ? ''\n              : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary border py-0 pr-10 pl-3 focus-visible:outline-2 focus-visible:outline-offset-1',\n            variant === 'unstyled' ? '' : SIZE_CLASS[size],\n            variant !== 'unstyled' && invalid ? 'border-negative' : '',\n          ]\"\n        >\n          <option v-if=\"placeholder\" :value=\"undefined\" disabled>{{ placeholder }}</option>\n          <option\n            v-for=\"option in options\"\n            :key=\"option.value\"\n            :value=\"option.value\"\n            :disabled=\"option.disabled\"\n          >\n            {{ option.label }}\n          </option>\n        </select>\n\n        <ChevronDown\n          class=\"text-ink-soft pointer-events-none absolute top-1/2 right-3 size-4 -translate-y-1/2\"\n          aria-hidden=\"true\"\n        />\n      </div>\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport FormField from './FormField.vue'\n\n/**\n * A multi-line field.\n *\n * `rows` rather than an auto-growing box: a textarea that resizes as it is\n * typed into moves everything below it, and in a form that means the button\n * the writer is heading for keeps sliding away. Growth is left to the browser's\n * own resize handle, which the writer controls.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  rows = 4,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  labelHidden?: boolean | undefined\n  rows?: number | undefined\n  /**\n   * `sm` tightens the label and the spacing. It does **not** shrink the text:\n   * iOS zooms the viewport when it focuses a field under 16px and never zooms\n   * back, which is why both phone apps force 16px on form elements in their\n   * base layer.\n   */\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}>()\n\nconst model = defineModel<string | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <textarea\n        :id=\"id\"\n        v-model=\"model\"\n        :rows=\"rows\"\n        :aria-invalid=\"invalid\"\n        :aria-describedby=\"describedBy\"\n        v-bind=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary resize-y border px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1',\n          'text-base',\n          variant !== 'unstyled' && invalid ? 'border-negative' : '',\n        ]\"\n      />\n    </template>\n  </FormField>\n</template>\n","<script setup lang=\"ts\">\nimport FormField from './FormField.vue'\n\n/**\n * A multi-line field.\n *\n * `rows` rather than an auto-growing box: a textarea that resizes as it is\n * typed into moves everything below it, and in a form that means the button\n * the writer is heading for keeps sliding away. Growth is left to the browser's\n * own resize handle, which the writer controls.\n */\ndefineOptions({ inheritAttrs: false })\n\nconst {\n  label,\n  error = '',\n  hint = '',\n  labelHidden = false,\n  rows = 4,\n  size = 'md',\n  variant = 'default',\n} = defineProps<{\n  label: string\n  error?: string | undefined\n  hint?: string | undefined\n  labelHidden?: boolean | undefined\n  rows?: number | undefined\n  /**\n   * `sm` tightens the label and the spacing. It does **not** shrink the text:\n   * iOS zooms the viewport when it focuses a field under 16px and never zooms\n   * back, which is why both phone apps force 16px on form elements in their\n   * base layer.\n   */\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}>()\n\nconst model = defineModel<string | undefined>()\n</script>\n\n<template>\n  <FormField :label=\"label\" :error=\"error\" :hint=\"hint\" :label-hidden=\"labelHidden\" :size=\"size\">\n    <template #default=\"{ id, describedBy, invalid }\">\n      <textarea\n        :id=\"id\"\n        v-model=\"model\"\n        :rows=\"rows\"\n        :aria-invalid=\"invalid\"\n        :aria-describedby=\"describedBy\"\n        v-bind=\"$attrs\"\n        :class=\"[\n          variant === 'unstyled'\n            ? ''\n            : 'border-hair bg-surface text-ink rounded-card focus-visible:outline-primary resize-y border px-3 py-2 leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-1',\n          'text-base',\n          variant !== 'unstyled' && invalid ? 'border-negative' : '',\n        ]\"\n      />\n    </template>\n  </FormField>\n</template>\n","<script lang=\"ts\" setup>\nconst { title, description = '' } = defineProps<{\n  title: string\n  description?: string | undefined\n}>()\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center gap-3 px-6 py-10 text-center\">\n    <div\n      v-if=\"$slots.icon\"\n      class=\"bg-muted text-primary rounded-card flex size-12 items-center justify-center\"\n    >\n      <slot name=\"icon\" />\n    </div>\n\n    <h3 class=\"text-ink text-base font-semibold\">{{ title }}</h3>\n    <p v-if=\"description\" class=\"text-ink-soft max-w-[36ch] text-sm\">\n      {{ description }}\n    </p>\n\n    <div v-if=\"$slots.action\" class=\"mt-2 flex w-full flex-col gap-2\">\n      <slot name=\"action\" />\n    </div>\n  </div>\n</template>\n\n<style></style>\n","<script lang=\"ts\" setup>\nconst { title, description = '' } = defineProps<{\n  title: string\n  description?: string | undefined\n}>()\n</script>\n\n<template>\n  <div class=\"flex flex-col items-center gap-3 px-6 py-10 text-center\">\n    <div\n      v-if=\"$slots.icon\"\n      class=\"bg-muted text-primary rounded-card flex size-12 items-center justify-center\"\n    >\n      <slot name=\"icon\" />\n    </div>\n\n    <h3 class=\"text-ink text-base font-semibold\">{{ title }}</h3>\n    <p v-if=\"description\" class=\"text-ink-soft max-w-[36ch] text-sm\">\n      {{ description }}\n    </p>\n\n    <div v-if=\"$slots.action\" class=\"mt-2 flex w-full flex-col gap-2\">\n      <slot name=\"action\" />\n    </div>\n  </div>\n</template>\n\n<style></style>\n","<script setup lang=\"ts\">\nimport { onErrorCaptured, ref, watch } from 'vue'\n\n/**\n * Keeps one broken screen from taking the whole app down.\n *\n * An error thrown while a component renders unmounts the tree above it, and a\n * single-page app has nothing underneath — the tab goes white and whoever was\n * using it loses what they were in the middle of.\n *\n * What it does *not* do is decide what that looks like. All three apps in this\n * workshop had written this component, and the parts they had in common were\n * the mechanism — catch, report, reset when the route changes — while the\n * parts that differed were the ones that should: an icon, a sentence, a way\n * back. So the fallback is a slot, and the kit stays out of the wording.\n *\n * Only errors thrown while rendering a descendant reach `onErrorCaptured`.\n * Rejected promises and failed queries do not, and should not: those belong to\n * the code that owns the request.\n *\n * @example\n * ```vue\n * <ErrorBoundary :resetKey=\"route.fullPath\" @error=\"reportError\">\n *   <template #fallback=\"{ reset }\">\n *     <EmptyState :title=\"t('error.title')\">\n *       <BaseButton @click=\"reset\">{{ t('error.retry') }}</BaseButton>\n *     </EmptyState>\n *   </template>\n *   <RouterView />\n * </ErrorBoundary>\n * ```\n */\nconst { resetKey } = defineProps<{\n  /**\n   * Clears the error whenever it changes — a route path, usually.\n   *\n   * An error on one screen should not follow somebody to the next one, and\n   * without this the boundary stays broken until a full reload.\n   */\n  resetKey?: string | number | undefined\n}>()\n\nconst emit = defineEmits<{ error: [cause: unknown] }>()\n\nconst failed = ref<unknown>(null)\n\nfunction reset() {\n  failed.value = null\n}\n\nonErrorCaptured((cause) => {\n  failed.value = cause\n  emit('error', cause)\n\n  // Swallowed on purpose: the fallback is now showing, and letting it travel\n  // further up would unmount the boundary along with everything else.\n  return false\n})\n\nwatch(\n  () => resetKey,\n  () => reset(),\n)\n</script>\n\n<template>\n  <slot v-if=\"failed\" name=\"fallback\" :error=\"failed\" :reset=\"reset\" />\n  <slot v-else />\n</template>\n","<script setup lang=\"ts\">\nimport { onErrorCaptured, ref, watch } from 'vue'\n\n/**\n * Keeps one broken screen from taking the whole app down.\n *\n * An error thrown while a component renders unmounts the tree above it, and a\n * single-page app has nothing underneath — the tab goes white and whoever was\n * using it loses what they were in the middle of.\n *\n * What it does *not* do is decide what that looks like. All three apps in this\n * workshop had written this component, and the parts they had in common were\n * the mechanism — catch, report, reset when the route changes — while the\n * parts that differed were the ones that should: an icon, a sentence, a way\n * back. So the fallback is a slot, and the kit stays out of the wording.\n *\n * Only errors thrown while rendering a descendant reach `onErrorCaptured`.\n * Rejected promises and failed queries do not, and should not: those belong to\n * the code that owns the request.\n *\n * @example\n * ```vue\n * <ErrorBoundary :resetKey=\"route.fullPath\" @error=\"reportError\">\n *   <template #fallback=\"{ reset }\">\n *     <EmptyState :title=\"t('error.title')\">\n *       <BaseButton @click=\"reset\">{{ t('error.retry') }}</BaseButton>\n *     </EmptyState>\n *   </template>\n *   <RouterView />\n * </ErrorBoundary>\n * ```\n */\nconst { resetKey } = defineProps<{\n  /**\n   * Clears the error whenever it changes — a route path, usually.\n   *\n   * An error on one screen should not follow somebody to the next one, and\n   * without this the boundary stays broken until a full reload.\n   */\n  resetKey?: string | number | undefined\n}>()\n\nconst emit = defineEmits<{ error: [cause: unknown] }>()\n\nconst failed = ref<unknown>(null)\n\nfunction reset() {\n  failed.value = null\n}\n\nonErrorCaptured((cause) => {\n  failed.value = cause\n  emit('error', cause)\n\n  // Swallowed on purpose: the fallback is now showing, and letting it travel\n  // further up would unmount the boundary along with everything else.\n  return false\n})\n\nwatch(\n  () => resetKey,\n  () => reset(),\n)\n</script>\n\n<template>\n  <slot v-if=\"failed\" name=\"fallback\" :error=\"failed\" :reset=\"reset\" />\n  <slot v-else />\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One measure, centred, with the page's gutters.\n *\n * The first thing a desktop app needs and the last thing a kit built for\n * phones thinks to provide — a 430 px shell has no use for a maximum width, so\n * this was missing, and the consuming app wrote `max-w-[1200px] mx-auto px-6`\n * into every layout instead. Written once it costs nothing; written eleven\n * times it is eleven chances for one page to be forty pixels narrower than the\n * rest, which is the kind of thing nobody can name and everybody can see.\n *\n * Two widths rather than one, because a page and a passage are different\n * problems: `wide` is the page, `reading` is a column of prose at the width\n * type wants to be read at. Both come from tokens, so an app that measures its\n * page at 1120 rather than 1200 can still use this.\n */\nconst { width = 'wide', as = 'div' } = defineProps<{\n  /** `wide` for a page, `reading` for prose, `full` to opt out. */\n  width?: 'wide' | 'reading' | 'full' | undefined\n  /** The element to render. `main`, `section` and `article` all belong here. */\n  as?: string | undefined\n}>()\n\n/**\n * From tokens, not from literals.\n *\n * A width is a role the same way a colour is, and baking one in makes the\n * component unusable by any app that measured its own page differently — which\n * the first consumer had, deliberately. Override `--measure-page` and\n * `--measure-reading` in the app's `@theme` and every container follows.\n */\nconst WIDTHS = {\n  wide: 'var(--measure-page)',\n  reading: 'var(--measure-reading)',\n  full: 'none',\n} as const\n\nconst measure = computed(() => WIDTHS[width])\n</script>\n\n<template>\n  <component :is=\"as\" class=\"mx-auto w-full px-5 sm:px-8\" :style=\"{ maxWidth: measure }\">\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One measure, centred, with the page's gutters.\n *\n * The first thing a desktop app needs and the last thing a kit built for\n * phones thinks to provide — a 430 px shell has no use for a maximum width, so\n * this was missing, and the consuming app wrote `max-w-[1200px] mx-auto px-6`\n * into every layout instead. Written once it costs nothing; written eleven\n * times it is eleven chances for one page to be forty pixels narrower than the\n * rest, which is the kind of thing nobody can name and everybody can see.\n *\n * Two widths rather than one, because a page and a passage are different\n * problems: `wide` is the page, `reading` is a column of prose at the width\n * type wants to be read at. Both come from tokens, so an app that measures its\n * page at 1120 rather than 1200 can still use this.\n */\nconst { width = 'wide', as = 'div' } = defineProps<{\n  /** `wide` for a page, `reading` for prose, `full` to opt out. */\n  width?: 'wide' | 'reading' | 'full' | undefined\n  /** The element to render. `main`, `section` and `article` all belong here. */\n  as?: string | undefined\n}>()\n\n/**\n * From tokens, not from literals.\n *\n * A width is a role the same way a colour is, and baking one in makes the\n * component unusable by any app that measured its own page differently — which\n * the first consumer had, deliberately. Override `--measure-page` and\n * `--measure-reading` in the app's `@theme` and every container follows.\n */\nconst WIDTHS = {\n  wide: 'var(--measure-page)',\n  reading: 'var(--measure-reading)',\n  full: 'none',\n} as const\n\nconst measure = computed(() => WIDTHS[width])\n</script>\n\n<template>\n  <component :is=\"as\" class=\"mx-auto w-full px-5 sm:px-8\" :style=\"{ maxWidth: measure }\">\n    <slot />\n  </component>\n</template>\n","<script setup lang=\"ts\">\nconst { title } = defineProps<{ title: string }>()\n</script>\n\n<template>\n  <header class=\"grid h-12 shrink-0 grid-cols-[2.5rem_1fr_2.5rem] items-center\">\n    <div class=\"justify-self-start\"><slot name=\"left\" /></div>\n\n    <h1 class=\"text-ink flex min-w-0 justify-center text-base font-semibold tabular-nums\">\n      <slot name=\"title\">\n        <span class=\"truncate\">{{ title }}</span>\n      </slot>\n    </h1>\n\n    <div class=\"justify-self-end\"><slot name=\"right\" /></div>\n  </header>\n</template>\n","<script setup lang=\"ts\">\nconst { title } = defineProps<{ title: string }>()\n</script>\n\n<template>\n  <header class=\"grid h-12 shrink-0 grid-cols-[2.5rem_1fr_2.5rem] items-center\">\n    <div class=\"justify-self-start\"><slot name=\"left\" /></div>\n\n    <h1 class=\"text-ink flex min-w-0 justify-center text-base font-semibold tabular-nums\">\n      <slot name=\"title\">\n        <span class=\"truncate\">{{ title }}</span>\n      </slot>\n    </h1>\n\n    <div class=\"justify-self-end\"><slot name=\"right\" /></div>\n  </header>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * How far through something somebody is.\n *\n * Clamped rather than trusted. A progress bar is always fed a computed number,\n * and computed numbers arrive as 101, as -0, and as NaN when the denominator\n * is zero — which is the ordinary state of a course nobody has started. Any of\n * those renders a bar that runs past its own track, and it is the sort of\n * thing that ships because the happy path was the only one anybody looked at.\n */\nconst {\n  value,\n  max = 100,\n  label,\n  size = 'md',\n} = defineProps<{\n  value: number\n  max?: number | undefined\n  /**\n   * How thick the track is. `sm` for a bar under a step counter, where it is a\n   * hint rather than the subject; `lg` where the progress is the point.\n   *\n   * It shipped at one thickness and the two bars anybody wanted were `h-1`.\n   */\n  size?: 'sm' | 'md' | 'lg' | undefined\n  /** For screen readers. Without it this is a rectangle that means nothing. */\n  label?: string | undefined\n}>()\n\nconst TRACK = {\n  sm: 'h-1',\n  md: 'h-1.5',\n  lg: 'h-2',\n} as const\n\nconst portion = computed(() => {\n  if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0\n\n  return Math.min(100, Math.max(0, (value / max) * 100))\n})\n</script>\n\n<template>\n  <div\n    class=\"bg-muted w-full overflow-hidden rounded-full\"\n    :class=\"TRACK[size]\"\n    role=\"progressbar\"\n    :aria-valuenow=\"Math.round(portion)\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    :aria-label=\"label\"\n  >\n    <div\n      class=\"bg-primary h-full rounded-full transition-[width] duration-700 ease-out\"\n      :style=\"{ width: `${portion}%` }\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * How far through something somebody is.\n *\n * Clamped rather than trusted. A progress bar is always fed a computed number,\n * and computed numbers arrive as 101, as -0, and as NaN when the denominator\n * is zero — which is the ordinary state of a course nobody has started. Any of\n * those renders a bar that runs past its own track, and it is the sort of\n * thing that ships because the happy path was the only one anybody looked at.\n */\nconst {\n  value,\n  max = 100,\n  label,\n  size = 'md',\n} = defineProps<{\n  value: number\n  max?: number | undefined\n  /**\n   * How thick the track is. `sm` for a bar under a step counter, where it is a\n   * hint rather than the subject; `lg` where the progress is the point.\n   *\n   * It shipped at one thickness and the two bars anybody wanted were `h-1`.\n   */\n  size?: 'sm' | 'md' | 'lg' | undefined\n  /** For screen readers. Without it this is a rectangle that means nothing. */\n  label?: string | undefined\n}>()\n\nconst TRACK = {\n  sm: 'h-1',\n  md: 'h-1.5',\n  lg: 'h-2',\n} as const\n\nconst portion = computed(() => {\n  if (!Number.isFinite(value) || !Number.isFinite(max) || max <= 0) return 0\n\n  return Math.min(100, Math.max(0, (value / max) * 100))\n})\n</script>\n\n<template>\n  <div\n    class=\"bg-muted w-full overflow-hidden rounded-full\"\n    :class=\"TRACK[size]\"\n    role=\"progressbar\"\n    :aria-valuenow=\"Math.round(portion)\"\n    aria-valuemin=\"0\"\n    aria-valuemax=\"100\"\n    :aria-label=\"label\"\n  >\n    <div\n      class=\"bg-primary h-full rounded-full transition-[width] duration-700 ease-out\"\n      :style=\"{ width: `${portion}%` }\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One plan in a pricing table.\n *\n * Every string arrives as a prop. A component in a kit that reaches for its\n * consumer's translations is not shared, it is one app's furniture parked\n * somewhere else — and the second app to want it would have to fork it.\n *\n * The tone is semantic rather than named after a colour. \"Gold\" and \"diamond\"\n * are one product's tiers; `warm` and `cool` are what a pricing table actually\n * needs, which is for three columns to be distinguishable at a glance without\n * any of them shouting. A table where every column is a different hue reads as\n * three products from three companies.\n */\nconst {\n  name,\n  lead,\n  price,\n  period,\n  note,\n  features,\n  tone = 'neutral',\n  badge,\n  chip,\n  recommended = false,\n} = defineProps<{\n  name: string\n  lead?: string | undefined\n  /** Already formatted, or whatever stands in while there is no price. */\n  price: string\n  period?: string | undefined\n  note?: string | undefined\n  features: readonly string[]\n  tone?: 'neutral' | 'warm' | 'cool' | undefined\n  /** Rides on the card's edge, e.g. \"Recommended\". */\n  badge?: string | undefined\n  /** Sits inside, e.g. \"30% cheaper\" or \"Your plan\". */\n  chip?: string | undefined\n  /** Raises the card and lets the badge show. */\n  recommended?: boolean | undefined\n}>()\n\nconst TONE = {\n  neutral: {\n    ring: 'border-hair/70',\n    soft: 'bg-muted text-ink-soft',\n    icon: 'bg-primary/10 text-primary',\n  },\n  warm: {\n    ring: 'border-[color-mix(in_oklab,#b8862c_35%,transparent)]',\n    soft: 'bg-[color-mix(in_oklab,#b8862c_14%,transparent)] text-[#8a6318] dark:text-[#d9ad5c]',\n    icon: 'bg-[color-mix(in_oklab,#b8862c_16%,transparent)] text-[#8a6318] dark:text-[#d9ad5c]',\n  },\n  cool: {\n    ring: 'border-[color-mix(in_oklab,#4a86a8_38%,transparent)]',\n    soft: 'bg-[color-mix(in_oklab,#4a86a8_14%,transparent)] text-[#2f6079] dark:text-[#8fc6de]',\n    icon: 'bg-[color-mix(in_oklab,#4a86a8_16%,transparent)] text-[#2f6079] dark:text-[#8fc6de]',\n  },\n} as const\n\nconst palette = computed(() => TONE[tone])\n</script>\n\n<template>\n  <article\n    class=\"bg-surface rounded-card relative flex h-full flex-col border p-7 shadow-[var(--shadow-card)] transition-[border-color,box-shadow,transform] duration-[420ms] hover:border-[color-mix(in_oklab,var(--color-primary)_60%,transparent)] hover:shadow-[var(--shadow-lift)] sm:p-8\"\n    :class=\"[palette.ring, recommended ? 'shadow-[var(--shadow-lift)]' : 'hover:-translate-y-0.5']\"\n  >\n    <!-- On the edge rather than inside, so it cannot be mistaken for one of\n         the plan's own features. -->\n    <span\n      v-if=\"badge && recommended\"\n      class=\"bg-primary rounded-cell absolute -top-3 left-7 px-3 py-1 text-[0.7rem] font-semibold text-white\"\n    >\n      {{ badge }}\n    </span>\n\n    <div class=\"flex items-start justify-between gap-4\">\n      <span\n        v-if=\"$slots.icon\"\n        class=\"rounded-card grid size-11 place-items-center text-xl\"\n        :class=\"palette.icon\"\n      >\n        <slot name=\"icon\" />\n      </span>\n\n      <span\n        v-if=\"chip\"\n        class=\"rounded-cell ml-auto px-2.5 py-1 text-[0.7rem] font-medium\"\n        :class=\"palette.soft\"\n      >\n        {{ chip }}\n      </span>\n    </div>\n\n    <h3 class=\"text-ink mt-5 text-lg font-semibold\">{{ name }}</h3>\n    <p v-if=\"lead\" class=\"text-ink-soft mt-1.5 text-sm leading-relaxed\">{{ lead }}</p>\n\n    <p class=\"mt-6 flex items-baseline gap-1.5\">\n      <span class=\"text-ink text-3xl font-semibold tracking-tight tabular-nums\">{{ price }}</span>\n      <span v-if=\"period\" class=\"text-ink-soft text-sm\">{{ period }}</span>\n    </p>\n    <p v-if=\"note\" class=\"text-ink-soft mt-1 text-xs\">{{ note }}</p>\n\n    <ul class=\"mt-7 flex-1 space-y-3\">\n      <li v-for=\"feature in features\" :key=\"feature\" class=\"flex gap-3 text-sm\">\n        <!-- The marker is a slot because a pricing table often uses it to say\n             something the tone cannot: on the tier you already have, these are\n             things you hold rather than things you would get. A consumer that\n             had drawn that distinction should not have to give it up to reach\n             for this component. -->\n        <span v-if=\"$slots.bullet\" class=\"mt-[0.45rem] shrink-0\"><slot name=\"bullet\" /></span>\n        <span\n          v-else\n          class=\"bg-primary/45 mt-[0.45rem] size-1.5 shrink-0 rounded-full\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"text-ink-soft leading-relaxed\">{{ feature }}</span>\n      </li>\n    </ul>\n\n    <div v-if=\"$slots.action\" class=\"mt-8\"><slot name=\"action\" /></div>\n  </article>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\n/**\n * One plan in a pricing table.\n *\n * Every string arrives as a prop. A component in a kit that reaches for its\n * consumer's translations is not shared, it is one app's furniture parked\n * somewhere else — and the second app to want it would have to fork it.\n *\n * The tone is semantic rather than named after a colour. \"Gold\" and \"diamond\"\n * are one product's tiers; `warm` and `cool` are what a pricing table actually\n * needs, which is for three columns to be distinguishable at a glance without\n * any of them shouting. A table where every column is a different hue reads as\n * three products from three companies.\n */\nconst {\n  name,\n  lead,\n  price,\n  period,\n  note,\n  features,\n  tone = 'neutral',\n  badge,\n  chip,\n  recommended = false,\n} = defineProps<{\n  name: string\n  lead?: string | undefined\n  /** Already formatted, or whatever stands in while there is no price. */\n  price: string\n  period?: string | undefined\n  note?: string | undefined\n  features: readonly string[]\n  tone?: 'neutral' | 'warm' | 'cool' | undefined\n  /** Rides on the card's edge, e.g. \"Recommended\". */\n  badge?: string | undefined\n  /** Sits inside, e.g. \"30% cheaper\" or \"Your plan\". */\n  chip?: string | undefined\n  /** Raises the card and lets the badge show. */\n  recommended?: boolean | undefined\n}>()\n\nconst TONE = {\n  neutral: {\n    ring: 'border-hair/70',\n    soft: 'bg-muted text-ink-soft',\n    icon: 'bg-primary/10 text-primary',\n  },\n  warm: {\n    ring: 'border-[color-mix(in_oklab,#b8862c_35%,transparent)]',\n    soft: 'bg-[color-mix(in_oklab,#b8862c_14%,transparent)] text-[#8a6318] dark:text-[#d9ad5c]',\n    icon: 'bg-[color-mix(in_oklab,#b8862c_16%,transparent)] text-[#8a6318] dark:text-[#d9ad5c]',\n  },\n  cool: {\n    ring: 'border-[color-mix(in_oklab,#4a86a8_38%,transparent)]',\n    soft: 'bg-[color-mix(in_oklab,#4a86a8_14%,transparent)] text-[#2f6079] dark:text-[#8fc6de]',\n    icon: 'bg-[color-mix(in_oklab,#4a86a8_16%,transparent)] text-[#2f6079] dark:text-[#8fc6de]',\n  },\n} as const\n\nconst palette = computed(() => TONE[tone])\n</script>\n\n<template>\n  <article\n    class=\"bg-surface rounded-card relative flex h-full flex-col border p-7 shadow-[var(--shadow-card)] transition-[border-color,box-shadow,transform] duration-[420ms] hover:border-[color-mix(in_oklab,var(--color-primary)_60%,transparent)] hover:shadow-[var(--shadow-lift)] sm:p-8\"\n    :class=\"[palette.ring, recommended ? 'shadow-[var(--shadow-lift)]' : 'hover:-translate-y-0.5']\"\n  >\n    <!-- On the edge rather than inside, so it cannot be mistaken for one of\n         the plan's own features. -->\n    <span\n      v-if=\"badge && recommended\"\n      class=\"bg-primary rounded-cell absolute -top-3 left-7 px-3 py-1 text-[0.7rem] font-semibold text-white\"\n    >\n      {{ badge }}\n    </span>\n\n    <div class=\"flex items-start justify-between gap-4\">\n      <span\n        v-if=\"$slots.icon\"\n        class=\"rounded-card grid size-11 place-items-center text-xl\"\n        :class=\"palette.icon\"\n      >\n        <slot name=\"icon\" />\n      </span>\n\n      <span\n        v-if=\"chip\"\n        class=\"rounded-cell ml-auto px-2.5 py-1 text-[0.7rem] font-medium\"\n        :class=\"palette.soft\"\n      >\n        {{ chip }}\n      </span>\n    </div>\n\n    <h3 class=\"text-ink mt-5 text-lg font-semibold\">{{ name }}</h3>\n    <p v-if=\"lead\" class=\"text-ink-soft mt-1.5 text-sm leading-relaxed\">{{ lead }}</p>\n\n    <p class=\"mt-6 flex items-baseline gap-1.5\">\n      <span class=\"text-ink text-3xl font-semibold tracking-tight tabular-nums\">{{ price }}</span>\n      <span v-if=\"period\" class=\"text-ink-soft text-sm\">{{ period }}</span>\n    </p>\n    <p v-if=\"note\" class=\"text-ink-soft mt-1 text-xs\">{{ note }}</p>\n\n    <ul class=\"mt-7 flex-1 space-y-3\">\n      <li v-for=\"feature in features\" :key=\"feature\" class=\"flex gap-3 text-sm\">\n        <!-- The marker is a slot because a pricing table often uses it to say\n             something the tone cannot: on the tier you already have, these are\n             things you hold rather than things you would get. A consumer that\n             had drawn that distinction should not have to give it up to reach\n             for this component. -->\n        <span v-if=\"$slots.bullet\" class=\"mt-[0.45rem] shrink-0\"><slot name=\"bullet\" /></span>\n        <span\n          v-else\n          class=\"bg-primary/45 mt-[0.45rem] size-1.5 shrink-0 rounded-full\"\n          aria-hidden=\"true\"\n        />\n        <span class=\"text-ink-soft leading-relaxed\">{{ feature }}</span>\n      </li>\n    </ul>\n\n    <div v-if=\"$slots.action\" class=\"mt-8\"><slot name=\"action\" /></div>\n  </article>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A small coloured dot, optionally labelled.\n *\n * Takes the colour as a class rather than a category, so an app can key it off\n * whatever its own domain calls a category — habit kinds, expense types,\n * priorities — without this component knowing about any of them.\n */\nconst { fill, label = '' } = defineProps<{\n  /** Background utility for the dot, e.g. `bg-positive`. */\n  fill: string\n  /** Optional text after the dot. Omit for a bare marker. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <span class=\"inline-flex items-center gap-1.5\">\n    <span class=\"size-2 rounded-full\" :class=\"fill\" />\n    <span v-if=\"label\" class=\"text-ink-soft text-xs font-medium\">{{ label }}</span>\n  </span>\n</template>\n","<script setup lang=\"ts\">\n/**\n * A small coloured dot, optionally labelled.\n *\n * Takes the colour as a class rather than a category, so an app can key it off\n * whatever its own domain calls a category — habit kinds, expense types,\n * priorities — without this component knowing about any of them.\n */\nconst { fill, label = '' } = defineProps<{\n  /** Background utility for the dot, e.g. `bg-positive`. */\n  fill: string\n  /** Optional text after the dot. Omit for a bare marker. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <span class=\"inline-flex items-center gap-1.5\">\n    <span class=\"size-2 rounded-full\" :class=\"fill\" />\n    <span v-if=\"label\" class=\"text-ink-soft text-xs font-medium\">{{ label }}</span>\n  </span>\n</template>\n","<script setup lang=\"ts\">\nimport ToneDot from './ToneDot.vue'\n\n/** The three classes a category needs to colour a heading. */\nexport interface Tone {\n  /** Solid background for the dot, e.g. `bg-positive`. */\n  fill: string\n  /** Tinted surface for the pill, e.g. `bg-positive/5 border-positive/25`. */\n  card: string\n  /** Foreground that pairs with the surface, e.g. `text-positive`. */\n  text: string\n}\n\n/**\n * A pill heading for a group of things.\n *\n * The tone arrives as three class strings rather than a category name: Tailwind\n * reads source files as plain text, so a class assembled at runtime never\n * reaches the stylesheet — the app has to write them out, and it is the app\n * that knows its own categories anyway.\n */\nconst {\n  tone,\n  label,\n  count = 0,\n} = defineProps<{\n  tone: Tone\n  label: string\n  /** Hidden when zero, so an empty group's heading stays quiet. */\n  count?: number | undefined\n}>()\n</script>\n\n<template>\n  <h2 class=\"flex items-center gap-2 self-start rounded-full border px-3 py-1\" :class=\"tone.card\">\n    <ToneDot :fill=\"tone.fill\" />\n    <span class=\"text-xs font-semibold tracking-wide uppercase\" :class=\"tone.text\">\n      {{ label }}\n    </span>\n    <span v-if=\"count > 0\" class=\"text-ink-soft text-xs tabular-nums\">{{ count }}</span>\n  </h2>\n</template>\n","<script setup lang=\"ts\">\nimport ToneDot from './ToneDot.vue'\n\n/** The three classes a category needs to colour a heading. */\nexport interface Tone {\n  /** Solid background for the dot, e.g. `bg-positive`. */\n  fill: string\n  /** Tinted surface for the pill, e.g. `bg-positive/5 border-positive/25`. */\n  card: string\n  /** Foreground that pairs with the surface, e.g. `text-positive`. */\n  text: string\n}\n\n/**\n * A pill heading for a group of things.\n *\n * The tone arrives as three class strings rather than a category name: Tailwind\n * reads source files as plain text, so a class assembled at runtime never\n * reaches the stylesheet — the app has to write them out, and it is the app\n * that knows its own categories anyway.\n */\nconst {\n  tone,\n  label,\n  count = 0,\n} = defineProps<{\n  tone: Tone\n  label: string\n  /** Hidden when zero, so an empty group's heading stays quiet. */\n  count?: number | undefined\n}>()\n</script>\n\n<template>\n  <h2 class=\"flex items-center gap-2 self-start rounded-full border px-3 py-1\" :class=\"tone.card\">\n    <ToneDot :fill=\"tone.fill\" />\n    <span class=\"text-xs font-semibold tracking-wide uppercase\" :class=\"tone.text\">\n      {{ label }}\n    </span>\n    <span v-if=\"count > 0\" class=\"text-ink-soft text-xs tabular-nums\">{{ count }}</span>\n  </h2>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { useId } from 'vue'\n\n/**\n * A row of mutually exclusive choices.\n *\n * Radio inputs rather than buttons: it is a single choice out of a small set,\n * so arrow-key navigation and the \"one of N selected\" announcement come free.\n */\nconst { options } = defineProps<{\n  options: readonly { value: T; label: string }[]\n}>()\n\nconst model = defineModel<T>({ required: true })\n\nconst name = useId()\n</script>\n\n<template>\n  <div class=\"bg-muted rounded-card flex w-full gap-1 p-1\">\n    <label v-for=\"option in options\" :key=\"String(option.value)\" class=\"flex-1 cursor-pointer\">\n      <input v-model=\"model\" type=\"radio\" :value=\"option.value\" :name=\"name\" class=\"sr-only\" />\n      <span\n        class=\"flex h-10 items-center justify-center rounded-xl px-2 text-sm font-medium transition-colors select-none\"\n        :class=\"model === option.value ? 'bg-surface text-ink shadow-sm' : 'text-ink-soft'\"\n      >\n        {{ option.label }}\n      </span>\n    </label>\n  </div>\n</template>\n","<script setup lang=\"ts\" generic=\"T extends string | number\">\nimport { useId } from 'vue'\n\n/**\n * A row of mutually exclusive choices.\n *\n * Radio inputs rather than buttons: it is a single choice out of a small set,\n * so arrow-key navigation and the \"one of N selected\" announcement come free.\n */\nconst { options } = defineProps<{\n  options: readonly { value: T; label: string }[]\n}>()\n\nconst model = defineModel<T>({ required: true })\n\nconst name = useId()\n</script>\n\n<template>\n  <div class=\"bg-muted rounded-card flex w-full gap-1 p-1\">\n    <label v-for=\"option in options\" :key=\"String(option.value)\" class=\"flex-1 cursor-pointer\">\n      <input v-model=\"model\" type=\"radio\" :value=\"option.value\" :name=\"name\" class=\"sr-only\" />\n      <span\n        class=\"flex h-10 items-center justify-center rounded-xl px-2 text-sm font-medium transition-colors select-none\"\n        :class=\"model === option.value ? 'bg-surface text-ink shadow-sm' : 'text-ink-soft'\"\n      >\n        {{ option.label }}\n      </span>\n    </label>\n  </div>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{ title: string }>()\n</script>\n\n<template>\n  <section class=\"flex flex-col gap-2\">\n    <h2 class=\"text-ink-soft px-1 text-xs font-semibold tracking-wide uppercase\">{{ title }}</h2>\n\n    <!-- One card per group, rows divided by hairlines. Loose fields floating on\n         the page gave no sense of what belonged with what. -->\n    <div class=\"border-hair bg-surface rounded-card divide-hair divide-y overflow-hidden border\">\n      <slot />\n    </div>\n  </section>\n</template>\n","<script setup lang=\"ts\">\ndefineProps<{ title: string }>()\n</script>\n\n<template>\n  <section class=\"flex flex-col gap-2\">\n    <h2 class=\"text-ink-soft px-1 text-xs font-semibold tracking-wide uppercase\">{{ title }}</h2>\n\n    <!-- One card per group, rows divided by hairlines. Loose fields floating on\n         the page gave no sense of what belonged with what. -->\n    <div class=\"border-hair bg-surface rounded-card divide-hair divide-y overflow-hidden border\">\n      <slot />\n    </div>\n  </section>\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","<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 { computed } from 'vue'\n\nconst {\n  rows = 3,\n  rowHeight = 'h-14',\n  label = 'Loading…',\n} = defineProps<{\n  rows?: number | undefined\n  /**\n   * How tall each row is, as either a utility class (`h-20`) or a CSS length\n   * (`5rem`, `72px`, `var(--row)`).\n   *\n   * Both are accepted because the class-only version failed silently: a length\n   * passed here landed in `class` as `5rem`, which is not a class, so the rows\n   * had no height and the placeholder rendered as nothing at all. A loading\n   * state that shows an empty page is worse than no loading state, because it\n   * looks like the page is finished and empty.\n   */\n  rowHeight?: string | undefined\n  label?: string | undefined\n}>()\n\n/** A length starts with a digit, a dot, or opens a CSS function. */\nconst isLength = computed(() => /^(?:[.\\d]|calc\\(|var\\(|clamp\\(|min\\(|max\\()/.test(rowHeight))\n</script>\n\n<template>\n  <div role=\"status\" class=\"flex flex-col gap-1\">\n    <span class=\"sr-only\">{{ label }}</span>\n\n    <div\n      v-for=\"row in rows\"\n      :key=\"row\"\n      class=\"bg-muted rounded-card animate-pulse\"\n      :class=\"isLength ? undefined : rowHeight\"\n      :style=\"isLength ? { height: rowHeight } : undefined\"\n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nconst {\n  rows = 3,\n  rowHeight = 'h-14',\n  label = 'Loading…',\n} = defineProps<{\n  rows?: number | undefined\n  /**\n   * How tall each row is, as either a utility class (`h-20`) or a CSS length\n   * (`5rem`, `72px`, `var(--row)`).\n   *\n   * Both are accepted because the class-only version failed silently: a length\n   * passed here landed in `class` as `5rem`, which is not a class, so the rows\n   * had no height and the placeholder rendered as nothing at all. A loading\n   * state that shows an empty page is worse than no loading state, because it\n   * looks like the page is finished and empty.\n   */\n  rowHeight?: string | undefined\n  label?: string | undefined\n}>()\n\n/** A length starts with a digit, a dot, or opens a CSS function. */\nconst isLength = computed(() => /^(?:[.\\d]|calc\\(|var\\(|clamp\\(|min\\(|max\\()/.test(rowHeight))\n</script>\n\n<template>\n  <div role=\"status\" class=\"flex flex-col gap-1\">\n    <span class=\"sr-only\">{{ label }}</span>\n\n    <div\n      v-for=\"row in rows\"\n      :key=\"row\"\n      class=\"bg-muted rounded-card animate-pulse\"\n      :class=\"isLength ? undefined : rowHeight\"\n      :style=\"isLength ? { height: rowHeight } : undefined\"\n      aria-hidden=\"true\"\n    />\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ArrowDown, ArrowRight, ArrowUp } from 'lucide-vue-next'\n\nconst {\n  value,\n  label,\n  trend = null,\n} = defineProps<{\n  value: string\n  label: string\n  trend?: 'up' | 'down' | 'flat' | null | undefined\n}>()\n\nconst TREND_ICON = { up: ArrowUp, down: ArrowDown, flat: ArrowRight } as const\n</script>\n\n<template>\n  <div class=\"border-hair rounded-card flex flex-1 flex-col gap-0.5 border p-3\">\n    <div class=\"flex items-baseline gap-1\">\n      <span class=\"text-ink text-xl font-semibold tabular-nums\">{{ value }}</span>\n      <component :is=\"TREND_ICON[trend]\" v-if=\"trend\" class=\"text-ink-soft size-3\" />\n    </div>\n    <span class=\"text-ink-soft text-xs\">{{ label }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { ArrowDown, ArrowRight, ArrowUp } from 'lucide-vue-next'\n\nconst {\n  value,\n  label,\n  trend = null,\n} = defineProps<{\n  value: string\n  label: string\n  trend?: 'up' | 'down' | 'flat' | null | undefined\n}>()\n\nconst TREND_ICON = { up: ArrowUp, down: ArrowDown, flat: ArrowRight } as const\n</script>\n\n<template>\n  <div class=\"border-hair rounded-card flex flex-1 flex-col gap-0.5 border p-3\">\n    <div class=\"flex items-baseline gap-1\">\n      <span class=\"text-ink text-xl font-semibold tabular-nums\">{{ value }}</span>\n      <component :is=\"TREND_ICON[trend]\" v-if=\"trend\" class=\"text-ink-soft size-3\" />\n    </div>\n    <span class=\"text-ink-soft text-xs\">{{ label }}</span>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-vue-next'\n\nimport BaseButton from './BaseButton.vue'\nimport { useToast } from '../composables/use-toast'\nimport type { ToastTone } from '../composables/use-toast'\n\n/**\n * Where the toasts land. One of these, at the app root.\n *\n * @example\n * ```vue\n * <!-- App.vue -->\n * <ToastHost :close-label=\"$t('common.close')\" />\n * ```\n */\nconst { closeLabel, bottom = false } = defineProps<{\n  /**\n   * The accessible name of each dismiss button. Required, because the button\n   * is an X and an X has no name — and the kit does not know the language.\n   */\n  closeLabel: string\n  /**\n   * Stack from the bottom instead of the top. For a phone shell, where the top\n   * is a status bar and a header and the thumb is nowhere near it.\n   */\n  bottom?: boolean | undefined\n}>()\n\nconst { toasts, dismiss, pause, resume } = useToast()\n\n/**\n * Teleport needs a `body`, and a server has none.\n *\n * Rendering nothing until mounted is also correct rather than merely safe: a\n * prerendered page has no toasts in it, so there is nothing to hydrate and\n * nothing to flash.\n */\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n\nconst ICON = {\n  info: Info,\n  success: CheckCircle2,\n  warning: TriangleAlert,\n  danger: XCircle,\n} as const satisfies Record<ToastTone, unknown>\n\n/* Roles, never colours. The app repaints these by redefining the token. */\nconst TONE_CLASS = {\n  info: 'text-primary',\n  success: 'text-positive',\n  warning: 'text-warning',\n  danger: 'text-negative',\n} as const satisfies Record<ToastTone, string>\n</script>\n\n<template>\n  <Teleport v-if=\"mounted\" to=\"body\">\n    <!--\n      `polite`, not `assertive`, and it is a considered choice: a toast reports\n      something that already happened, and interrupting a screen reader\n      mid-sentence to say \"saved\" is ruder than waiting. A failure the reader\n      must act on belongs in a `BaseAlert` beside the thing that failed.\n\n      `role=\"status\"` rather than `role=\"log\"` so the whole region is read when\n      it changes, not only the appended line.\n    -->\n    <div\n      class=\"pointer-events-none fixed inset-x-0 z-[100] flex flex-col items-center gap-2 px-4\"\n      :class=\"bottom ? 'bottom-0 pb-[max(1rem,env(safe-area-inset-bottom))]' : 'top-0 pt-4'\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <TransitionGroup name=\"toast\">\n        <div\n          v-for=\"toast in toasts\"\n          :key=\"toast.id\"\n          class=\"border-hair bg-surface text-ink rounded-card pointer-events-auto flex w-full max-w-sm items-start gap-3 border p-3 shadow-lg\"\n          @mouseenter=\"pause(toast.id)\"\n          @mouseleave=\"resume(toast.id)\"\n          @focusin=\"pause(toast.id)\"\n          @focusout=\"resume(toast.id)\"\n        >\n          <component\n            :is=\"ICON[toast.tone]\"\n            class=\"mt-0.5 size-5 shrink-0\"\n            :class=\"TONE_CLASS[toast.tone]\"\n            aria-hidden=\"true\"\n          />\n\n          <p class=\"flex-1 text-sm leading-snug\">{{ toast.message }}</p>\n\n          <BaseButton\n            variant=\"quiet\"\n            icon\n            pill\n            size=\"sm\"\n            class=\"-my-1 shrink-0\"\n            :aria-label=\"closeLabel\"\n            @click=\"dismiss(toast.id)\"\n          >\n            <X class=\"size-4\" />\n          </BaseButton>\n        </div>\n      </TransitionGroup>\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n/* Movement is small and downward from the top, upward from the bottom — the\n   direction it came from either way. */\n.toast-enter-active,\n.toast-leave-active {\n  transition:\n    opacity 200ms ease-out,\n    transform 200ms ease-out;\n}\n\n.toast-enter-from,\n.toast-leave-to {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n/* Leaving is taken out of flow so the ones below close the gap smoothly\n   instead of jumping when it unmounts. */\n.toast-leave-active {\n  position: absolute;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-enter-active,\n  .toast-leave-active {\n    transition-duration: 1ms;\n  }\n\n  .toast-enter-from,\n  .toast-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\">\nimport { onMounted, ref } from 'vue'\nimport { CheckCircle2, Info, TriangleAlert, X, XCircle } from 'lucide-vue-next'\n\nimport BaseButton from './BaseButton.vue'\nimport { useToast } from '../composables/use-toast'\nimport type { ToastTone } from '../composables/use-toast'\n\n/**\n * Where the toasts land. One of these, at the app root.\n *\n * @example\n * ```vue\n * <!-- App.vue -->\n * <ToastHost :close-label=\"$t('common.close')\" />\n * ```\n */\nconst { closeLabel, bottom = false } = defineProps<{\n  /**\n   * The accessible name of each dismiss button. Required, because the button\n   * is an X and an X has no name — and the kit does not know the language.\n   */\n  closeLabel: string\n  /**\n   * Stack from the bottom instead of the top. For a phone shell, where the top\n   * is a status bar and a header and the thumb is nowhere near it.\n   */\n  bottom?: boolean | undefined\n}>()\n\nconst { toasts, dismiss, pause, resume } = useToast()\n\n/**\n * Teleport needs a `body`, and a server has none.\n *\n * Rendering nothing until mounted is also correct rather than merely safe: a\n * prerendered page has no toasts in it, so there is nothing to hydrate and\n * nothing to flash.\n */\nconst mounted = ref(false)\nonMounted(() => (mounted.value = true))\n\nconst ICON = {\n  info: Info,\n  success: CheckCircle2,\n  warning: TriangleAlert,\n  danger: XCircle,\n} as const satisfies Record<ToastTone, unknown>\n\n/* Roles, never colours. The app repaints these by redefining the token. */\nconst TONE_CLASS = {\n  info: 'text-primary',\n  success: 'text-positive',\n  warning: 'text-warning',\n  danger: 'text-negative',\n} as const satisfies Record<ToastTone, string>\n</script>\n\n<template>\n  <Teleport v-if=\"mounted\" to=\"body\">\n    <!--\n      `polite`, not `assertive`, and it is a considered choice: a toast reports\n      something that already happened, and interrupting a screen reader\n      mid-sentence to say \"saved\" is ruder than waiting. A failure the reader\n      must act on belongs in a `BaseAlert` beside the thing that failed.\n\n      `role=\"status\"` rather than `role=\"log\"` so the whole region is read when\n      it changes, not only the appended line.\n    -->\n    <div\n      class=\"pointer-events-none fixed inset-x-0 z-[100] flex flex-col items-center gap-2 px-4\"\n      :class=\"bottom ? 'bottom-0 pb-[max(1rem,env(safe-area-inset-bottom))]' : 'top-0 pt-4'\"\n      role=\"status\"\n      aria-live=\"polite\"\n    >\n      <TransitionGroup name=\"toast\">\n        <div\n          v-for=\"toast in toasts\"\n          :key=\"toast.id\"\n          class=\"border-hair bg-surface text-ink rounded-card pointer-events-auto flex w-full max-w-sm items-start gap-3 border p-3 shadow-lg\"\n          @mouseenter=\"pause(toast.id)\"\n          @mouseleave=\"resume(toast.id)\"\n          @focusin=\"pause(toast.id)\"\n          @focusout=\"resume(toast.id)\"\n        >\n          <component\n            :is=\"ICON[toast.tone]\"\n            class=\"mt-0.5 size-5 shrink-0\"\n            :class=\"TONE_CLASS[toast.tone]\"\n            aria-hidden=\"true\"\n          />\n\n          <p class=\"flex-1 text-sm leading-snug\">{{ toast.message }}</p>\n\n          <BaseButton\n            variant=\"quiet\"\n            icon\n            pill\n            size=\"sm\"\n            class=\"-my-1 shrink-0\"\n            :aria-label=\"closeLabel\"\n            @click=\"dismiss(toast.id)\"\n          >\n            <X class=\"size-4\" />\n          </BaseButton>\n        </div>\n      </TransitionGroup>\n    </div>\n  </Teleport>\n</template>\n\n<style scoped>\n/* Movement is small and downward from the top, upward from the bottom — the\n   direction it came from either way. */\n.toast-enter-active,\n.toast-leave-active {\n  transition:\n    opacity 200ms ease-out,\n    transform 200ms ease-out;\n}\n\n.toast-enter-from,\n.toast-leave-to {\n  opacity: 0;\n  transform: translateY(-0.5rem);\n}\n\n/* Leaving is taken out of flow so the ones below close the gap smoothly\n   instead of jumping when it unmounts. */\n.toast-leave-active {\n  position: absolute;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .toast-enter-active,\n  .toast-leave-active {\n    transition-duration: 1ms;\n  }\n\n  .toast-enter-from,\n  .toast-leave-to {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"L extends string\">\n/**\n * A flat language switcher for screens with no Settings behind them.\n *\n * The list and the labels are props: only the app knows which languages it\n * ships, and endonyms — each language written in itself — are what make the\n * right option legible to someone who cannot read the current interface.\n */\nconst {\n  locales,\n  labels,\n  label = '',\n} = defineProps<{\n  locales: readonly L[]\n  /** Endonyms, e.g. `{ en: 'English', tr: 'Türkçe' }`. */\n  labels: Record<L, string>\n  /** Accessible name for the group. */\n  label?: string | undefined\n}>()\n\n/**\n * Two-way bound rather than taking the runtime's ref as a prop: props are not\n * unwrapped in a template and cannot be assigned to, so the ref would compare\n * against itself and the click handler would not compile.\n */\nconst preference = defineModel<'system' | L>({ required: true })\n</script>\n\n<template>\n  <nav class=\"flex flex-wrap items-center justify-center gap-1\" :aria-label=\"label || undefined\">\n    <button\n      v-for=\"locale in locales\"\n      :key=\"locale\"\n      type=\"button\"\n      :lang=\"locale\"\n      class=\"rounded-full px-2.5 py-1.5 text-xs transition-colors\"\n      :class=\"\n        preference === locale ? 'bg-muted text-ink font-semibold' : 'text-ink-soft hover:text-ink'\n      \"\n      :aria-pressed=\"preference === locale\"\n      @click=\"preference = locale\"\n    >\n      {{ labels[locale] }}\n    </button>\n  </nav>\n</template>\n","<script setup lang=\"ts\" generic=\"L extends string\">\n/**\n * A flat language switcher for screens with no Settings behind them.\n *\n * The list and the labels are props: only the app knows which languages it\n * ships, and endonyms — each language written in itself — are what make the\n * right option legible to someone who cannot read the current interface.\n */\nconst {\n  locales,\n  labels,\n  label = '',\n} = defineProps<{\n  locales: readonly L[]\n  /** Endonyms, e.g. `{ en: 'English', tr: 'Türkçe' }`. */\n  labels: Record<L, string>\n  /** Accessible name for the group. */\n  label?: string | undefined\n}>()\n\n/**\n * Two-way bound rather than taking the runtime's ref as a prop: props are not\n * unwrapped in a template and cannot be assigned to, so the ref would compare\n * against itself and the click handler would not compile.\n */\nconst preference = defineModel<'system' | L>({ required: true })\n</script>\n\n<template>\n  <nav class=\"flex flex-wrap items-center justify-center gap-1\" :aria-label=\"label || undefined\">\n    <button\n      v-for=\"locale in locales\"\n      :key=\"locale\"\n      type=\"button\"\n      :lang=\"locale\"\n      class=\"rounded-full px-2.5 py-1.5 text-xs transition-colors\"\n      :class=\"\n        preference === locale ? 'bg-muted text-ink font-semibold' : 'text-ink-soft hover:text-ink'\n      \"\n      :aria-pressed=\"preference === locale\"\n      @click=\"preference = locale\"\n    >\n      {{ labels[locale] }}\n    </button>\n  </nav>\n</template>\n","<script setup lang=\"ts\">\nconst { label } = defineProps<{ label: string }>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    class=\"border-hair bg-surface text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 border text-sm font-medium transition-colors active:scale-95\"\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\">\nconst { label } = defineProps<{ label: string }>()\n\nconst emit = defineEmits<{ click: [] }>()\n</script>\n\n<template>\n  <button\n    type=\"button\"\n    class=\"border-hair bg-surface text-ink rounded-card hover:bg-muted flex h-11 w-full items-center justify-center gap-2 border text-sm font-medium transition-colors active:scale-95\"\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\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\nimport type { Component } from 'vue'\n\nimport { tapFeedback } from '../utils/haptics'\n\nexport interface TabItem<K extends string> {\n  /** Identity, compared against `active`. */\n  key: K\n  /** Router destination. */\n  to: string\n  /** Text under the icon. Already translated. */\n  label: string\n  icon: Component\n}\n\n/**\n * The floating bottom bar.\n *\n * Items and the active key are props: the package has no opinion about how an\n * app names its screens, and reading `route.meta` here would force one.\n */\nconst {\n  items,\n  active,\n  label = '',\n} = defineProps<{\n  items: readonly TabItem<K>[]\n  /** Which item is current. Usually from `route.meta`. */\n  active?: K | undefined\n  /** Accessible name for the navigation landmark. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <header class=\"tab-bar\">\n    <nav class=\"tab-bar-inner\" :aria-label=\"label || undefined\">\n      <RouterLink\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        :to=\"item.to\"\n        class=\"tab-link\"\n        :class=\"{ 'is-active': item.key === active }\"\n        :aria-current=\"item.key === active ? 'page' : undefined\"\n        @click=\"tapFeedback()\"\n      >\n        <span class=\"tab-icon-slot\">\n          <component :is=\"item.icon\" class=\"tab-icon\" />\n        </span>\n        <span class=\"tab-label\">{{ item.label }}</span>\n      </RouterLink>\n    </nav>\n  </header>\n</template>\n\n<style scoped>\n@reference \"../styles/_reference.css\";\n\n/* absolute, not fixed: the bar hangs inside the app shell. Fixed would pin it\n   to the browser window, which on a desktop is nowhere near the app. */\n.tab-bar {\n  @apply absolute left-1/2 z-40 w-full max-w-[360px] -translate-x-1/2 px-4;\n  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.tab-bar-inner {\n  @apply border-hair bg-surface/85 flex items-center justify-between gap-1 border p-1.5 shadow-lg backdrop-blur-md;\n  border-radius: var(--radius-shell);\n}\n\n.tab-link {\n  @apply text-ink-soft flex min-h-[52px] flex-1 cursor-pointer flex-col items-center justify-center gap-1 py-1.5;\n  border-radius: calc(var(--radius-shell) - 6px);\n  /* Only the icon reacts to a press. Scaling the whole link drags the label and\n     the pill with it, which reads as the bar wobbling. */\n  transition: color 200ms ease;\n}\n\n.tab-link:hover {\n  @apply text-ink;\n}\n\n/* The pill sits behind the icon rather than the link, so the active tab grows a\n   marker instead of the row changing shape. */\n.tab-icon-slot {\n  @apply flex h-7 w-12 items-center justify-center rounded-full transition-all duration-200 ease-out;\n}\n\n.tab-link:active .tab-icon-slot {\n  transform: scale(0.88);\n}\n\n.is-active {\n  @apply text-primary;\n}\n\n.is-active .tab-icon-slot {\n  @apply bg-muted;\n}\n\n.tab-icon {\n  @apply size-[18px] stroke-2 transition-transform duration-200;\n}\n\n.is-active .tab-icon {\n  @apply scale-110 stroke-[2.5px];\n}\n\n.tab-label {\n  @apply text-[10px] leading-none font-medium;\n}\n\n.is-active .tab-label {\n  @apply font-semibold;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tab-icon-slot,\n  .tab-icon {\n    transition: none;\n  }\n  .tab-link:active .tab-icon-slot {\n    transform: none;\n  }\n}\n</style>\n","<script setup lang=\"ts\" generic=\"K extends string\">\nimport { RouterLink } from 'vue-router'\nimport type { Component } from 'vue'\n\nimport { tapFeedback } from '../utils/haptics'\n\nexport interface TabItem<K extends string> {\n  /** Identity, compared against `active`. */\n  key: K\n  /** Router destination. */\n  to: string\n  /** Text under the icon. Already translated. */\n  label: string\n  icon: Component\n}\n\n/**\n * The floating bottom bar.\n *\n * Items and the active key are props: the package has no opinion about how an\n * app names its screens, and reading `route.meta` here would force one.\n */\nconst {\n  items,\n  active,\n  label = '',\n} = defineProps<{\n  items: readonly TabItem<K>[]\n  /** Which item is current. Usually from `route.meta`. */\n  active?: K | undefined\n  /** Accessible name for the navigation landmark. */\n  label?: string | undefined\n}>()\n</script>\n\n<template>\n  <header class=\"tab-bar\">\n    <nav class=\"tab-bar-inner\" :aria-label=\"label || undefined\">\n      <RouterLink\n        v-for=\"item in items\"\n        :key=\"item.key\"\n        :to=\"item.to\"\n        class=\"tab-link\"\n        :class=\"{ 'is-active': item.key === active }\"\n        :aria-current=\"item.key === active ? 'page' : undefined\"\n        @click=\"tapFeedback()\"\n      >\n        <span class=\"tab-icon-slot\">\n          <component :is=\"item.icon\" class=\"tab-icon\" />\n        </span>\n        <span class=\"tab-label\">{{ item.label }}</span>\n      </RouterLink>\n    </nav>\n  </header>\n</template>\n\n<style scoped>\n@reference \"../styles/_reference.css\";\n\n/* absolute, not fixed: the bar hangs inside the app shell. Fixed would pin it\n   to the browser window, which on a desktop is nowhere near the app. */\n.tab-bar {\n  @apply absolute left-1/2 z-40 w-full max-w-[360px] -translate-x-1/2 px-4;\n  bottom: calc(1rem + env(safe-area-inset-bottom, 0px));\n}\n\n.tab-bar-inner {\n  @apply border-hair bg-surface/85 flex items-center justify-between gap-1 border p-1.5 shadow-lg backdrop-blur-md;\n  border-radius: var(--radius-shell);\n}\n\n.tab-link {\n  @apply text-ink-soft flex min-h-[52px] flex-1 cursor-pointer flex-col items-center justify-center gap-1 py-1.5;\n  border-radius: calc(var(--radius-shell) - 6px);\n  /* Only the icon reacts to a press. Scaling the whole link drags the label and\n     the pill with it, which reads as the bar wobbling. */\n  transition: color 200ms ease;\n}\n\n.tab-link:hover {\n  @apply text-ink;\n}\n\n/* The pill sits behind the icon rather than the link, so the active tab grows a\n   marker instead of the row changing shape. */\n.tab-icon-slot {\n  @apply flex h-7 w-12 items-center justify-center rounded-full transition-all duration-200 ease-out;\n}\n\n.tab-link:active .tab-icon-slot {\n  transform: scale(0.88);\n}\n\n.is-active {\n  @apply text-primary;\n}\n\n.is-active .tab-icon-slot {\n  @apply bg-muted;\n}\n\n.tab-icon {\n  @apply size-[18px] stroke-2 transition-transform duration-200;\n}\n\n.is-active .tab-icon {\n  @apply scale-110 stroke-[2.5px];\n}\n\n.tab-label {\n  @apply text-[10px] leading-none font-medium;\n}\n\n.is-active .tab-label {\n  @apply font-semibold;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .tab-icon-slot,\n  .tab-icon {\n    transition: none;\n  }\n  .tab-link:active .tab-icon-slot {\n    transform: none;\n  }\n}\n</style>\n","import { computed, ref, watchEffect } from 'vue'\nimport { createI18n } from 'vue-i18n'\n\nimport { setFormatLocale } from '../utils/format'\n\n/** What the user picked. `system` re-reads the browser on every launch. */\nexport type LocalePreference<L extends string> = 'system' | L\n\nexport interface I18nRuntimeOptions<L extends string, Schema> {\n  /** Languages the app ships, in no particular order. */\n  locales: readonly L[]\n  /** The one that is always loaded, and the fallback when a load fails. */\n  fallback: L\n  /**\n   * BCP 47 tag per locale, for `Intl`.\n   *\n   * Message lookup only needs the base language, but dates and numbers need a\n   * region to be right — `zh` alone would leave the formatter to guess.\n   */\n  intlTags: Record<L, string>\n  /** The fallback's messages, bundled. */\n  messages: Schema\n  /** The rest, fetched only when they are the one in use. */\n  loaders?: Partial<Record<L, () => Promise<{ default: Schema }>>>\n  /** Where the choice is stored. Namespace it per app. */\n  storageKey?: string\n}\n\n/**\n * Builds an i18n runtime around an app's own catalogue.\n *\n * A factory rather than a module singleton because the schema is the app's:\n * typing every locale as `typeof en` is what makes a missing key a build error,\n * and this package has no `en` of its own to type against.\n *\n * @example\n * ```ts\n * export const { i18n, t, useLocalePreference, loadActiveLocale } =\n *   createI18nRuntime({\n *     locales: ['en', 'tr'] as const,\n *     fallback: 'en',\n *     intlTags: { en: 'en-GB', tr: 'tr-TR' },\n *     messages: en,\n *     loaders: { tr: () => import('./locales/tr') },\n *     storageKey: 'myapp-locale',\n *   })\n * ```\n */\nexport function createI18nRuntime<L extends string, Schema extends Record<string, unknown>>(\n  options: I18nRuntimeOptions<L, Schema>,\n) {\n  const { locales, fallback, intlTags, messages, storageKey = 'rei-locale' } = options\n\n  // Typed rather than defaulted to `{}`, which erases the locale keys and makes\n  // `loaders[locale]` an index into an empty object.\n  const loaders: Partial<Record<L, () => Promise<{ default: Schema }>>> = options.loaders ?? {}\n\n  function isSupported(value: string): value is L {\n    return (locales as readonly string[]).includes(value)\n  }\n\n  /**\n   * First browser language the app can actually speak.\n   *\n   * `navigator.languages` is ordered by the user's own preference, so the first\n   * match is the best one — not simply the first entry.\n   */\n  function detectSystemLocale(): L {\n    // No browser to ask. The fallback is the right answer on a server: it is\n    // the locale whose messages are bundled, so it is the only one that could\n    // render without a load.\n    //\n    // The test is `document`, not `navigator`. Node has shipped a global\n    // `navigator` since v21, so `typeof navigator === 'undefined'` is false on\n    // a server and this would read the *build machine's* language and bake it\n    // into every prerendered page. `document` is the only one of the two that\n    // still means \"a browser\".\n    if (typeof document === 'undefined') return fallback\n\n    for (const tag of navigator.languages ?? [navigator.language]) {\n      const base = tag.split('-')[0]?.toLowerCase()\n      if (base && isSupported(base)) return base\n    }\n\n    return fallback\n  }\n\n  function readStored(): LocalePreference<L> {\n    try {\n      const stored = localStorage.getItem(storageKey)\n      if (stored === 'system' || (stored && isSupported(stored))) return stored\n    } catch {\n      // Storage blocked; fall through to the system language.\n    }\n\n    return 'system'\n  }\n\n  const preference = ref<LocalePreference<L>>(readStored())\n\n  const activeLocale = computed<L>(() =>\n    preference.value === 'system' ? detectSystemLocale() : (preference.value as L),\n  )\n\n  const intlLocale = computed(() => intlTags[activeLocale.value])\n\n  // Only the fallback at construction; the rest arrive through\n  // setLocaleMessage.\n  const initial = { [fallback]: messages } as Record<string, Record<string, unknown>>\n\n  const i18n = createI18n({\n    legacy: false,\n    locale: activeLocale.value as string,\n    fallbackLocale: fallback as string,\n    messages: initial,\n  } as unknown as Parameters<typeof createI18n>[0])\n\n  /**\n   * A narrow view of the instance.\n   *\n   * vue-i18n infers its own generics from the messages it is handed, which\n   * fights a runtime that is generic over the app's schema. Casting once, here,\n   * keeps that fight out of every call site — and the surface below is the\n   * whole of what this runtime uses.\n   */\n  const core = i18n.global as unknown as {\n    locale: { value: string }\n    setLocaleMessage: (locale: string, messages: Schema) => void\n    t: (key: string, named?: Record<string, unknown>) => string\n  }\n\n  const loaded = new Set<L>([fallback])\n\n  /**\n   * Makes sure a locale's messages are in place before it becomes active.\n   *\n   * Awaited rather than fired and forgotten: setting the locale first paints one\n   * frame of the fallback at every other user, which is the flash a fallback\n   * exists to prevent, not cause.\n   */\n  async function ensureMessages(locale: L): Promise<void> {\n    if (loaded.has(locale)) return\n\n    const load = loaders[locale]\n    if (!load) return\n\n    try {\n      const module = await load()\n      core.setLocaleMessage(locale, module.default)\n      loaded.add(locale)\n    } catch {\n      // Offline, or a stale chunk after a deploy. The fallback is loaded and\n      // will carry the UI, which beats a blank screen.\n    }\n  }\n\n  /** Loads whatever the stored preference resolves to. Call before mounting. */\n  function loadActiveLocale(): Promise<void> {\n    return ensureMessages(activeLocale.value)\n  }\n\n  // Keeps vue-i18n, `Intl` and the document in step. `lang` matters beyond\n  // tidiness: it drives hyphenation, font fallback and screen readers.\n  watchEffect(() => {\n    core.locale.value = activeLocale.value\n    setFormatLocale(intlLocale.value)\n\n    if (typeof document !== 'undefined') {\n      document.documentElement.lang = activeLocale.value\n    }\n  })\n\n  /** Read and write the language preference. */\n  function useLocalePreference() {\n    return computed<LocalePreference<L>>({\n      get: () => preference.value,\n      set: (next) => {\n        const resolved = next === 'system' ? detectSystemLocale() : (next as L)\n\n        // Messages first, then the switch — the other order shows the fallback\n        // for a frame on the way to the language the user just picked.\n        void ensureMessages(resolved).then(() => {\n          preference.value = next\n        })\n\n        try {\n          localStorage.setItem(storageKey, next)\n        } catch {\n          // Storage blocked; the choice lasts for this session only.\n        }\n      },\n    })\n  }\n\n  return {\n    i18n,\n    /** `t` for code outside a component. Tracks the locale inside a computed. */\n    t: core.t,\n    activeLocale,\n    intlLocale,\n    ensureMessages,\n    loadActiveLocale,\n    useLocalePreference,\n  }\n}\n","/**\n * rei-kit — the layer every app starts from.\n *\n * Everything here is free of any backend, router or i18n choice. Components\n * take strings rather than calling a translator, and utilities take the clock\n * rather than reading it, so nothing in this package can force a decision on\n * the app that installs it.\n *\n * @see https://github.com/ramazandogna/rei-kit\n */\n\n/**\n * The published version, replaced at build time from `package.json`.\n *\n * It was a literal `'0.0.0'` and nothing ever rewrote it, so every consumer\n * that imported this — and the showcase, which is how it was noticed — was\n * told the kit was at 0.0.0 whatever it actually was. A symbol in a public API\n * that reports something false is worse than one that is missing: nobody\n * checks a value that looks like it works.\n *\n * The fallback keeps `vitest` and `vite dev` honest, where no define runs.\n */\nexport const VERSION: string =\n  typeof __REI_KIT_VERSION__ === 'string' ? __REI_KIT_VERSION__ : '0.0.0-dev'\n\n// ── Utilities ──────────────────────────────────────────────────────────────\nexport {\n  addDays,\n  eachDayOfYear,\n  fromDateKey,\n  lastNDays,\n  leadingBlanks,\n  startOfWeek,\n  toDateKey,\n  todayKey,\n} from './utils/date'\nexport type { WeekStart } from './utils/date'\n\nexport { formatDate, setFormatLocale } from './utils/format'\nexport { relativeDayLabel } from './utils/day-label'\nexport type { DayLabels } from './utils/day-label'\n\nexport { downloadJson } from './utils/download'\nexport { safeRedirect } from './utils/redirect'\nexport type { QueryValue } from './utils/redirect'\nexport { tapFeedback } from './utils/haptics'\nexport { isApplePortable, isInstalled, needsIosInstall } from './utils/platform'\n\nexport { AppError, registerErrorMapper, toAppError } from './utils/app-error'\nexport type { AppErrorKind, ErrorMapper } from './utils/app-error'\n\n// ── Composables ────────────────────────────────────────────────────────────\nexport {\n  applyTheme,\n  isThemePreference,\n  readStoredTheme,\n  setThemeStorageKey,\n  useTheme,\n} from './composables/use-theme'\nexport type { ThemePreference } from './composables/use-theme'\n\nexport { useToday } from './composables/use-today'\nexport { useOnline } from './composables/use-online'\nexport { useDebouncedCallback } from './composables/use-debounced-callback'\nexport { useDragScroll } from './composables/use-drag-scroll'\nexport { useMediaQuery } from './composables/use-media-query'\nexport { useVisualViewport } from './composables/use-visual-viewport'\nexport { useToast } from './composables/use-toast'\nexport type { Toast, ToastOptions, ToastTone } from './composables/use-toast'\nexport type { VisualViewportRect } from './composables/use-visual-viewport'\n\n// ── Components ─────────────────────────────────────────────────────────────\nexport { default as BaseAlert } from './components/BaseAlert.vue'\nexport { default as BaseBadge } from './components/BaseBadge.vue'\nexport { default as BaseButton } from './components/BaseButton.vue'\nexport { default as BaseInput } from './components/BaseInput.vue'\nexport { default as BaseSheet } from './components/BaseSheet.vue'\nexport { default as BaseCard } from './components/BaseCard.vue'\nexport { default as BaseCheckbox } from './components/BaseCheckbox.vue'\nexport { default as BaseRadioGroup } from './components/BaseRadioGroup.vue'\nexport { default as BaseSelect } from './components/BaseSelect.vue'\nexport { default as BaseTextarea } from './components/BaseTextarea.vue'\nexport { default as EmptyState } from './components/EmptyState.vue'\nexport { default as FormField } from './components/FormField.vue'\nexport { default as ErrorBoundary } from './components/ErrorBoundary.vue'\nexport { default as PageContainer } from './components/PageContainer.vue'\nexport { default as PageHeader } from './components/PageHeader.vue'\nexport { default as ProgressBar } from './components/ProgressBar.vue'\nexport { default as PriceCard } from './components/PriceCard.vue'\nexport { default as SectionHeading } from './components/SectionHeading.vue'\nexport { default as SegmentedControl } from './components/SegmentedControl.vue'\nexport { default as SettingsGroup } from './components/SettingsGroup.vue'\nexport { default as SettingsRow } from './components/SettingsRow.vue'\nexport { default as SkeletonList } from './components/SkeletonList.vue'\nexport { default as StatCard } from './components/StatCard.vue'\nexport { default as ToastHost } from './components/ToastHost.vue'\nexport { default as ToneDot } from './components/ToneDot.vue'\nexport type { Tone } from './components/SectionHeading.vue'\nexport { default as LocaleLinks } from './components/LocaleLinks.vue'\nexport { default as GoogleButton } from './components/GoogleButton.vue'\nexport { default as TabBar } from './components/TabBar.vue'\nexport type { TabItem } from './components/TabBar.vue'\n\n// ── i18n ───────────────────────────────────────────────────────────────────\nexport { createI18nRuntime } from './i18n/runtime'\nexport type { I18nRuntimeOptions, LocalePreference } from './i18n/runtime'\n"],"mappings":"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"}