From a59ae4ce55b99c677809a24cd4677dcde45bf3d1 Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Mon, 11 May 2026 09:58:38 +0200
Subject: [PATCH 1/5] fix(types-builder): log compiledLayout options before
 attaching schemas

The `compiledLayout {locale} options: ...` log was huge because it ran
after `schemaVjsfOpts.ajvOptions = { schemas: otherSchemas }`, which
serialized the entire schema collection. Move the log right after the
`delete schemaVjsfOpts.compName` line, before any mutation of
`schemaVjsfOpts`, matching the pattern used in the `vjsf` section.
---
 packages/types-builder/build.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/types-builder/build.ts b/packages/types-builder/build.ts
index ac17fea..df2f7d0 100755
--- a/packages/types-builder/build.ts
+++ b/packages/types-builder/build.ts
@@ -359,6 +359,7 @@ const emit = defineEmits(emits)
         for (const locale of vjsfLocales) {
           const schemaVjsfOpts = { ...schema['x-vjsf'] }
           delete schemaVjsfOpts.compName
+          console.log(`  compiledLayout ${locale} options: ${JSON.stringify(schemaVjsfOpts)}`)
           const otherSchemas = { ...schemas }
           for (const [key, otherSchema] of Object.entries(schemas)) {
             if (key === schema.$id) continue
@@ -375,7 +376,6 @@ const emit = defineEmits(emits)
             fullOptions.components[componentInfo.name] = componentInfo
           }
 
-          console.log(`  compiledLayout ${locale} options: ${JSON.stringify(schemaVjsfOpts)}`)
           const compiledLayout = compileLayout(schema, fullOptions)
           let compiledLayoutCode = await serializeCompiledLayout(compiledLayout)
           // The serialized code declares `const compiledLayout = {...}`.

From 144aa90f52ece1d0942dfe52546f654510ec8da0 Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Mon, 11 May 2026 10:11:04 +0200
Subject: [PATCH 2/5] fix(lib-vuetify): capitalize i18n labels in personal-menu
 and theme-switcher

- Admin mode toggle label (fr/en) now starts with a capital letter.
- Theme switcher options (default, dark, high contrast, dark and high contrast)
  now start with a capital letter in both locales.
- Drop the dead `darkMode` i18n key from personal-menu (never referenced via t()).
---
 packages/vuetify/personal-menu.vue  |  6 ++----
 packages/vuetify/theme-switcher.vue | 16 ++++++++--------
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/packages/vuetify/personal-menu.vue b/packages/vuetify/personal-menu.vue
index 83e0410..508349c 100644
--- a/packages/vuetify/personal-menu.vue
+++ b/packages/vuetify/personal-menu.vue
@@ -182,9 +182,8 @@ fr:
   openPersonalMenu: Ouvrez le menu personnel
   personalAccount: Compte personnel
   switchAccount: Changer de compte
-  adminMode: mode admin
+  adminMode: Mode admin
   backToAdmin: Revenir à ma session administrateur
-  darkMode: mode nuit
   plannedDeletion: La suppression de l'utilisateur {name} et toutes ses informations est programmée le {plannedDeletion}.
   cancelDeletion: Annuler la suppression de l'utilisateur
 en:
@@ -193,9 +192,8 @@ en:
   openPersonalMenu: Open personal menu
   personalAccount: Personal account
   switchAccount: Switch account
-  adminMode: admin mode
+  adminMode: Admin mode
   backToAdmin: Return to administrator session
-  darkMode: night mode
   plannedDeletion: The deletion of the user {name} and all its data is planned on the {plannedDeletion}.
   cancelDeletion: Cancel the deletion of the user
 </i18n>
diff --git a/packages/vuetify/theme-switcher.vue b/packages/vuetify/theme-switcher.vue
index 16f18cd..3b80c45 100644
--- a/packages/vuetify/theme-switcher.vue
+++ b/packages/vuetify/theme-switcher.vue
@@ -39,17 +39,17 @@
 fr:
   themeSwitch: Changer de thème
   theme:
-    default: par défaut
-    dark: sombre
-    hc: contraste élevé
-    hcDark: sombre et contraste élevé
+    default: Par défaut
+    dark: Sombre
+    hc: Contraste élevé
+    hcDark: Sombre et contraste élevé
 en:
   themeSwitch: Change theme
   theme:
-    default: default
-    dark: dark
-    hc: high contrast
-    hcDark: dark and high contrast
+    default: Default
+    dark: Dark
+    hc: High contrast
+    hcDark: Dark and high contrast
 </i18n>
 
 <script setup lang="ts">

From 5b6e8cc156af77d8cb6771314cace63b500b07d2 Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Mon, 11 May 2026 10:14:03 +0200
Subject: [PATCH 3/5] feat(lib-vue,lib-vuetify): add 'system' theme option
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Previously the OS theme preference (prefers-color-scheme, forced-colors) was
only consulted once on the very first visit; after that the resolved value was
locked in the `theme` cookie and never re-evaluated. On mobile devices that
toggle light/dark over the day, the chosen theme could not follow the OS.

- Add `'system'` to the `Theme` union and store it explicitly in the cookie.
- New `resolveTheme()` helper derives the effective theme via `getDefaultTheme`
  when the user is on 'system' (or when the cookie is absent, which is now
  treated as an implicit 'system' choice).
- Listen to `prefers-color-scheme` and `forced-colors` matchMedia changes and
  re-apply the theme reactively while the user is on 'system' — no reload.
- Expose a 'system' radio option in the theme-switcher (i18n: Système / System).

simple-directory does not read the theme cookie server-side (verified across
its api/ and ui/ sources) and reuses lib-vuetify's theme-switcher directly, so
the new cookie value is transparently handled there too.
---
 packages/vue/session.ts             | 35 ++++++++++++++++++++++-------
 packages/vuetify/theme-switcher.vue |  5 ++++-
 2 files changed, 31 insertions(+), 9 deletions(-)

diff --git a/packages/vue/session.ts b/packages/vue/session.ts
index dbe62db..41fd02c 100644
--- a/packages/vue/session.ts
+++ b/packages/vue/session.ts
@@ -82,7 +82,8 @@ export interface SiteInfo {
   owner: AccountKeys
 }
 
-type Theme = 'default' | 'dark' | 'hc' | 'hc-dark'
+type AppliedTheme = 'default' | 'dark' | 'hc' | 'hc-dark'
+type Theme = AppliedTheme | 'system'
 
 export interface Session {
   state: SessionState
@@ -120,16 +121,21 @@ export type SessionAuthenticated = Omit<Session, 'state' | 'user' | 'account' |
 const debug = Debug('session')
 debug.log = console.log.bind(console)
 
-function getDefaultTheme (site: FullSiteInfo): Theme {
+function getDefaultTheme (site: FullSiteInfo): AppliedTheme {
   // see https://www.scottohara.me/blog/2021/10/01/detect-high-contrast-and-dark-modes.html
-  const preferDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-  const preferHC = window.matchMedia && window.matchMedia('(forced-colors: active)').matches
+  const preferDark = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
+  const preferHC = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(forced-colors: active)').matches
   if (site.theme.hcDark && preferDark && preferHC) return 'hc-dark'
   if (site.theme.hc && preferHC) return 'hc'
   if (site.theme.dark && preferDark) return 'dark'
   return 'default'
 }
 
+function resolveTheme (userTheme: Theme | null, site: FullSiteInfo): AppliedTheme {
+  if (userTheme && userTheme !== 'system') return userTheme
+  return getDefaultTheme(site)
+}
+
 function jwtDecodeAlive (jwt: string | null): User | undefined {
   if (!jwt) return
   const decoded = jwtDecode(jwt) as any
@@ -403,6 +409,9 @@ export async function getSession (initOptions: Partial<SessionOptions>): Promise
   const setSiteInfo = (siteInfo: any) => {
     if (siteInfo.theme) {
       fullSite.value = siteInfo
+      // an absent cookie is treated as an implicit 'system' choice so the
+      // theme-switcher radio has a value to bind to.
+      if (theme.value == null) theme.value = 'system'
       const partialSite: SiteInfo = {
         main: siteInfo.main,
         isAccountMain: siteInfo.isAccountMain,
@@ -412,13 +421,13 @@ export async function getSession (initOptions: Partial<SessionOptions>): Promise
         authOnlyOtherSite: siteInfo.authOnlyOtherSite,
         owner: siteInfo.owner
       }
-      if (theme.value == null) theme.value = getDefaultTheme(siteInfo)
-      if (theme.value === 'hc') partialSite.colors = siteInfo.theme.hcColors
-      if (theme.value === 'dark') {
+      const applied = resolveTheme(theme.value, siteInfo)
+      if (applied === 'hc') partialSite.colors = siteInfo.theme.hcColors
+      if (applied === 'dark') {
         partialSite.colors = siteInfo.theme.darkColors
         partialSite.dark = true
       }
-      if (theme.value === 'hc-dark') {
+      if (applied === 'hc-dark') {
         partialSite.colors = siteInfo.theme.hcDarkColors
         partialSite.dark = true
       }
@@ -433,6 +442,16 @@ export async function getSession (initOptions: Partial<SessionOptions>): Promise
   // @ts-ignore
   if (!ssr && window.__PUBLIC_SITE_INFO) setSiteInfo(window.__PUBLIC_SITE_INFO)
 
+  // re-apply the theme when the OS preference changes while the user is on
+  // 'system'. Important for mobile devices that switch light/dark over the day.
+  if (!ssr && typeof window !== 'undefined' && window.matchMedia) {
+    const onOsPrefChange = () => {
+      if (theme.value === 'system' && fullSite.value) setSiteInfo(fullSite.value)
+    }
+    window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', onOsPrefChange)
+    window.matchMedia('(forced-colors: active)').addEventListener('change', onOsPrefChange)
+  }
+
   // immediately performs a keepalive, but only on top windows (not iframes or popups)
   // and only if it was not done very recently (maybe from a refreshed page next to this one)
   // also run an auto-refresh loop
diff --git a/packages/vuetify/theme-switcher.vue b/packages/vuetify/theme-switcher.vue
index 3b80c45..b57abb3 100644
--- a/packages/vuetify/theme-switcher.vue
+++ b/packages/vuetify/theme-switcher.vue
@@ -22,8 +22,9 @@
             color="primary"
             hide-details
             :label="t('themeSwitch')"
-            @update:modelValue="value => session.switchTheme(value as 'default' | 'dark' | 'hc' | 'hc-dark')"
+            @update:modelValue="value => session.switchTheme(value as 'default' | 'dark' | 'hc' | 'hc-dark' | 'system')"
           >
+            <v-radio :label="t('theme.system')" value="system"></v-radio>
             <v-radio :label="t('theme.default')" value="default"></v-radio>
             <v-radio v-if="session.fullSite.value?.theme.dark" :label="t('theme.dark')" value="dark"></v-radio>
             <v-radio v-if="session.fullSite.value?.theme.hc":label="t('theme.hc')" value="hc"></v-radio>
@@ -39,6 +40,7 @@
 fr:
   themeSwitch: Changer de thème
   theme:
+    system: Système
     default: Par défaut
     dark: Sombre
     hc: Contraste élevé
@@ -46,6 +48,7 @@ fr:
 en:
   themeSwitch: Change theme
   theme:
+    system: System
     default: Default
     dark: Dark
     hc: High contrast

From 748a66304c2ff397ccfc30c3df40b56e6ee2bd3d Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Mon, 11 May 2026 10:19:28 +0200
Subject: [PATCH 4/5] fix(lib-vuetify): offer root-of-org switch when
 department resource is forbidden

The 403 "switch account" affordance in layout-fetch-error only matched user
memberships when their department exactly equalled the resource's
`x-owner.department`. A user who only had access at the root of the
organization was therefore never offered a switch, even though root access
generally grants visibility over department-scoped resources in
simple-directory's authz model.

- Match the exact department first, then fall back to a root membership of
  the same organization when the resource lives in a department.
- Exclude the current account from candidates so the button is not offered
  when switching would be a no-op.
---
 packages/vuetify/layout-fetch-error.vue | 24 ++++++++++++++++++++----
 1 file changed, 20 insertions(+), 4 deletions(-)

diff --git a/packages/vuetify/layout-fetch-error.vue b/packages/vuetify/layout-fetch-error.vue
index f56e0bc..57d10fe 100644
--- a/packages/vuetify/layout-fetch-error.vue
+++ b/packages/vuetify/layout-fetch-error.vue
@@ -64,7 +64,7 @@ const { error, backTo = '/', backLabel } = defineProps<{
 }>()
 
 const { t } = useI18n({ useScope: 'local' })
-const { switchOrganization, user } = useSession()
+const { switchOrganization, user, account } = useSession()
 
 const statusCode = computed(() => error?.statusCode ?? error?.status ?? 500)
 
@@ -99,9 +99,25 @@ const switchOrg = computed(() => {
   try { owner = JSON.parse(rawOwner) } catch { return null }
   if (!owner || owner.type !== 'organization' || !owner.id) return null
 
-  return user.value.organizations?.find(o =>
-    o.id === owner!.id && (o.department ?? undefined) === (owner!.department ?? undefined)
-  ) ?? null
+  const orgs = user.value.organizations ?? []
+  const ownerDept = owner.department ?? undefined
+  const isCurrentAccount = (o: { id: string, department?: string }) =>
+    account.value?.type === 'organization' &&
+    account.value.id === o.id &&
+    (account.value.department ?? undefined) === (o.department ?? undefined)
+
+  // Prefer a membership matching the resource's department exactly...
+  const exact = orgs.find(o =>
+    o.id === owner!.id && (o.department ?? undefined) === ownerDept && !isCurrentAccount(o)
+  )
+  if (exact) return exact
+  // ...otherwise fall back to a membership at the organization root: in
+  // simple-directory's authz model, root access generally grants visibility
+  // over department-scoped resources.
+  if (ownerDept) {
+    return orgs.find(o => o.id === owner!.id && !o.department && !isCurrentAccount(o)) ?? null
+  }
+  return null
 })
 
 const doSwitch = () => {

From ff47ea00b89945bea5ec925339481ea6ea4f1a8c Mon Sep 17 00:00:00 2001
From: BatLeDev <baptiste.guerny@koumoul.com>
Date: Tue, 19 May 2026 15:55:09 +0200
Subject: [PATCH 5/5] feat(lib-vue,lib-vuetify): export resolveTheme and allow
 theme-switcher host-provided theme offers

---
 packages/vue/session.ts             | 48 +++++++++++++++++++----------
 packages/vuetify/index.ts           |  9 ++++--
 packages/vuetify/theme-switcher.vue | 31 +++++++++++++------
 3 files changed, 60 insertions(+), 28 deletions(-)

diff --git a/packages/vue/session.ts b/packages/vue/session.ts
index 41fd02c..bbbbc75 100644
--- a/packages/vue/session.ts
+++ b/packages/vue/session.ts
@@ -57,16 +57,16 @@ export interface Colors {
   'on-admin': string
 }
 
-interface FullSiteInfo {
+export interface FullSiteInfo {
   main?: boolean
   theme: {
     logo?: string
     colors: Colors
-    dark: boolean
+    dark?: boolean
     darkColors?: Colors
-    hc: boolean
+    hc?: boolean
     hcColors?: Colors
-    hcDark: boolean
+    hcDark?: boolean
     hcDarkColors?: Colors
   }
 }
@@ -82,8 +82,14 @@ export interface SiteInfo {
   owner: AccountKeys
 }
 
-type AppliedTheme = 'default' | 'dark' | 'hc' | 'hc-dark'
-type Theme = AppliedTheme | 'system'
+export type AppliedTheme = 'default' | 'dark' | 'hc' | 'hc-dark'
+// `theme` cookie semantics:
+//  - absent: implicit 'system' (no choice made yet)
+//  - 'system': explicit "follow the OS preference"
+//  - other: explicit override
+// In both 'system' cases the applied theme is computed at runtime via
+// resolveTheme() using prefers-color-scheme + forced-colors.
+export type Theme = AppliedTheme | 'system'
 
 export interface Session {
   state: SessionState
@@ -121,7 +127,23 @@ export type SessionAuthenticated = Omit<Session, 'state' | 'user' | 'account' |
 const debug = Debug('session')
 debug.log = console.log.bind(console)
 
-function getDefaultTheme (site: FullSiteInfo): AppliedTheme {
+// loose shape: hosts whose Colors are partially optional (e.g. portal config) can pass their own type
+export type ThemeOffers = {
+  theme: {
+    dark?: boolean
+    hc?: boolean
+    hcDark?: boolean
+  }
+}
+
+/**
+ * Resolves a user theme preference to a concrete AppliedTheme — returns the explicit choice when set,
+ * otherwise picks the best variant offered by `site` based on the OS `prefers-color-scheme` / `forced-colors`
+ * media queries. Always call this before handing a theme name to Vuetify: its built-in `'system'` defaultTheme
+ * bypasses custom themes and falls back to its own light/dark.
+ */
+export function resolveTheme (userTheme: Theme | null, site: ThemeOffers): AppliedTheme {
+  if (userTheme && userTheme !== 'system') return userTheme
   // see https://www.scottohara.me/blog/2021/10/01/detect-high-contrast-and-dark-modes.html
   const preferDark = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
   const preferHC = typeof window !== 'undefined' && window.matchMedia && window.matchMedia('(forced-colors: active)').matches
@@ -131,11 +153,6 @@ function getDefaultTheme (site: FullSiteInfo): AppliedTheme {
   return 'default'
 }
 
-function resolveTheme (userTheme: Theme | null, site: FullSiteInfo): AppliedTheme {
-  if (userTheme && userTheme !== 'system') return userTheme
-  return getDefaultTheme(site)
-}
-
 function jwtDecodeAlive (jwt: string | null): User | undefined {
   if (!jwt) return
   const decoded = jwtDecode(jwt) as any
@@ -200,7 +217,9 @@ export async function getSession (initOptions: Partial<SessionOptions>): Promise
   // cookies are the source of truth and this information is transformed into the state reactive object
   const cookies = initOptions?.cookies ?? new Cookies(options.req?.headers.cookie)
   const readState = () => {
-    theme.value = cookies.get('theme') ?? null
+    // absent cookie is treated as implicit 'system' so consumers (theme-switcher
+    // radios, host plugins) always have a meaningful value to bind to.
+    theme.value = (cookies.get('theme') as Theme | undefined) ?? 'system'
 
     const langCookie = cookies.get('i18n_lang')
     state.lang = langCookie ?? options.defaultLang
@@ -409,9 +428,6 @@ export async function getSession (initOptions: Partial<SessionOptions>): Promise
   const setSiteInfo = (siteInfo: any) => {
     if (siteInfo.theme) {
       fullSite.value = siteInfo
-      // an absent cookie is treated as an implicit 'system' choice so the
-      // theme-switcher radio has a value to bind to.
-      if (theme.value == null) theme.value = 'system'
       const partialSite: SiteInfo = {
         main: siteInfo.main,
         isAccountMain: siteInfo.isAccountMain,
diff --git a/packages/vuetify/index.ts b/packages/vuetify/index.ts
index cdf8586..fd32cd8 100644
--- a/packages/vuetify/index.ts
+++ b/packages/vuetify/index.ts
@@ -1,4 +1,4 @@
-import { type Session } from '@data-fair/lib-vue/session.js'
+import { resolveTheme, type Session } from '@data-fair/lib-vue/session.js'
 import { VuetifyOptions } from 'vuetify'
 import { fr, en } from 'vuetify/locale'
 
@@ -20,6 +20,9 @@ const baseDarkColors = {
 export function vuetifySessionOptions (session: Session, cspNonce?: string): VuetifyOptions {
   if (!session.site.value) throw new Error('vuetifySessionOptions requires fetching site info in session util')
   const colors = { ...baseColors, ...session.site.value?.colors }
+  const themeName = session.fullSite.value
+    ? resolveTheme(session.theme.value, session.fullSite.value)
+    : 'default'
   return {
     ssr: false,
     locale: {
@@ -28,9 +31,9 @@ export function vuetifySessionOptions (session: Session, cspNonce?: string): Vue
     },
     theme: {
       cspNonce,
-      defaultTheme: session.theme.value ?? 'default',
+      defaultTheme: themeName,
       themes: {
-        [session.theme.value ?? 'default']: {
+        [themeName]: {
           dark: session.site.value?.dark,
           colors,
           variables: {
diff --git a/packages/vuetify/theme-switcher.vue b/packages/vuetify/theme-switcher.vue
index b57abb3..d9bb460 100644
--- a/packages/vuetify/theme-switcher.vue
+++ b/packages/vuetify/theme-switcher.vue
@@ -1,20 +1,20 @@
 <template>
-  <v-toolbar-items class="theme-switcher" v-if="session.fullSite.value?.theme.dark || session.fullSite.value?.theme.hc || session.fullSite.value?.theme.hcDark">
+  <v-toolbar-items v-if="hasDark || hasHc || hasHcDark">
     <v-menu
       offset-y
       class="ml-n4"
       style="z-index: 2600; /* Higher than agent-chat's 2500 */"
     >
-      <template #activator="{props: activatorProps}">
+      <template #activator="{ props }">
         <v-btn
-          class="px-0"
-          :icon="mdiThemeLightDark"
+          v-bind="props"
           :title="t('themeSwitch')"
-          v-bind="activatorProps"
+          :icon="mdiThemeLightDark"
+          stacked
         />
       </template>
 
-      <v-list class="border-sm">
+      <v-list>
         <v-list-item density="compact" class="pl-0">
           <v-radio-group
             :model-value="session.theme.value"
@@ -26,9 +26,9 @@
           >
             <v-radio :label="t('theme.system')" value="system"></v-radio>
             <v-radio :label="t('theme.default')" value="default"></v-radio>
-            <v-radio v-if="session.fullSite.value?.theme.dark" :label="t('theme.dark')" value="dark"></v-radio>
-            <v-radio v-if="session.fullSite.value?.theme.hc":label="t('theme.hc')" value="hc"></v-radio>
-            <v-radio v-if="session.fullSite.value?.theme.hcDark" :label="t('theme.hcDark')" value="hc-dark"></v-radio>
+            <v-radio v-if="hasDark" :label="t('theme.dark')" value="dark"></v-radio>
+            <v-radio v-if="hasHc" :label="t('theme.hc')" value="hc"></v-radio>
+            <v-radio v-if="hasHcDark" :label="t('theme.hcDark')" value="hc-dark"></v-radio>
           </v-radio-group>
         </v-list-item>
       </v-list>
@@ -56,13 +56,26 @@ en:
 </i18n>
 
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useSession } from '@data-fair/lib-vue/session.js'
 import { useI18n } from 'vue-i18n'
 import { mdiThemeLightDark } from '@mdi/js'
 
+// Optional `theme` lets hosts that don't expose their config through
+// session.fullSite (e.g. the public Nuxt portal, where the theme lives in
+// portalConfig) drive which radios are shown. Falls back to
+// session.fullSite.value?.theme — the historical behaviour for data-fair UIs.
+const props = defineProps<{
+  theme?: { dark?: boolean, hc?: boolean, hcDark?: boolean }
+}>()
 
 const session = useSession()
 
+const effectiveTheme = computed(() => props.theme ?? session.fullSite.value?.theme)
+const hasDark = computed(() => !!effectiveTheme.value?.dark)
+const hasHc = computed(() => !!effectiveTheme.value?.hc)
+const hasHcDark = computed(() => !!effectiveTheme.value?.hcDark)
+
 const { t } = useI18n({ useScope: 'local' })
 </script>