@plutocms/pluto 0.12.0 → 0.14.0

package/app/components/Pluto/View/PlutoViewAdminPanel.vue

@@ -11,10 +11,17 @@ const props = withDefaults(
      * resizable panel. The panel width persists across visits.
      */
     asideOpen?: boolean
+    /**
+     * Fill the main region's height, and let the content scroll inside its
+     * own region, not the whole page. For a view with one long scrolling
+     * list, such as a virtualized table. Default false.
+     */
+    fill?: boolean
   }>(),
   {
     width: 'container',
     asideOpen: false,
+    fill: false,
   }
 )
 
@@ -86,7 +93,7 @@ const items = computed<SplitterItem[]>(() => [
         @dragging="onDragging"
       >
         <template #main>
-          <main class="min-h-0 w-full overflow-y-auto">
+          <main :class="fill ? 'flex flex-col overflow-hidden' : 'overflow-y-auto'" class="min-h-0 w-full">
             <!--
               'container' matches AdminView's own padding/gap classes, so a view
               moving from AdminView to this panel looks the same. 'full' adds
@@ -95,6 +102,7 @@ const items = computed<SplitterItem[]>(() => [
             -->
             <UContainer
               v-if="width === 'container'"
+              :class="{ 'h-full min-h-0': fill }"
               class="flex max-w-300 flex-col gap-y-6 px-4 py-6 sm:px-6 lg:gap-y-8 lg:px-8 lg:py-10"
             >
               <slot />

package/app/components/Pluto/View/PlutoViewAside.vue

@@ -26,11 +26,11 @@ function close() {
   open.value = false
 }
 
-// Open the slideover on mobile only. A `lg:hidden` class alone is not
-// enough: an open slideover is a modal dialog, so it disables pointer
-// events on the rest of the page even while it is hidden. On desktop, the
-// page then stops taking clicks as soon as the aside opens. It also mounts
-// the slot a second time.
+// Render the plain aside on desktop only, and the slideover on mobile only,
+// so the slot mounts once. CSS classes (`hidden lg:flex`, `lg:hidden`) are
+// not enough: they hide a copy, but the copy stays mounted and fetches its
+// own data. An open slideover is also a modal dialog. It disables pointer
+// events on the rest of the page even while CSS hides it.
 const isDesktop = useMediaQuery('(min-width: 64rem)')
 const resizable = inject(plutoViewAsideResizableKey, ref(false))
 const slideoverOpen = computed({
@@ -47,10 +47,10 @@ const slideoverOpen = computed({
     width and its handle draws the border. Elsewhere, keep the fixed width.
   -->
   <aside
-    v-if="open"
+    v-if="open && isDesktop"
     :style="resizable ? undefined : { width: `${width}px` }"
     :class="resizable ? 'w-full' : 'border-default shrink-0 border-s'"
-    class="hidden h-full flex-col lg:flex"
+    class="flex h-full flex-col"
   >
     <div class="border-default flex h-12 shrink-0 items-center justify-between gap-1.5 border-b px-4">
       <h2 class="text-highlighted truncate text-sm font-semibold">{{ title }}</h2>
@@ -67,9 +67,16 @@ const slideoverOpen = computed({
     </div>
   </aside>
 
+  <!--
+    `unmount-on-hide="false"` keeps the slot mounted after the first open,
+    so a reopen keeps the widget state (an open picker, a typed search) and
+    does not fetch the field options again.
+  -->
   <USlideover
+    v-if="!isDesktop"
     v-model:open="slideoverOpen"
     :title="title"
+    :unmount-on-hide="false"
     side="right"
   >
     <template #body>

package/app/components/modal/Modal.vue

@@ -40,7 +40,7 @@ const resolvedClasses = computed(() => {
       my-2 mx-2 sm:my-4 sm:mx-4
       shadow-2xl
       bg-default
-      light:text-zinc-800 dark:text-white
+      text-default
     `
 
   return twMerge([

package/app/components/modal/ModalHeader.vue

@@ -16,6 +16,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(['close'])
 
+const { t } = usePlutoI18n()
+
 const closeModel = defineModel<() => void>('close')
 
 const resolvedClasses = computed(() => {
@@ -56,7 +58,7 @@ function closeModal() {
 
       <div v-if="props.hideCloseButton === false">
         <UButton size="sm" variant="ghost" square @click="closeModal">
-          <span class="sr-only">Close</span>
+          <span class="sr-only">{{ t('pluto.common.close') }}</span>
 
           <Icon name="lucide:x" class="text-xl" />
         </UButton>

package/app/composables/internal/content-text.ts

@@ -0,0 +1,111 @@
+// Pure part of `usePlutoContentText`. It does not use Nuxt auto-imports, so
+// plain Vitest can import it, and so a composable can call it for each type
+// inside one `computed`.
+import type { PlutoContentType, PlutoField } from '../../../shared/types/content'
+import type { MessageParams } from './i18n-core'
+
+/** The part of `usePlutoI18n()` that content text needs. */
+export interface ContentTextI18n {
+  t: (key: string, params?: MessageParams | number) => string
+  te: (key: string) => boolean
+  locale: {
+ readonly value: string
+}
+}
+
+export interface PlutoContentText {
+  /** The singular label: the key `content.<name>.label`, else `type.label`. */
+  readonly label: string
+  /** The plural label: the key `content.<name>.labelPlural`, else `type.labelPlural`. */
+  readonly labelPlural: string
+  /** The label in lowercase, for use inside a sentence. */
+  readonly labelLower: string
+  /** The plural label in lowercase, for use inside a sentence. */
+  readonly labelPluralLower: string
+  /** The "New <label>" text: the key `content.<name>.new`, else the core phrase. */
+  readonly newLabel: string
+  /** The label of a field: the key `content.<name>.fields.<field>.label`, else `field.label`. */
+  fieldLabel: (field: PlutoField) => string
+  /** A copy of a field with translated label, description, placeholder and option labels. */
+  field: <F extends PlutoField>(field: F) => F
+  /** The label of a status value: the key `content.<name>.status.<value>`, else `literal`, else the value. */
+  statusLabel: (value: string, literal?: string) => string
+}
+
+/**
+ * Resolves the convention keys of one content type, with the English literal
+ * of the type as the fallback. A key is used only when it exists, so a type
+ * that has no key keeps its English text.
+ *
+ * `getType` runs on each read, so a locale switch or a changed type shows at
+ * once when the caller reads inside a reactive scope.
+ */
+export function createContentText(getType: () => PlutoContentType | undefined, i18n: ContentTextI18n): PlutoContentText {
+  const prefix = () => `content.${getType()?.name ?? ''}`
+
+  /** The translation when the key exists, else the literal. */
+  function pick<L extends string | undefined>(key: string, literal: L): string | L {
+    return i18n.te(key) ? i18n.t(key) : literal
+  }
+
+  const lower = (value: string) => value.toLocaleLowerCase(i18n.locale.value)
+  const label = () => pick(`${prefix()}.label`, getType()?.label ?? '')
+  const labelPlural = () => pick(`${prefix()}.labelPlural`, getType()?.labelPlural ?? '')
+
+  function fieldLabel(field: PlutoField): string {
+    return pick(`${prefix()}.fields.${field.name}.label`, field.label)
+  }
+
+  function field<F extends PlutoField>(source: F): F {
+    const base = `${prefix()}.fields.${source.name}`
+    const copy: Record<string, unknown> = { ...source, label: fieldLabel(source) }
+
+    const description = pick(`${base}.description`, source.description)
+    if (description !== undefined) {
+      copy.description = description
+    }
+
+    const placeholder = pick(`${base}.placeholder`, (source as {
+ placeholder?: string
+}).placeholder)
+    if (placeholder !== undefined) {
+      copy.placeholder = placeholder
+    }
+
+    if (source.type === 'select') {
+      copy.options = source.options.map((option) => ({
+        ...option,
+        label: pick(`${base}.options.${option.value}`, option.label),
+      }))
+    }
+
+    return copy as F
+  }
+
+  return {
+    get label() {
+      return label()
+    },
+    get labelPlural() {
+      return labelPlural()
+    },
+    get labelLower() {
+      return lower(label())
+    },
+    get labelPluralLower() {
+      return lower(labelPlural())
+    },
+    get newLabel() {
+      const key = `${prefix()}.new`
+      return i18n.te(key) ? i18n.t(key) : i18n.t('pluto.content.new', { label: label() })
+    },
+    fieldLabel,
+    field,
+    statusLabel: (value, literal) => pick(`${prefix()}.status.${value}`, literal ?? value),
+  }
+}
+
+/** Same as `createContentText`, for a type that is already in hand. */
+export function contentTextFor(type: PlutoContentType, i18n: ContentTextI18n): PlutoContentText {
+  return createContentText(() => type, i18n)
+}

package/app/composables/internal/error-text.ts

@@ -0,0 +1,58 @@
+// Pure part of `usePlutoErrorText`. It does not use Nuxt auto-imports.
+import type { MessageParams } from './i18n-core'
+
+/** The fallback key when the caller passes none. */
+export const DEFAULT_ERROR_KEY = 'pluto.errors.unknown'
+
+function asRecord(value: unknown): Record<string, unknown> | undefined {
+  return typeof value === 'object' && value !== null ? (value as Record<string, unknown>) : undefined
+}
+
+function nonEmpty(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() !== '' ? value : undefined
+}
+
+/**
+ * Finds the `{ key, params }` that a `createPlutoError` call put in the
+ * response. A `$fetch` error holds the whole response body in `data`, so the
+ * pair sits in `data.data.i18n`. An error that Nuxt creates on the client
+ * holds it in `data.i18n`.
+ */
+function findTag(data: Record<string, unknown> | undefined): {
+ key: string
+params?: MessageParams
+} | undefined {
+  for (const candidate of [asRecord(data?.i18n), asRecord(asRecord(data?.data)?.i18n)]) {
+    if (candidate && typeof candidate.key === 'string') {
+      return { key: candidate.key, params: asRecord(candidate.params) }
+    }
+  }
+  return undefined
+}
+
+/**
+ * Turns an error into text for an admin. Order:
+ *
+ * 1. The translated `data.i18n` of a server `createPlutoError`.
+ * 2. The server `statusMessage`, then the server `message` (English).
+ * 3. The translated fallback key.
+ */
+export function resolveErrorText(
+  error: unknown,
+  fallbackKey: string,
+  i18n: {
+ t: (key: string, params?: MessageParams) => string
+te: (key: string) => boolean
+}
+): string {
+  const source = asRecord(error)
+  const data = asRecord(source?.data)
+
+  const tag = findTag(data)
+  if (tag && i18n.te(tag.key)) {
+    return i18n.t(tag.key, tag.params)
+  }
+
+  const server = nonEmpty(source?.statusMessage) ?? nonEmpty(data?.statusMessage) ?? nonEmpty(data?.message)
+  return server ?? i18n.t(fallbackKey)
+}

package/app/composables/internal/i18n-core.ts

@@ -0,0 +1,310 @@
+// Pure engine of the Pluto i18n system. It does not use Nuxt auto-imports, so
+// plain Vitest can import it. The Nuxt-aware wrappers are in
+// `app/composables/pluto-i18n.ts`. Import from 'vue' explicitly, as
+// `registry-factory.ts` does.
+import { shallowReactive } from 'vue'
+
+/** A message tree as stored in a locale JSON file. */
+export interface MessageTree {
+  [key: string]: string | MessageTree
+}
+
+/** A message tree flattened to dotted keys. */
+export type FlatMessages = Record<string, string>
+
+export type MessageParams = Record<string, unknown>
+
+/**
+ * A translation key: a lowercase namespace, then one or more dotted parts.
+ * Example: `pluto.common.save`. A plain English label does not match, so
+ * `tx()` can tell a key from a literal.
+ */
+const MESSAGE_KEY = /^[a-z][a-z0-9-]*(?:\.[\w-]+)+$/
+
+export function isMessageKey(value: unknown): value is string {
+  return typeof value === 'string' && MESSAGE_KEY.test(value)
+}
+
+/** Flattens a nested message tree to dotted keys. Keeps string leaves only. */
+export function flattenMessages(tree: MessageTree, prefix = ''): FlatMessages {
+  const flat: FlatMessages = {}
+  for (const [name, value] of Object.entries(tree)) {
+    const key = prefix ? `${prefix}.${name}` : name
+    if (typeof value === 'string') {
+      flat[key] = value
+    } else if (value && typeof value === 'object') {
+      Object.assign(flat, flattenMessages(value, key))
+    }
+  }
+  return flat
+}
+
+/** Replaces each `{name}` with `params.name`. An unknown name stays as it is. */
+export function interpolate(message: string, params?: MessageParams): string {
+  if (!params) {
+    return message
+  }
+  return message.replace(/\{(\w+)\}/g, (match, name: string) => {
+    const value = params[name]
+    return value === undefined || value === null ? match : String(value)
+  })
+}
+
+const PLURAL_SEPARATOR = ' | '
+
+/** Returns the number of plural forms in a message. */
+export function countPluralForms(message: string): number {
+  return message.split(PLURAL_SEPARATOR).length
+}
+
+const pluralRules = new Map<string, Intl.PluralRules>()
+
+function getPluralRules(locale: string): Intl.PluralRules {
+  let rules = pluralRules.get(locale)
+  if (!rules) {
+    rules = new Intl.PluralRules(locale)
+    pluralRules.set(locale, rules)
+  }
+  return rules
+}
+
+/**
+ * Picks one form of a plural message.
+ *
+ * - One form: returned as it is.
+ * - Two forms (`one | other`): `Intl.PluralRules` of the locale decides.
+ * - Three forms (`zero | one | other`): 0 gives the first form, even in a
+ *   locale where 0 is `one` (pt-BR). Then `Intl.PluralRules` decides.
+ */
+export function selectPlural(message: string, count: number, locale: string): string {
+  const forms = message.split(PLURAL_SEPARATOR)
+  if (forms.length === 1) {
+    return message
+  }
+  const category = getPluralRules(locale).select(count)
+  if (forms.length === 2) {
+    return category === 'one' ? forms[0]! : forms[1]!
+  }
+  if (count === 0) {
+    return forms[0]!
+  }
+  return category === 'one' ? forms[1]! : forms[2]!
+}
+
+export interface TranslatorOptions {
+  /** The active locale code. Called on each translation, so it can be reactive. */
+  locale: () => string
+  /** The locale to use when a key is missing. Default `en`. */
+  fallbackLocale?: string
+  /** Returns the flat messages of a locale, or undefined if not loaded. */
+  messages: (locale: string) => FlatMessages | undefined
+  /** Called once for each missing key. Default: `console.warn` in dev, none otherwise. */
+  warn?: (message: string) => void
+}
+
+export interface Translator {
+  /** Translates a key. A second number argument is the plural count. */
+  t: (key: string, params?: MessageParams | number) => string
+  /** True if the key exists in the active locale or in the fallback. */
+  te: (key: string) => boolean
+  /** Translates a key-or-literal value. A literal returns unchanged. */
+  tx: (value: string, params?: MessageParams | number) => string
+}
+
+/**
+ * Builds a translator. Fallback order: the active locale, the fallback
+ * locale, then the key itself.
+ */
+export function createTranslator(options: TranslatorOptions): Translator {
+  const fallbackLocale = options.fallbackLocale ?? 'en'
+  const warned = new Set<string>()
+  const warn = options.warn ?? ((message: string) => {
+    if (import.meta.dev) {
+      console.warn(message)
+    }
+  })
+
+  function lookup(key: string): {
+ message: string
+locale: string
+} | undefined {
+    const locale = options.locale()
+    const active = options.messages(locale)?.[key]
+    if (active !== undefined) {
+      return { message: active, locale }
+    }
+    const fallback = options.messages(fallbackLocale)?.[key]
+    if (fallback !== undefined) {
+      return { message: fallback, locale: fallbackLocale }
+    }
+    return undefined
+  }
+
+  function t(key: string, params?: MessageParams | number): string {
+    const found = lookup(key)
+    if (!found) {
+      if (!warned.has(key)) {
+        warned.add(key)
+        warn(`[pluto-i18n] Missing translation key "${key}".`)
+      }
+      return key
+    }
+    const values: MessageParams = typeof params === 'number' ? { count: params } : (params ?? {})
+    let message = found.message
+    if (message.includes(PLURAL_SEPARATOR)) {
+      const count = Number(values.count)
+      message = selectPlural(message, Number.isNaN(count) ? 1 : count, found.locale)
+    }
+    return interpolate(message, values)
+  }
+
+  function te(key: string): boolean {
+    return lookup(key) !== undefined
+  }
+
+  function tx(value: string, params?: MessageParams | number): string {
+    return isMessageKey(value) && te(value) ? t(value, params) : value
+  }
+
+  return { t, te, tx }
+}
+
+/** Deep-merges message trees. A later tree overrides an earlier one. */
+export function mergeMessageTrees(...trees: MessageTree[]): MessageTree {
+  const result: MessageTree = {}
+  for (const tree of trees) {
+    for (const [key, value] of Object.entries(tree)) {
+      const current = result[key]
+      if (typeof value === 'object' && value !== null) {
+        result[key] = mergeMessageTrees(typeof current === 'object' && current !== null ? current : {}, value)
+      } else {
+        result[key] = value
+      }
+    }
+  }
+  return result
+}
+
+export interface LocaleCache<T> {
+  /** Reactive read. Returns undefined until the locale is loaded. */
+  get: (locale: string) => T | undefined
+  /** Loads a locale once. Many calls share one promise. */
+  load: (locale: string) => Promise<void>
+}
+
+/**
+ * A cache of per-locale data (messages, or a Nuxt UI locale object), filled
+ * by async loaders. `get` is reactive, so a translation updates when its
+ * locale finishes loading.
+ */
+export function createLocaleCache<T, R = T>(
+  loaders: Record<string, () => Promise<R>>,
+  transform: (value: R) => T
+): LocaleCache<T> {
+  const store = shallowReactive(new Map<string, T>())
+  const pending = new Map<string, Promise<void>>()
+
+  function load(locale: string): Promise<void> {
+    if (store.has(locale)) {
+      return Promise.resolve()
+    }
+    const loader = loaders[locale]
+    if (!loader) {
+      return Promise.resolve()
+    }
+    let promise = pending.get(locale)
+    if (!promise) {
+      promise = loader()
+        .then((value) => {
+          store.set(locale, transform(value))
+        })
+        .finally(() => {
+          pending.delete(locale)
+        })
+      pending.set(locale, promise)
+    }
+    return promise
+  }
+
+  return { get: (locale) => store.get(locale), load }
+}
+
+const numberFormats = new Map<string, Intl.NumberFormat>()
+const dateFormats = new Map<string, Intl.DateTimeFormat>()
+
+/** Formats a number. The `Intl` formatter is cached per locale and options. */
+export function formatNumber(locale: string, value: number, options?: Intl.NumberFormatOptions): string {
+  const key = `${locale}|${JSON.stringify(options ?? {})}`
+  let format = numberFormats.get(key)
+  if (!format) {
+    format = new Intl.NumberFormat(locale, options)
+    numberFormats.set(key, format)
+  }
+  return format.format(value)
+}
+
+/** Formats a date. The `Intl` formatter is cached per locale and options. */
+export function formatDate(locale: string, value: Date | number | string, options?: Intl.DateTimeFormatOptions): string {
+  const key = `${locale}|${JSON.stringify(options ?? {})}`
+  let format = dateFormats.get(key)
+  if (!format) {
+    format = new Intl.DateTimeFormat(locale, options)
+    dateFormats.set(key, format)
+  }
+  return format.format(value instanceof Date ? value : new Date(value))
+}
+
+/**
+ * Returns the name of a language in its own language, first letter in
+ * capitals. Example: `pt-BR` gives "Português (Brasil)".
+ */
+export function getLanguageName(code: string): string {
+  let name = code
+  try {
+    name = new Intl.DisplayNames([code], { type: 'language' }).of(code) ?? code
+  } catch {
+    // An invalid code keeps the code as the name.
+  }
+  return name.charAt(0).toLocaleUpperCase(code) + name.slice(1)
+}
+
+/**
+ * Parses an `Accept-Language` header into language tags, best first. A tag
+ * with `q=0` is dropped.
+ */
+export function parseAcceptLanguage(header: string | undefined): string[] {
+  if (!header) {
+    return []
+  }
+  return header
+    .split(',')
+    .map((part, index) => {
+      const [tag = '', ...params] = part.trim().split(';')
+      const q = params.map((param) => /^\s*q=([\d.]+)\s*$/.exec(param)?.[1]).find(Boolean)
+      return { tag: tag.trim(), q: q === undefined ? 1 : Number(q), index }
+    })
+    .filter((entry) => entry.tag && entry.tag !== '*' && entry.q > 0)
+    .sort((a, b) => b.q - a.q || a.index - b.index)
+    .map((entry) => entry.tag)
+}
+
+/**
+ * Matches the requested language tags to the supported locale codes. For each
+ * tag, in order: an exact match (ignoring case), then the first supported
+ * code with the same base language. Returns null if nothing matches.
+ */
+export function matchLocale(requested: string[], supported: string[]): string | null {
+  const lower = new Map(supported.map((code) => [code.toLowerCase(), code]))
+  for (const tag of requested) {
+    const exact = lower.get(tag.toLowerCase())
+    if (exact) {
+      return exact
+    }
+    const base = tag.toLowerCase().split('-')[0]!
+    const byBase = supported.find((code) => code.toLowerCase().split('-')[0] === base)
+    if (byBase) {
+      return byBase
+    }
+  }
+  return null
+}

package/app/composables/internal/i18n-runtime.ts

@@ -0,0 +1,87 @@
+// The Nuxt-aware part of the i18n engine: the shared caches, the language
+// detection, and the first-locale resolve. It sits under `internal/` so it
+// stays out of auto-import. The pure part is in `i18n-core.ts`.
+import type { Locale, Messages } from '@nuxt/ui'
+import type { FlatMessages, MessageTree } from './i18n-core'
+import { markRaw } from 'vue'
+import { defaultLocale, messageLoaders, uiLocaleLoaders } from '#build/pluto-i18n.mjs'
+import { useCookie, useRequestHeaders, useRuntimeConfig } from '#imports'
+import { createLocaleCache, flattenMessages, matchLocale, parseAcceptLanguage } from './i18n-core'
+
+/** Cookie names. The admin and the site keep a separate locale. */
+export const ADMIN_LOCALE_COOKIE = 'pluto-admin-locale'
+export const SITE_LOCALE_COOKIE = 'pluto-site-locale'
+
+const COOKIE_OPTIONS = { maxAge: 60 * 60 * 24 * 365, path: '/', sameSite: 'lax' } as const
+
+/**
+ * One message cache for both scopes. Messages never change per request, so
+ * a module-level cache is safe on the server too.
+ */
+export const messageCache = createLocaleCache<FlatMessages, MessageTree>(
+  messageLoaders as Record<string, () => Promise<MessageTree>>,
+  flattenMessages
+)
+
+/** The Nuxt UI locale objects, for `UApp :locale`. */
+export const uiLocaleCache = createLocaleCache<Locale<Messages>>(
+  uiLocaleLoaders as Record<string, () => Promise<Locale<Messages>>>,
+  (locale) => markRaw(locale)
+)
+
+/** Loads the messages and the Nuxt UI locale of a locale, and of `en` for the fallback. */
+export async function loadPlutoLocale(code: string): Promise<void> {
+  await Promise.all([
+    messageCache.load(code),
+    messageCache.load('en'),
+    uiLocaleCache.load(code),
+    uiLocaleCache.load('en'),
+  ])
+}
+
+export function getConfig() {
+  return useRuntimeConfig().public.plutoI18n
+}
+
+export function useLocaleCookie(name: string) {
+  return useCookie<string | null>(name, { ...COOKIE_OPTIONS, default: () => null })
+}
+
+/**
+ * The visitor's language tags, best first. On the server, from the
+ * `Accept-Language` header. On the client, from `navigator.languages`. The
+ * server never reads `navigator`.
+ */
+export function getBrowserLanguages(): string[] {
+  if (import.meta.server) {
+    return parseAcceptLanguage(useRequestHeaders(['accept-language'])['accept-language'])
+  }
+  return typeof navigator === 'undefined' ? [] : [...navigator.languages]
+}
+
+/** The admin locale from the browser language alone: no cookie, no stored choice. */
+export function detectAdminLocale(): string {
+  const config = getConfig()
+  return matchLocale(getBrowserLanguages(), config.adminLocales) ?? config.defaultLocale
+}
+
+/** A stored admin choice, or null. Only a supported code counts. */
+export function readAdminPreference(): string | null {
+  const value = useLocaleCookie(ADMIN_LOCALE_COOKIE).value
+  return value && getConfig().adminLocales.includes(value) ? value : null
+}
+
+/** Admin order: cookie, browser language, default locale. */
+export function resolveAdminLocale(): string {
+  return readAdminPreference() ?? detectAdminLocale()
+}
+
+/** Site order: cookie, the `siteLocale` option, default locale. */
+export function resolveSiteLocale(): string {
+  const config = getConfig()
+  const cookie = useLocaleCookie(SITE_LOCALE_COOKIE).value
+  if (cookie && config.siteLocales.includes(cookie)) {
+    return cookie
+  }
+  return config.siteLocale || config.defaultLocale || defaultLocale
+}