@sinequa/atomic-angular 2.2.0 → 2.3.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, ChangeDetectorRef, Component, DOCUMENT, DestroyRef, Directive, ElementRef, EnvironmentInjector, HostBinding, HostListener, Inject, Injectable, InjectionToken, Injector, LOCALE_ID, Optional, Pipe, Service, TemplateRef, ViewEncapsulation, afterNextRender, afterRenderEffect, assertInInjectionContext, booleanAttribute, computed, contentChild, contentChildren, effect, inject, input, isDevMode, linkedSignal, makeEnvironmentProviders, model, numberAttribute, output, provideEnvironmentInitializer, resource, runInInjectionContext, signal, untracked, viewChild, viewChildren } from "@angular/core";
-import { BehaviorSubject, EMPTY, Subject, Subscription, catchError, debounceTime, filter, firstValueFrom, from, fromEvent, map, of, shareReplay, switchMap, tap, throwError } from "rxjs";
+import { BehaviorSubject, EMPTY, Subject, Subscription, catchError, debounceTime, filter, firstValueFrom, from, fromEvent, map, of, scan, shareReplay, switchMap, tap, throwError } from "rxjs";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
-import { ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BookmarkIcon, BreakpointObserverService, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListFilterIcon, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SlashIcon, SlidersIcon, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef } from "@sinequa/galactik";
+import { ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BookmarkIcon, BreakpointObserverService, ButtonComponent, CalendarDayIcon, CheckIcon, CheckboxComponent, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronsLeftIcon, ChevronsRightIcon, CircleCheckIcon, CommentIcon, CommentsIcon, DIALOG_REF, DesktopIcon, DialogBodyComponent, DialogComponent, DialogContentComponent, DialogDescriptionComponent, DialogFooterComponent, DialogHeaderComponent, DialogTitleComponent, DropdownDirective, EditIcon, EllipsisIcon, EllipsisVerticalIcon, EyeIcon, EyeSlashIcon, FileHTMLIcon, FileIcon, FileOutputIcon, FileSpreadsheetIcon, FileTextIcon, FilterIcon, FilterXIcon, FlagEnglishIcon, FlagFrenchIcon, FlagGermanIcon, FlashlightIcon, FolderIcon, FolderOpenIcon, FrownIcon, GearIcon, GitForkIcon, GlobeIcon, HighlighterIcon, HistoryIcon, HomeIcon, ImageIcon, InboxIcon, InfoCircleIcon, InputComponent, InputControlDirective, InputIconRightDirective, KbdComponent, KbdGroupComponent, KeyIcon, KeyboardIcon, LanguageIcon, LightbulbIcon, LightbulbSlashIcon, LinkComponent, ListComponent, ListFilterIcon, ListItemActionComponent, ListItemAvatarDirective, ListItemComponent, ListItemLeftDirective, ListItemTextComponent, LoadingCircleIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SlashIcon, SlidersIcon, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef } from "@sinequa/galactik";
 import { withDevtools } from "@angular-architects/ngrx-toolkit";
 import { getState, patchState, signalStore, signalStoreFeature, withComputed, withMethods, withState } from "@ngrx/signals";
 import { ActivatedRoute, NavigationEnd, Router, RouterLink, RouterModule } from "@angular/router";
@@ -20658,9 +20658,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}] }
 });
 const FeatureFlags = createCallable(FeatureFlagsDialogComponent);
-var KeyboardShortcutsDialogComponent = class KeyboardShortcutsDialogComponent {
-	call = injectCallRef();
-	dialog = viewChild(DialogComponent, ...ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []);
+var KeyboardShortcutsListComponent = class KeyboardShortcutsListComponent {
 	keyboard = inject(KeyboardShortcutsService);
 	groups = computed(() => {
 		const listed = this.keyboard.shortcuts().filter((shortcut) => !shortcut.hidden && shortcut.labelKey);
@@ -20675,6 +20673,146 @@ var KeyboardShortcutsDialogComponent = class KeyboardShortcutsDialogComponent {
 			items
 		}));
 	}, ...ngDevMode ? [{ debugName: "groups" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: KeyboardShortcutsListComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: KeyboardShortcutsListComponent,
+		isStandalone: true,
+		selector: "keyboard-shortcuts-list",
+		providers: [provideTranslocoScope("dialogs")],
+		ngImport: i0,
+		template: `
+    @if (groups().length === 0) {
+      <p>{{ "dialogs.keyboardShortcuts.empty" | transloco }}</p>
+    }
+
+    @for (group of groups(); track group.titleKey ?? "") {
+      @if (group.titleKey) {
+        <h3 class="mt-(--spacing-md) mb-(--spacing-4xs) text-(length:--size-lg) font-semibold first:mt-0">{{ group.titleKey | transloco }}</h3>
+      }
+      <dl>
+        @for (shortcut of group.items; track shortcut) {
+          <div class="flex items-center justify-between gap-(--spacing-md) py-(--spacing-4xs)">
+            <dt>{{ shortcut.labelKey! | transloco }}</dt>
+            <dd class="flex items-center gap-(--spacing-3xs)">
+              <!-- One group per combination: a shortcut may answer to several (Alt+0 and
+                   Shift+?). The group carries the whole combination as its name and the keys
+                   are hidden, otherwise a screen reader reads out every key and separator as
+                   a separate item. -->
+              <!-- comboIndex is captured explicitly: inside the nested loop $index would
+                   refer to the keys, not to the combination.
+                   (No backticks in this comment: the template is a template literal.) -->
+              @for (aria of shortcut.aria; track aria; let first = $first, comboIndex = $index) {
+                @if (!first) {
+                  <span aria-hidden="true">{{ "dialogs.keyboardShortcuts.or" | transloco }}</span>
+                }
+                <KbdGroup [attr.aria-label]="aria">
+                  @for (part of shortcut.displayParts[comboIndex]; track $index; let firstPart = $first) {
+                    @if (!firstPart) {
+                      <span aria-hidden="true">+</span>
+                    }
+                    <kbd aria-hidden="true">{{ part }}</kbd>
+                  }
+                </KbdGroup>
+              }
+            </dd>
+          </div>
+        }
+      </dl>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: KbdComponent,
+				selector: "kbd, Kbd",
+				inputs: ["class", "size"]
+			},
+			{
+				kind: "directive",
+				type: KbdGroupComponent,
+				selector: "kbd-group, kbdgroup, KbdGroup"
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			}
+		],
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: KeyboardShortcutsListComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "keyboard-shortcuts-list",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			imports: [
+				TranslocoPipe,
+				KbdComponent,
+				KbdGroupComponent
+			],
+			providers: [provideTranslocoScope("dialogs")],
+			template: `
+    @if (groups().length === 0) {
+      <p>{{ "dialogs.keyboardShortcuts.empty" | transloco }}</p>
+    }
+
+    @for (group of groups(); track group.titleKey ?? "") {
+      @if (group.titleKey) {
+        <h3 class="mt-(--spacing-md) mb-(--spacing-4xs) text-(length:--size-lg) font-semibold first:mt-0">{{ group.titleKey | transloco }}</h3>
+      }
+      <dl>
+        @for (shortcut of group.items; track shortcut) {
+          <div class="flex items-center justify-between gap-(--spacing-md) py-(--spacing-4xs)">
+            <dt>{{ shortcut.labelKey! | transloco }}</dt>
+            <dd class="flex items-center gap-(--spacing-3xs)">
+              <!-- One group per combination: a shortcut may answer to several (Alt+0 and
+                   Shift+?). The group carries the whole combination as its name and the keys
+                   are hidden, otherwise a screen reader reads out every key and separator as
+                   a separate item. -->
+              <!-- comboIndex is captured explicitly: inside the nested loop $index would
+                   refer to the keys, not to the combination.
+                   (No backticks in this comment: the template is a template literal.) -->
+              @for (aria of shortcut.aria; track aria; let first = $first, comboIndex = $index) {
+                @if (!first) {
+                  <span aria-hidden="true">{{ "dialogs.keyboardShortcuts.or" | transloco }}</span>
+                }
+                <KbdGroup [attr.aria-label]="aria">
+                  @for (part of shortcut.displayParts[comboIndex]; track $index; let firstPart = $first) {
+                    @if (!firstPart) {
+                      <span aria-hidden="true">+</span>
+                    }
+                    <kbd aria-hidden="true">{{ part }}</kbd>
+                  }
+                </KbdGroup>
+              }
+            </dd>
+          </div>
+        }
+      </dl>
+    }
+  `
+		}]
+	}]
+});
+var KeyboardShortcutsDialogComponent = class KeyboardShortcutsDialogComponent {
+	call = injectCallRef();
+	dialog = viewChild(DialogComponent, ...ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []);
 	constructor() {
 		afterNextRender(() => this.dialog()?.showModal());
 	}
@@ -20687,7 +20825,7 @@ var KeyboardShortcutsDialogComponent = class KeyboardShortcutsDialogComponent {
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.0.0",
+		minVersion: "17.2.0",
 		version: "22.2.1",
 		type: KeyboardShortcutsDialogComponent,
 		isStandalone: true,
@@ -20709,44 +20847,7 @@ var KeyboardShortcutsDialogComponent = class KeyboardShortcutsDialogComponent {
         </DialogHeader>
 
         <DialogBody>
-          @if (groups().length === 0) {
-            <p>{{ "dialogs.keyboardShortcuts.empty" | transloco }}</p>
-          }
-
-          @for (group of groups(); track group.titleKey ?? "") {
-            @if (group.titleKey) {
-              <h3 class="mt-(--spacing-md) mb-(--spacing-4xs) font-semibold first:mt-0">{{ group.titleKey | transloco }}</h3>
-            }
-            <dl>
-              @for (shortcut of group.items; track shortcut) {
-                <div class="flex items-center justify-between gap-(--spacing-md) py-(--spacing-4xs)">
-                  <dt>{{ shortcut.labelKey! | transloco }}</dt>
-                  <dd class="flex items-center gap-(--spacing-3xs)">
-                    <!-- One group per combination: a shortcut may answer to several (Alt+0 and
-                         Shift+?). The group carries the whole combination as its name and the keys
-                         are hidden, otherwise a screen reader reads out every key and separator as
-                         a separate item. -->
-                    <!-- comboIndex is captured explicitly: inside the nested loop $index would
-                         refer to the keys, not to the combination.
-                         (No backticks in this comment: the template is a template literal.) -->
-                    @for (aria of shortcut.aria; track aria; let first = $first, comboIndex = $index) {
-                      @if (!first) {
-                        <span aria-hidden="true">{{ "dialogs.keyboardShortcuts.or" | transloco }}</span>
-                      }
-                      <KbdGroup [attr.aria-label]="aria">
-                        @for (part of shortcut.displayParts[comboIndex]; track $index; let firstPart = $first) {
-                          @if (!firstPart) {
-                            <span aria-hidden="true">+</span>
-                          }
-                          <kbd aria-hidden="true">{{ part }}</kbd>
-                        }
-                      </KbdGroup>
-                    }
-                  </dd>
-                </div>
-              }
-            </dl>
-          }
+          <keyboard-shortcuts-list />
         </DialogBody>
 
         <DialogFooter>
@@ -20812,15 +20913,9 @@ var KeyboardShortcutsDialogComponent = class KeyboardShortcutsDialogComponent {
 				inputs: ["class"]
 			},
 			{
-				kind: "directive",
-				type: KbdComponent,
-				selector: "kbd, Kbd",
-				inputs: ["class", "size"]
-			},
-			{
-				kind: "directive",
-				type: KbdGroupComponent,
-				selector: "kbd-group, kbdgroup, KbdGroup"
+				kind: "component",
+				type: KeyboardShortcutsListComponent,
+				selector: "keyboard-shortcuts-list"
 			},
 			{
 				kind: "pipe",
@@ -20850,8 +20945,7 @@ i0.ɵɵngDeclareClassMetadata({
 				DialogTitleComponent,
 				DialogBodyComponent,
 				DialogFooterComponent,
-				KbdComponent,
-				KbdGroupComponent
+				KeyboardShortcutsListComponent
 			],
 			providers: [provideTranslocoScope("dialogs")],
 			template: `
@@ -20862,44 +20956,7 @@ i0.ɵɵngDeclareClassMetadata({
         </DialogHeader>
 
         <DialogBody>
-          @if (groups().length === 0) {
-            <p>{{ "dialogs.keyboardShortcuts.empty" | transloco }}</p>
-          }
-
-          @for (group of groups(); track group.titleKey ?? "") {
-            @if (group.titleKey) {
-              <h3 class="mt-(--spacing-md) mb-(--spacing-4xs) font-semibold first:mt-0">{{ group.titleKey | transloco }}</h3>
-            }
-            <dl>
-              @for (shortcut of group.items; track shortcut) {
-                <div class="flex items-center justify-between gap-(--spacing-md) py-(--spacing-4xs)">
-                  <dt>{{ shortcut.labelKey! | transloco }}</dt>
-                  <dd class="flex items-center gap-(--spacing-3xs)">
-                    <!-- One group per combination: a shortcut may answer to several (Alt+0 and
-                         Shift+?). The group carries the whole combination as its name and the keys
-                         are hidden, otherwise a screen reader reads out every key and separator as
-                         a separate item. -->
-                    <!-- comboIndex is captured explicitly: inside the nested loop $index would
-                         refer to the keys, not to the combination.
-                         (No backticks in this comment: the template is a template literal.) -->
-                    @for (aria of shortcut.aria; track aria; let first = $first, comboIndex = $index) {
-                      @if (!first) {
-                        <span aria-hidden="true">{{ "dialogs.keyboardShortcuts.or" | transloco }}</span>
-                      }
-                      <KbdGroup [attr.aria-label]="aria">
-                        @for (part of shortcut.displayParts[comboIndex]; track $index; let firstPart = $first) {
-                          @if (!firstPart) {
-                            <span aria-hidden="true">+</span>
-                          }
-                          <kbd aria-hidden="true">{{ part }}</kbd>
-                        }
-                      </KbdGroup>
-                    }
-                  </dd>
-                </div>
-              }
-            </dl>
-          }
+          <keyboard-shortcuts-list />
         </DialogBody>
 
         <DialogFooter>
@@ -31045,11 +31102,6 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
-const SUPPORTED_LANGUAGES = [
-	"en",
-	"fr",
-	"de"
-];
 const sameKeys = (a, b) => a.length === b.length && a.every((key, index) => key === b[index]);
 const userProfileSchema = (editing) => schema((p) => {
 	applyEach(p.data, (field) => readonly(field, { when: ({ key }) => `data.${key()}` !== editing() }));
@@ -31057,7 +31109,6 @@ const userProfileSchema = (editing) => schema((p) => {
 });
 var UserProfileFormComponent = class UserProfileFormComponent {
 	principalStore = inject(PrincipalStore);
-	userSettingsStore = inject(UserSettingsStore);
 	userProfileService = inject(UserProfileService);
 	appStore = inject(AppStore);
 	client = inject(ATOMIC_CLIENT);
@@ -31105,26 +31156,6 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 	initials = computed(() => this.principalStore.initials(), ...ngDevMode ? [{ debugName: "initials" }] : /* istanbul ignore next */ []);
 	username = computed(() => this.principalStore.name() || this.principalStore.email() || null, ...ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []);
 	propertyToEdit = signal(void 0, ...ngDevMode ? [{ debugName: "propertyToEdit" }] : /* istanbul ignore next */ []);
-	currentLanguage = model(null, ...ngDevMode ? [{ debugName: "currentLanguage" }] : /* istanbul ignore next */ []);
-	allLanguages = [
-		{
-			code: "en",
-			label: "English",
-			icon: FlagEnglishIcon
-		},
-		{
-			code: "fr",
-			label: "Français",
-			icon: FlagFrenchIcon
-		},
-		{
-			code: "de",
-			label: "Deutsch",
-			icon: FlagGermanIcon
-		}
-	];
-	languageCodes = [...SUPPORTED_LANGUAGES];
-	languageLabel = (code) => this.allLanguages.find((lang) => lang.code === code)?.label ?? code;
 	changingPassword = signal(false, ...ngDevMode ? [{ debugName: "changingPassword" }] : /* istanbul ignore next */ []);
 	allowChangePassword = computed(() => {
 		const useCredentials = this.client.config.authMode?.kind === "credentials";
@@ -31155,7 +31186,6 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		submission: { action: async () => this.saveEditedProperty() }
 	});
 	constructor() {
-		this.currentLanguage.set(this.transloco.getActiveLang());
 		effect(() => {
 			if (this.userProfileResource.error()?.status === 404) this.createUserProfile();
 		});
@@ -31293,17 +31323,6 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		reader.readAsDataURL(element.files[0]);
 		reader.onload = () => void this.patchProperty("data", "profilePhoto", reader.result);
 	}
-	onLanguageChange(code) {
-		if (!code) return;
-		this.currentLanguage.set(code);
-		this.changeLanguage();
-	}
-	changeLanguage() {
-		const language = this.currentLanguage();
-		if (!language) return;
-		this.userSettingsStore.updateLanguage(language);
-		if (this.transloco.getActiveLang() !== language) this.transloco.setActiveLang(language);
-	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
@@ -31318,18 +31337,10 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 		type: UserProfileFormComponent,
 		isStandalone: true,
 		selector: "user-profile-form, UserProfileForm, userprofileform",
-		inputs: { currentLanguage: {
-			classPropertyName: "currentLanguage",
-			publicName: "currentLanguage",
-			isSignal: true,
-			isRequired: false,
-			transformFunction: null
-		} },
-		outputs: { currentLanguage: "currentLanguageChange" },
 		host: { classAttribute: "flex flex-col h-full overflow-hidden" },
 		providers: [provideTranslocoScope("user-profile", "login")],
 		ngImport: i0,
-		template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE — outside the <form> below: it is a user setting applied on the spot, not a\n             profile property submitted with the rest. The trigger is projected rather than left to the\n             default one so it can carry an id, which is what makes the <label for> name the combobox —\n             SelectMenu's own `fieldLabel` renders a <span>, which names nothing.\n             The label goes in the `.select-label` slot: the DS wrap paints it (same size and weight as\n             the property labels below) and provides the label-to-field gap, so this needs no wrapper. -->\n        <SelectMenu\n          class=\"w-fit\"\n          size=\"md\"\n          [options]=\"languageCodes\"\n          [label]=\"languageLabel\"\n          [value]=\"currentLanguage()\"\n          (valueChange)=\"onLanguageChange($event)\">\n          <label class=\"select-label\" for=\"user-profile-language\">{{\n            \"userProfile.language\" | transloco\n          }}</label>\n          <button\n            selectTrigger\n            type=\"button\"\n            id=\"user-profile-language\"\n            class=\"select-trigger\">\n            <span class=\"select-trigger-label\">{{\n              languageLabel(currentLanguage() ?? \"\")\n            }}</span>\n            <chevron-down-icon class=\"select-chevron\" />\n          </button>\n        </SelectMenu>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (\n            property of properties();\n            track property.category + \".\" + property.key\n          ) {\n            @let category = property.category;\n            @let key = property.key;\n            @let field = profileForm[category][key];\n            @let label =\n              property.translated\n                ? (\"userProfile.data.\" + key | transloco)\n                : key;\n            @let editing = isEditing(category, key);\n            @let invalid = showError(field);\n            <!-- role=\"group\" named by the label: without it the four action buttons of a row are\n                 announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                 them to the property they belong to. -->\n            <div\n              role=\"group\"\n              [attr.aria-labelledby]=\"labelId(category, key)\"\n              class=\"flex flex-col gap-(--spacing-3xs)\">\n              <label\n                [id]=\"labelId(category, key)\"\n                [for]=\"fieldId(category, key)\"\n                [class]=\"labelClass\"\n                >{{ label }}</label\n              >\n              <div class=\"group flex flex-row\">\n                <div class=\"min-w-0 grow\">\n                  <textarea-group\n                    resize=\"auto\"\n                    [maxRows]=\"3\"\n                    [scheme]=\"invalid ? 'error' : 'default'\">\n                    <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                         the field state, which the schema's readonly() rule drives. The native\n                         readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                    <textarea\n                      textarea-control\n                      rows=\"1\"\n                      [id]=\"fieldId(category, key)\"\n                      [formField]=\"field\"\n                      [attr.placeholder]=\"'userProfile.notDefined' | transloco\"\n                      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"\n                        invalid ? errorId(category, key) : null\n                      \"\n                      [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                      (focus)=\"onFieldFocus($event)\"\n                      (keydown.escape)=\"onCancelEdit(category, key)\"></textarea>\n                  </textarea-group>\n                </div>\n                <!-- group-focus-within, and not only group-hover: `invisible` takes the buttons out of\n                     the tab order, so without it editing or deleting a property is unreachable with a\n                     keyboard. Focusing the field of the row reveals its actions. -->\n                @if (editing) {\n                  <button\n                    type=\"submit\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [disabled]=\"profileForm().submitting()\"\n                    [title]=\"'userProfile.saveProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.savePropertyNamed'\n                        | transloco: { property: label }\n                    \">\n                    <save-icon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.cancelEdit' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.cancelEditNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onCancelEdit(category, key)\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    [id]=\"editButtonId(category, key)\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.editProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.editPropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onEdit(category, key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.deleteProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.deletePropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onDeleteData(category, key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n              @if (invalid) {\n                <p\n                  [id]=\"errorId(category, key)\"\n                  role=\"alert\"\n                  [class]=\"errorClass\">\n                  {{ errorKey(field) | transloco }}\n                </p>\n              }\n            </div>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n",
+		template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (\n            property of properties();\n            track property.category + \".\" + property.key\n          ) {\n            @let category = property.category;\n            @let key = property.key;\n            @let field = profileForm[category][key];\n            @let label =\n              property.translated\n                ? (\"userProfile.data.\" + key | transloco)\n                : key;\n            @let editing = isEditing(category, key);\n            @let invalid = showError(field);\n            <!-- role=\"group\" named by the label: without it the four action buttons of a row are\n                 announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                 them to the property they belong to. -->\n            <div\n              role=\"group\"\n              [attr.aria-labelledby]=\"labelId(category, key)\"\n              class=\"flex flex-col gap-(--spacing-3xs)\">\n              <label\n                [id]=\"labelId(category, key)\"\n                [for]=\"fieldId(category, key)\"\n                [class]=\"labelClass\"\n                >{{ label }}</label\n              >\n              <div class=\"group flex flex-row\">\n                <div class=\"min-w-0 grow\">\n                  <textarea-group\n                    resize=\"auto\"\n                    [maxRows]=\"3\"\n                    [scheme]=\"invalid ? 'error' : 'default'\">\n                    <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                         the field state, which the schema's readonly() rule drives. The native\n                         readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                    <textarea\n                      textarea-control\n                      rows=\"1\"\n                      [id]=\"fieldId(category, key)\"\n                      [formField]=\"field\"\n                      [attr.placeholder]=\"'userProfile.notDefined' | transloco\"\n                      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"\n                        invalid ? errorId(category, key) : null\n                      \"\n                      [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                      (focus)=\"onFieldFocus($event)\"\n                      (keydown.escape)=\"onCancelEdit(category, key)\"></textarea>\n                  </textarea-group>\n                </div>\n                <!-- group-focus-within, and not only group-hover: `invisible` takes the buttons out of\n                     the tab order, so without it editing or deleting a property is unreachable with a\n                     keyboard. Focusing the field of the row reveals its actions. -->\n                @if (editing) {\n                  <button\n                    type=\"submit\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [disabled]=\"profileForm().submitting()\"\n                    [title]=\"'userProfile.saveProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.savePropertyNamed'\n                        | transloco: { property: label }\n                    \">\n                    <save-icon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.cancelEdit' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.cancelEditNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onCancelEdit(category, key)\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    [id]=\"editButtonId(category, key)\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.editProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.editPropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onEdit(category, key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.deleteProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.deletePropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onDeleteData(category, key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n              @if (invalid) {\n                <p\n                  [id]=\"errorId(category, key)\"\n                  role=\"alert\"\n                  [class]=\"errorClass\">\n                  {{ errorKey(field) | transloco }}\n                </p>\n              }\n            </div>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -31422,45 +31433,6 @@ var UserProfileFormComponent = class UserProfileFormComponent {
 					"size"
 				]
 			},
-			{
-				kind: "component",
-				type: SelectComponent,
-				selector: "SelectMenu,select-menu",
-				inputs: [
-					"value",
-					"options",
-					"placement",
-					"size",
-					"fieldLabel",
-					"aria-label",
-					"placeholder",
-					"hint",
-					"disabled",
-					"class",
-					"selectionMode",
-					"multiple",
-					"wrap",
-					"key",
-					"label",
-					"optionDisabled",
-					"noOptionsText",
-					"contentClass"
-				],
-				outputs: ["valueChange", "touch"],
-				exportAs: ["select"]
-			},
-			{
-				kind: "directive",
-				type: SelectTriggerDirective,
-				selector: "[selectTrigger]",
-				exportAs: ["selectTrigger"]
-			},
-			{
-				kind: "component",
-				type: ChevronDownIcon,
-				selector: "chevron-down, chevron-down-icon, ChevronDown, ChevronDownIcon",
-				inputs: ["class"]
-			},
 			{
 				kind: "directive",
 				type: TextareaComponent,
@@ -31530,29 +31502,15 @@ i0.ɵɵngDeclareClassMetadata({
 				UserIcon,
 				AvatarImageComponent,
 				ButtonComponent,
-				SelectComponent,
-				SelectTriggerDirective,
-				ChevronDownIcon,
 				TextareaComponent,
 				TextareaControlDirective,
 				ChangePasswordComponent
 			],
 			providers: [provideTranslocoScope("user-profile", "login")],
-			template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- LANGUAGE — outside the <form> below: it is a user setting applied on the spot, not a\n             profile property submitted with the rest. The trigger is projected rather than left to the\n             default one so it can carry an id, which is what makes the <label for> name the combobox —\n             SelectMenu's own `fieldLabel` renders a <span>, which names nothing.\n             The label goes in the `.select-label` slot: the DS wrap paints it (same size and weight as\n             the property labels below) and provides the label-to-field gap, so this needs no wrapper. -->\n        <SelectMenu\n          class=\"w-fit\"\n          size=\"md\"\n          [options]=\"languageCodes\"\n          [label]=\"languageLabel\"\n          [value]=\"currentLanguage()\"\n          (valueChange)=\"onLanguageChange($event)\">\n          <label class=\"select-label\" for=\"user-profile-language\">{{\n            \"userProfile.language\" | transloco\n          }}</label>\n          <button\n            selectTrigger\n            type=\"button\"\n            id=\"user-profile-language\"\n            class=\"select-trigger\">\n            <span class=\"select-trigger-label\">{{\n              languageLabel(currentLanguage() ?? \"\")\n            }}</span>\n            <chevron-down-icon class=\"select-chevron\" />\n          </button>\n        </SelectMenu>\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (\n            property of properties();\n            track property.category + \".\" + property.key\n          ) {\n            @let category = property.category;\n            @let key = property.key;\n            @let field = profileForm[category][key];\n            @let label =\n              property.translated\n                ? (\"userProfile.data.\" + key | transloco)\n                : key;\n            @let editing = isEditing(category, key);\n            @let invalid = showError(field);\n            <!-- role=\"group\" named by the label: without it the four action buttons of a row are\n                 announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                 them to the property they belong to. -->\n            <div\n              role=\"group\"\n              [attr.aria-labelledby]=\"labelId(category, key)\"\n              class=\"flex flex-col gap-(--spacing-3xs)\">\n              <label\n                [id]=\"labelId(category, key)\"\n                [for]=\"fieldId(category, key)\"\n                [class]=\"labelClass\"\n                >{{ label }}</label\n              >\n              <div class=\"group flex flex-row\">\n                <div class=\"min-w-0 grow\">\n                  <textarea-group\n                    resize=\"auto\"\n                    [maxRows]=\"3\"\n                    [scheme]=\"invalid ? 'error' : 'default'\">\n                    <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                         the field state, which the schema's readonly() rule drives. The native\n                         readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                    <textarea\n                      textarea-control\n                      rows=\"1\"\n                      [id]=\"fieldId(category, key)\"\n                      [formField]=\"field\"\n                      [attr.placeholder]=\"'userProfile.notDefined' | transloco\"\n                      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"\n                        invalid ? errorId(category, key) : null\n                      \"\n                      [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                      (focus)=\"onFieldFocus($event)\"\n                      (keydown.escape)=\"onCancelEdit(category, key)\"></textarea>\n                  </textarea-group>\n                </div>\n                <!-- group-focus-within, and not only group-hover: `invisible` takes the buttons out of\n                     the tab order, so without it editing or deleting a property is unreachable with a\n                     keyboard. Focusing the field of the row reveals its actions. -->\n                @if (editing) {\n                  <button\n                    type=\"submit\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [disabled]=\"profileForm().submitting()\"\n                    [title]=\"'userProfile.saveProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.savePropertyNamed'\n                        | transloco: { property: label }\n                    \">\n                    <save-icon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.cancelEdit' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.cancelEditNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onCancelEdit(category, key)\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    [id]=\"editButtonId(category, key)\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.editProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.editPropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onEdit(category, key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.deleteProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.deletePropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onDeleteData(category, key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n              @if (invalid) {\n                <p\n                  [id]=\"errorId(category, key)\"\n                  role=\"alert\"\n                  [class]=\"errorClass\">\n                  {{ errorKey(field) | transloco }}\n                </p>\n              }\n            </div>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n"
+			template: "@if (userProfileResource.hasValue()) {\n  @let profile = user();\n  <div class=\"flex min-h-0 flex-1 flex-col gap-2 p-4\">\n    <div class=\"mb-4 flex\">\n      @if (allowProfilePhoto()) {\n        @let profilePhoto = profile?.data?.profilePhoto;\n        <!-- AVATAR — a real <button>: the avatar opens the file picker, so it has to be reachable and\n             activatable with the keyboard, which a click handler on a <div> never is. -->\n        <button\n          type=\"button\"\n          variant=\"none\"\n          class=\"cursor-pointer rounded-full\"\n          [title]=\"'userProfile.changePhoto' | transloco\"\n          [attr.aria-label]=\"'userProfile.changePhoto' | transloco\"\n          (click)=\"avatarInput.click()\">\n          <Avatar fill=\"secondary\" class=\"size-14\">\n            @if (profilePhoto) {\n              <!-- alt=\"\": the button already carries the accessible name, the image would repeat it. -->\n              <AvatarImage [src]=\"profilePhoto\" width=\"44\" height=\"44\" alt=\"\" />\n            }\n            <AvatarFallback class=\"size-full text-lg\">\n              @if (initials()) {\n                <span>{{ initials() }}</span>\n              } @else {\n                <UserIcon class=\"size-7\" />\n              }\n            </AvatarFallback>\n          </Avatar>\n        </button>\n        @if (profilePhoto) {\n          <button\n            type=\"button\"\n            variant=\"tertiary\"\n            [iconOnly]=\"true\"\n            class=\"text-destructive cursor-pointer\"\n            [title]=\"'userProfile.deleteProperty' | transloco\"\n            [attr.aria-label]=\"\n              'userProfile.deletePropertyNamed'\n                | transloco\n                  : { property: 'userProfile.data.profilePhoto' | transloco }\n            \"\n            (click)=\"onDeleteData('data', 'profilePhoto')\">\n            <TrashIcon />\n          </button>\n        }\n      }\n      <div class=\"grow\"></div>\n      <div class=\"flex flex-col gap-4\">\n        <!-- CHANGE PASSWORD -->\n        @if (allowChangePassword()) {\n          <button\n            type=\"button\"\n            [disabled]=\"changingPassword()\"\n            (click)=\"changingPassword.set(true)\">\n            {{ \"login.changePassword\" | transloco }}\n          </button>\n        }\n      </div>\n    </div>\n    @if (changingPassword()) {\n      <!-- ChangePassword renders its own <form [formRoot]>: it stays in this branch, mutually\n           exclusive with the profile form below, so the two never nest. -->\n      <ChangePassword\n        [username]=\"username()\"\n        [redirectAfterSuccess]=\"false\"\n        [redirectAfterCancel]=\"false\"\n        (cancel)=\"changingPassword.set(false)\"\n        (success)=\"changingPassword.set(false)\" />\n    } @else {\n      <!-- p: the focus outline of the fields is drawn *outside* their box, and this is the\n           scrolling ancestor — without a gutter it clips the ring on every edge it touches\n           (left for all of them, bottom for the last one, top for the first). -->\n      <div class=\"min-h-0 flex-1 overflow-auto p-(--spacing-3xs)\">\n        <!--\n          [formRoot] pose novalidate, intercepte submit et appelle preventDefault() avant de déclencher\n          submit() sur le field tree. Un seul bouton type=\"submit\" est rendu à la fois — celui de la\n          ligne en cours d'édition — et l'action de soumission persiste cette seule propriété.\n        -->\n        <!-- aria-label: a <form> with no accessible name is not exposed as a form landmark, so the\n             fields could not be reached as a whole. aria-busy holds the announcement back while a\n             property is being persisted. -->\n        <form\n          [formRoot]=\"profileForm\"\n          [attr.aria-label]=\"'userProfile.profileFields' | transloco\"\n          [attr.aria-busy]=\"profileForm().submitting() ? 'true' : null\">\n          @for (\n            property of properties();\n            track property.category + \".\" + property.key\n          ) {\n            @let category = property.category;\n            @let key = property.key;\n            @let field = profileForm[category][key];\n            @let label =\n              property.translated\n                ? (\"userProfile.data.\" + key | transloco)\n                : key;\n            @let editing = isEditing(category, key);\n            @let invalid = showError(field);\n            <!-- role=\"group\" named by the label: without it the four action buttons of a row are\n                 announced out of context, as a flat run of \"Edit …\" / \"Delete …\" with nothing tying\n                 them to the property they belong to. -->\n            <div\n              role=\"group\"\n              [attr.aria-labelledby]=\"labelId(category, key)\"\n              class=\"flex flex-col gap-(--spacing-3xs)\">\n              <label\n                [id]=\"labelId(category, key)\"\n                [for]=\"fieldId(category, key)\"\n                [class]=\"labelClass\"\n                >{{ label }}</label\n              >\n              <div class=\"group flex flex-row\">\n                <div class=\"min-w-0 grow\">\n                  <textarea-group\n                    resize=\"auto\"\n                    [maxRows]=\"3\"\n                    [scheme]=\"invalid ? 'error' : 'default'\">\n                    <!-- No [attr.readonly] here: [formField] writes the readonly attribute itself from\n                         the field state, which the schema's readonly() rule drives. The native\n                         readonly attribute is what exposes aria-readonly — do not duplicate it. -->\n                    <textarea\n                      textarea-control\n                      rows=\"1\"\n                      [id]=\"fieldId(category, key)\"\n                      [formField]=\"field\"\n                      [attr.placeholder]=\"'userProfile.notDefined' | transloco\"\n                      [attr.aria-invalid]=\"invalid ? 'true' : null\"\n                      [attr.aria-describedby]=\"\n                        invalid ? errorId(category, key) : null\n                      \"\n                      [attr.aria-keyshortcuts]=\"editing ? 'Escape' : null\"\n                      (focus)=\"onFieldFocus($event)\"\n                      (keydown.escape)=\"onCancelEdit(category, key)\"></textarea>\n                  </textarea-group>\n                </div>\n                <!-- group-focus-within, and not only group-hover: `invisible` takes the buttons out of\n                     the tab order, so without it editing or deleting a property is unreachable with a\n                     keyboard. Focusing the field of the row reveals its actions. -->\n                @if (editing) {\n                  <button\n                    type=\"submit\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [disabled]=\"profileForm().submitting()\"\n                    [title]=\"'userProfile.saveProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.savePropertyNamed'\n                        | transloco: { property: label }\n                    \">\n                    <save-icon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.cancelEdit' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.cancelEditNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onCancelEdit(category, key)\">\n                    <UndoIcon />\n                  </button>\n                } @else {\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    [id]=\"editButtonId(category, key)\"\n                    class=\"visible mx-2 cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.editProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.editPropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onEdit(category, key)\">\n                    <EditIcon />\n                  </button>\n                  <button\n                    type=\"button\"\n                    variant=\"tertiary\"\n                    [iconOnly]=\"true\"\n                    class=\"text-destructive visible cursor-pointer sm:invisible sm:group-focus-within:visible sm:group-hover:visible\"\n                    [title]=\"'userProfile.deleteProperty' | transloco\"\n                    [attr.aria-label]=\"\n                      'userProfile.deletePropertyNamed'\n                        | transloco: { property: label }\n                    \"\n                    (click)=\"onDeleteData(category, key)\">\n                    <TrashIcon />\n                  </button>\n                }\n              </div>\n              @if (invalid) {\n                <p\n                  [id]=\"errorId(category, key)\"\n                  role=\"alert\"\n                  [class]=\"errorClass\">\n                  {{ errorKey(field) | transloco }}\n                </p>\n              }\n            </div>\n          }\n        </form>\n        <!-- Always in the DOM, and only its text changes: a live region inserted at the same time as\n             its content is not reliably announced. `sr-only` — the transitions it describes are\n             already visible on screen. -->\n        <p class=\"sr-only\" role=\"status\" aria-live=\"polite\">\n          {{ statusMessage() }}\n        </p>\n      </div>\n    }\n  </div>\n} @else if (userProfileResource.isLoading()) {\n  <p role=\"status\">{{ \"userProfile.loading\" | transloco }}</p>\n} @else if (userProfileResource.error()) {\n  <p role=\"alert\">{{ \"userProfile.loadError\" | transloco }}</p>\n}\n\n<!-- AVATAR UPLOAD — `hidden` keeps it out of both the tab order and the accessibility tree, which is\n     intended: it is opened by the avatar button above. It also sits outside the <form>. -->\n<input\n  #avatarInput\n  class=\"hidden\"\n  type=\"file\"\n  accept=\"image/*\"\n  (change)=\"uploadAvatar($event)\" />\n"
 		}]
 	}],
-	ctorParameters: () => [],
-	propDecorators: { currentLanguage: [{
-		type: i0.Input,
-		args: [{
-			isSignal: true,
-			alias: "currentLanguage",
-			required: false
-		}]
-	}, {
-		type: i0.Output,
-		args: ["currentLanguageChange"]
-	}] }
+	ctorParameters: () => []
 });
 function toRecord(keys, source) {
 	return Object.fromEntries(keys.map((key) => [key, String(source?.[key] ?? "")]));
@@ -31564,92 +31522,732 @@ function splitPropertyId(id) {
 		key: id.slice(separator + 1)
 	};
 }
-var UserProfileDialog = class UserProfileDialog {
-	call = injectCallRef();
-	dialog = viewChild.required(DialogComponent, ...ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []);
-	constructor() {
-		afterNextRender(() => this.dialog().open());
+var SettingsAccountPanelComponent = class SettingsAccountPanelComponent {
+	principalStore = inject(PrincipalStore);
+	appStore = inject(AppStore);
+	client = inject(ATOMIC_CLIENT);
+	userOverride = inject(UserOverrideService);
+	injector = inject(Injector);
+	profileEnabled = computed(() => this.appStore.general()?.features?.userProfile?.enabled ?? false, ...ngDevMode ? [{ debugName: "profileEnabled" }] : /* istanbul ignore next */ []);
+	username = computed(() => this.principalStore.name() || this.principalStore.email() || null, ...ngDevMode ? [{ debugName: "username" }] : /* istanbul ignore next */ []);
+	allowChangePassword = computed(() => {
+		const useCredentials = this.client.config.authMode?.kind === "credentials";
+		const { allowChangePassword = false } = this.appStore.general()?.features || {};
+		return allowChangePassword && useCredentials && (this.principalStore.editablePartition?.() || false);
+	}, ...ngDevMode ? [{ debugName: "allowChangePassword" }] : /* istanbul ignore next */ []);
+	resetSettings() {
+		ResetUserSettings.call(void 0, { injector: this.injector });
+	}
+	overrideUser() {
+		OverrideUser.call(void 0, { injector: this.injector });
+	}
+	revertOverride() {
+		this.userOverride.override();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
 		ngImport: i0,
-		type: UserProfileDialog,
+		type: SettingsAccountPanelComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
-		minVersion: "17.2.0",
+		minVersion: "17.0.0",
 		version: "22.2.1",
-		type: UserProfileDialog,
+		type: SettingsAccountPanelComponent,
 		isStandalone: true,
-		selector: "user-profile-dialog, userprofiledialog, UserProfileDialog",
-		providers: [provideTranslocoScope("user-profile")],
-		viewQueries: [{
-			propertyName: "dialog",
-			first: true,
-			predicate: DialogComponent,
-			descendants: true,
-			isSignal: true
-		}],
+		selector: "settings-account-panel",
+		providers: [provideTranslocoScope("settings")],
 		ngImport: i0,
 		template: `
-    <div dialog #dialog="dialog" (closed)="call.end($event)">
-      <DialogContent size="md">
-        <DialogHeader [closeLabel]="'userProfile.close' | transloco">
-          <DialogTitle>{{ 'userProfile.title' | transloco }}</DialogTitle>
-        </DialogHeader>
+    <h2 class="text-(length:--size-2xl) font-semibold">{{ "settings.account.title" | transloco }}</h2>
+    <p class="text-(--font-primary-muted)">{{ "settings.account.description" | transloco }}</p>
+
+    @if (profileEnabled()) {
+      <user-profile-form class="mt-(--spacing-md) min-h-0 flex-1" />
+    } @else if (allowChangePassword()) {
+      <!-- No profile to show: the password is all the account offers, as it was in the user menu. -->
+      <change-password
+        class="mt-(--spacing-md)"
+        [surface]="false"
+        [username]="username()"
+        [redirectAfterSuccess]="false"
+        [redirectAfterCancel]="false" />
+    }
 
-        <DialogBody class="flex-1">
-          <user-profile-form class="flex flex-1 flex-col min-h-0" />
-        </DialogBody>
-      </DialogContent>
+    <!-- Account-wide actions, one row each: what it does on the left, the action on the right. -->
+    <div class="mt-(--spacing-md) flex flex-col border-t border-(--stroke-primary-light)">
+      @if (principalStore.isOverridingUser()) {
+        <div class="flex items-center justify-between gap-(--spacing-md) border-b border-(--stroke-primary-light) py-(--spacing-md)">
+          <div>
+            <p id="settings-revert-override-title" class="font-semibold">{{ "settings.account.revertOverride.title" | transloco }}</p>
+            <p id="settings-revert-override-description" class="text-(--font-primary-muted)">{{ "settings.account.revertOverride.description" | transloco }}</p>
+          </div>
+          <button type="button" variant="secondary" class="shrink-0" aria-describedby="settings-revert-override-description" (click)="revertOverride()">
+            {{ "settings.account.revertOverride.action" | transloco }}
+          </button>
+        </div>
+      } @else if (principalStore.allowUserOverride()) {
+        <div class="flex items-center justify-between gap-(--spacing-md) border-b border-(--stroke-primary-light) py-(--spacing-md)">
+          <div>
+            <p id="settings-override-title" class="font-semibold">{{ "settings.account.overrideUser.title" | transloco }}</p>
+            <p id="settings-override-description" class="text-(--font-primary-muted)">{{ "settings.account.overrideUser.description" | transloco }}</p>
+          </div>
+          <button type="button" variant="secondary" class="shrink-0" aria-describedby="settings-override-description" (click)="overrideUser()">
+            {{ "settings.account.overrideUser.action" | transloco }}
+          </button>
+        </div>
+      }
+
+      <div class="flex items-center justify-between gap-(--spacing-md) py-(--spacing-md)">
+        <div>
+          <p id="settings-clear-data-title" class="font-semibold">{{ "settings.account.clearData.title" | transloco }}</p>
+          <p id="settings-clear-data-description" class="text-(--font-primary-muted)">{{ "settings.account.clearData.description" | transloco }}</p>
+        </div>
+        <!-- Destructive: the secondary variant re-coloured with the error tokens. Every state of the
+             variant (hover, active, focus) sets its own colours, so each one is overridden here — a
+             plain border/text colour would only win while the button is at rest. -->
+        <button
+          type="button"
+          variant="secondary"
+          class="shrink-0 border-(--stroke-error-base) text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest) enabled:hover:text-(--font-error-base) enabled:active:border-(--stroke-error-base) enabled:active:bg-(--bg-error-lightest) enabled:active:text-(--font-error-base) enabled:active:shadow-[inset_0_0_0_1px_var(--stroke-error-base)] enabled:focus-visible:border-(--stroke-error-base) enabled:focus-visible:text-(--font-error-base)"
+          aria-describedby="settings-clear-data-description"
+          (click)="resetSettings()">
+          {{ "settings.account.clearData.action" | transloco }}
+        </button>
+      </div>
     </div>
   `,
 		isInline: true,
 		dependencies: [
 			{
-				kind: "component",
-				type: DialogComponent,
-				selector: "dialog, [dialog]",
-				inputs: ["closeLabel"],
-				outputs: ["closed"],
-				exportAs: ["dialog"]
+				kind: "directive",
+				type: ButtonComponent,
+				selector: "button",
+				inputs: [
+					"class",
+					"variant",
+					"scheme",
+					"iconOnly",
+					"size"
+				]
 			},
 			{
 				kind: "component",
-				type: DialogHeaderComponent,
-				selector: "DialogHeader",
-				inputs: ["closeLabel", "class"]
+				type: UserProfileFormComponent,
+				selector: "user-profile-form, UserProfileForm, userprofileform"
 			},
 			{
-				kind: "directive",
-				type: DialogContentComponent,
-				selector: "DialogContent",
+				kind: "component",
+				type: ChangePasswordComponent,
+				selector: "change-password, ChangePassword, changepassword",
 				inputs: [
-					"size",
-					"labelledby",
-					"class"
-				]
+					"username",
+					"alert",
+					"redirectAfterSuccess",
+					"redirectAfterCancel",
+					"surface",
+					"passwords"
+				],
+				outputs: [
+					"success",
+					"cancel",
+					"passwordsChange"
+				]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SettingsAccountPanelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "settings-account-panel",
+			imports: [
+				TranslocoPipe,
+				ButtonComponent,
+				UserProfileFormComponent,
+				ChangePasswordComponent
+			],
+			providers: [provideTranslocoScope("settings")],
+			template: `
+    <h2 class="text-(length:--size-2xl) font-semibold">{{ "settings.account.title" | transloco }}</h2>
+    <p class="text-(--font-primary-muted)">{{ "settings.account.description" | transloco }}</p>
+
+    @if (profileEnabled()) {
+      <user-profile-form class="mt-(--spacing-md) min-h-0 flex-1" />
+    } @else if (allowChangePassword()) {
+      <!-- No profile to show: the password is all the account offers, as it was in the user menu. -->
+      <change-password
+        class="mt-(--spacing-md)"
+        [surface]="false"
+        [username]="username()"
+        [redirectAfterSuccess]="false"
+        [redirectAfterCancel]="false" />
+    }
+
+    <!-- Account-wide actions, one row each: what it does on the left, the action on the right. -->
+    <div class="mt-(--spacing-md) flex flex-col border-t border-(--stroke-primary-light)">
+      @if (principalStore.isOverridingUser()) {
+        <div class="flex items-center justify-between gap-(--spacing-md) border-b border-(--stroke-primary-light) py-(--spacing-md)">
+          <div>
+            <p id="settings-revert-override-title" class="font-semibold">{{ "settings.account.revertOverride.title" | transloco }}</p>
+            <p id="settings-revert-override-description" class="text-(--font-primary-muted)">{{ "settings.account.revertOverride.description" | transloco }}</p>
+          </div>
+          <button type="button" variant="secondary" class="shrink-0" aria-describedby="settings-revert-override-description" (click)="revertOverride()">
+            {{ "settings.account.revertOverride.action" | transloco }}
+          </button>
+        </div>
+      } @else if (principalStore.allowUserOverride()) {
+        <div class="flex items-center justify-between gap-(--spacing-md) border-b border-(--stroke-primary-light) py-(--spacing-md)">
+          <div>
+            <p id="settings-override-title" class="font-semibold">{{ "settings.account.overrideUser.title" | transloco }}</p>
+            <p id="settings-override-description" class="text-(--font-primary-muted)">{{ "settings.account.overrideUser.description" | transloco }}</p>
+          </div>
+          <button type="button" variant="secondary" class="shrink-0" aria-describedby="settings-override-description" (click)="overrideUser()">
+            {{ "settings.account.overrideUser.action" | transloco }}
+          </button>
+        </div>
+      }
+
+      <div class="flex items-center justify-between gap-(--spacing-md) py-(--spacing-md)">
+        <div>
+          <p id="settings-clear-data-title" class="font-semibold">{{ "settings.account.clearData.title" | transloco }}</p>
+          <p id="settings-clear-data-description" class="text-(--font-primary-muted)">{{ "settings.account.clearData.description" | transloco }}</p>
+        </div>
+        <!-- Destructive: the secondary variant re-coloured with the error tokens. Every state of the
+             variant (hover, active, focus) sets its own colours, so each one is overridden here — a
+             plain border/text colour would only win while the button is at rest. -->
+        <button
+          type="button"
+          variant="secondary"
+          class="shrink-0 border-(--stroke-error-base) text-(--font-error-base) enabled:hover:bg-(--bg-error-lightest) enabled:hover:text-(--font-error-base) enabled:active:border-(--stroke-error-base) enabled:active:bg-(--bg-error-lightest) enabled:active:text-(--font-error-base) enabled:active:shadow-[inset_0_0_0_1px_var(--stroke-error-base)] enabled:focus-visible:border-(--stroke-error-base) enabled:focus-visible:text-(--font-error-base)"
+          aria-describedby="settings-clear-data-description"
+          (click)="resetSettings()">
+          {{ "settings.account.clearData.action" | transloco }}
+        </button>
+      </div>
+    </div>
+  `
+		}]
+	}]
+});
+const THEMES$1 = [
+	"light",
+	"dark",
+	"system"
+];
+const LANGUAGES = [
+	"en",
+	"fr",
+	"de"
+];
+const isTheme = (value) => THEMES$1.includes(value);
+const isSupportedLanguage = (value) => LANGUAGES.includes(value);
+var SettingsAppearancePanelComponent = class SettingsAppearancePanelComponent {
+	userSettingsStore = inject(UserSettingsStore);
+	transloco = inject(TranslocoService);
+	document = inject(DOCUMENT);
+	lang = toSignal(this.transloco.langChanges$, { initialValue: this.transloco.getActiveLang() });
+	loadedTranslations = toSignal(this.transloco.events$.pipe(filter((event) => event.type === "translationLoadSuccess"), scan((count) => count + 1, 0)), { initialValue: 0 });
+	themeCodes = [...THEMES$1];
+	languageCodes = [...LANGUAGES];
+	themeIcons = {
+		light: SunBrightIcon,
+		dark: MoonIcon,
+		system: DesktopIcon
+	};
+	languageIcons = {
+		en: FlagEnglishIcon,
+		fr: FlagFrenchIcon,
+		de: FlagGermanIcon
+	};
+	languageLabels = {
+		en: "English",
+		fr: "Français",
+		de: "Deutsch"
+	};
+	currentTheme = computed(() => this.userSettingsStore.userTheme() ?? "system", ...ngDevMode ? [{ debugName: "currentTheme" }] : /* istanbul ignore next */ []);
+	currentLanguage = computed(() => this.lang(), ...ngDevMode ? [{ debugName: "currentLanguage" }] : /* istanbul ignore next */ []);
+	themeLabel = (code) => {
+		this.lang();
+		this.loadedTranslations();
+		return isTheme(code) ? this.transloco.translate(`settings.appearance.${code}Mode`) : "";
+	};
+	languageLabel = (code) => isSupportedLanguage(code) ? this.languageLabels[code] : code ?? "";
+	themeIcon(code) {
+		return isTheme(code) ? this.themeIcons[code] : null;
+	}
+	languageIcon(code) {
+		return isSupportedLanguage(code) ? this.languageIcons[code] : null;
+	}
+	async onThemeChange(code) {
+		if (!isTheme(code)) return;
+		try {
+			await this.userSettingsStore.setUserTheme(code);
+		} catch (err) {
+			error("set user theme failed", err);
+			return;
+		}
+		const dark = code === "dark" || code === "system" && window.matchMedia?.("(prefers-color-scheme: dark)").matches;
+		this.document.documentElement.classList.toggle("dark", dark);
+	}
+	onLanguageChange(code) {
+		if (!isSupportedLanguage(code)) return;
+		this.userSettingsStore.updateLanguage(code).catch((err) => error("update language failed", err));
+		if (this.transloco.getActiveLang() !== code) this.transloco.setActiveLang(code);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SettingsAppearancePanelComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: SettingsAppearancePanelComponent,
+		isStandalone: true,
+		selector: "settings-appearance-panel",
+		providers: [provideTranslocoScope("settings")],
+		ngImport: i0,
+		template: `
+    <h2 class="text-(length:--size-2xl) font-semibold">{{ "settings.appearance.title" | transloco }}</h2>
+    <p class="text-(--font-primary-muted)">{{ "settings.appearance.description" | transloco }}</p>
+
+    <div class="mt-(--spacing-lg) flex items-start justify-between gap-(--spacing-md)">
+      <div>
+        <label id="settings-theme-label" class="font-semibold" for="settings-theme">{{ "settings.appearance.theme" | transloco }}</label>
+        <p id="settings-theme-description" class="text-(--font-primary-muted)">{{ "settings.appearance.themeDescription" | transloco }}</p>
+      </div>
+      <SelectMenu class="w-fit shrink-0" size="md" [options]="themeCodes" [label]="themeLabel" [value]="currentTheme()" (valueChange)="onThemeChange($event)">
+        <button selectTrigger type="button" id="settings-theme" class="select-trigger" aria-describedby="settings-theme-description">
+          <ng-container *ngComponentOutlet="themeIcon(currentTheme())" />
+          <span class="select-trigger-label">{{ themeLabel(currentTheme()) }}</span>
+          <chevron-down-icon class="select-chevron" />
+        </button>
+        <!-- The default option rendering is the label alone: the icon needs its own template. -->
+        <ng-template #selectOption let-option>
+          <span class="flex items-center gap-(--spacing-xs)">
+            <ng-container *ngComponentOutlet="themeIcon(option)" />
+            {{ themeLabel(option) }}
+          </span>
+        </ng-template>
+      </SelectMenu>
+    </div>
+
+    <hr class="my-(--spacing-md) border-(--stroke-primary-light)" />
+
+    <div class="flex items-start justify-between gap-(--spacing-md)">
+      <div>
+        <label id="settings-language-label" class="font-semibold" for="settings-language">{{ "settings.appearance.language" | transloco }}</label>
+        <p id="settings-language-description" class="text-(--font-primary-muted)">{{ "settings.appearance.languageDescription" | transloco }}</p>
+      </div>
+      <SelectMenu
+        class="w-fit shrink-0"
+        size="md"
+        [options]="languageCodes"
+        [label]="languageLabel"
+        [value]="currentLanguage()"
+        (valueChange)="onLanguageChange($event)">
+        <button selectTrigger type="button" id="settings-language" class="select-trigger" aria-describedby="settings-language-description">
+          <ng-container *ngComponentOutlet="languageIcon(currentLanguage())" />
+          <span class="select-trigger-label">{{ languageLabel(currentLanguage()) }}</span>
+          <chevron-down-icon class="select-chevron" />
+        </button>
+        <ng-template #selectOption let-option>
+          <span class="flex items-center gap-(--spacing-xs)">
+            <ng-container *ngComponentOutlet="languageIcon(option)" />
+            {{ languageLabel(option) }}
+          </span>
+        </ng-template>
+      </SelectMenu>
+    </div>
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: NgComponentOutlet,
+				selector: "[ngComponentOutlet]",
+				inputs: [
+					"ngComponentOutlet",
+					"ngComponentOutletInputs",
+					"ngComponentOutletInjector",
+					"ngComponentOutletEnvironmentInjector",
+					"ngComponentOutletContent",
+					"ngComponentOutletNgModule"
+				],
+				exportAs: ["ngComponentOutlet"]
+			},
+			{
+				kind: "component",
+				type: SelectComponent,
+				selector: "SelectMenu,select-menu",
+				inputs: [
+					"value",
+					"options",
+					"placement",
+					"size",
+					"fieldLabel",
+					"aria-label",
+					"placeholder",
+					"hint",
+					"disabled",
+					"class",
+					"selectionMode",
+					"multiple",
+					"wrap",
+					"key",
+					"label",
+					"optionDisabled",
+					"noOptionsText",
+					"contentClass"
+				],
+				outputs: ["valueChange", "touch"],
+				exportAs: ["select"]
 			},
 			{
 				kind: "directive",
-				type: DialogBodyComponent,
-				selector: "DialogBody",
+				type: SelectTriggerDirective,
+				selector: "[selectTrigger]",
+				exportAs: ["selectTrigger"]
+			},
+			{
+				kind: "component",
+				type: ChevronDownIcon,
+				selector: "chevron-down, chevron-down-icon, ChevronDown, ChevronDownIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SettingsAppearancePanelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "settings-appearance-panel",
+			imports: [
+				NgComponentOutlet,
+				TranslocoPipe,
+				SelectComponent,
+				SelectTriggerDirective,
+				ChevronDownIcon
+			],
+			providers: [provideTranslocoScope("settings")],
+			template: `
+    <h2 class="text-(length:--size-2xl) font-semibold">{{ "settings.appearance.title" | transloco }}</h2>
+    <p class="text-(--font-primary-muted)">{{ "settings.appearance.description" | transloco }}</p>
+
+    <div class="mt-(--spacing-lg) flex items-start justify-between gap-(--spacing-md)">
+      <div>
+        <label id="settings-theme-label" class="font-semibold" for="settings-theme">{{ "settings.appearance.theme" | transloco }}</label>
+        <p id="settings-theme-description" class="text-(--font-primary-muted)">{{ "settings.appearance.themeDescription" | transloco }}</p>
+      </div>
+      <SelectMenu class="w-fit shrink-0" size="md" [options]="themeCodes" [label]="themeLabel" [value]="currentTheme()" (valueChange)="onThemeChange($event)">
+        <button selectTrigger type="button" id="settings-theme" class="select-trigger" aria-describedby="settings-theme-description">
+          <ng-container *ngComponentOutlet="themeIcon(currentTheme())" />
+          <span class="select-trigger-label">{{ themeLabel(currentTheme()) }}</span>
+          <chevron-down-icon class="select-chevron" />
+        </button>
+        <!-- The default option rendering is the label alone: the icon needs its own template. -->
+        <ng-template #selectOption let-option>
+          <span class="flex items-center gap-(--spacing-xs)">
+            <ng-container *ngComponentOutlet="themeIcon(option)" />
+            {{ themeLabel(option) }}
+          </span>
+        </ng-template>
+      </SelectMenu>
+    </div>
+
+    <hr class="my-(--spacing-md) border-(--stroke-primary-light)" />
+
+    <div class="flex items-start justify-between gap-(--spacing-md)">
+      <div>
+        <label id="settings-language-label" class="font-semibold" for="settings-language">{{ "settings.appearance.language" | transloco }}</label>
+        <p id="settings-language-description" class="text-(--font-primary-muted)">{{ "settings.appearance.languageDescription" | transloco }}</p>
+      </div>
+      <SelectMenu
+        class="w-fit shrink-0"
+        size="md"
+        [options]="languageCodes"
+        [label]="languageLabel"
+        [value]="currentLanguage()"
+        (valueChange)="onLanguageChange($event)">
+        <button selectTrigger type="button" id="settings-language" class="select-trigger" aria-describedby="settings-language-description">
+          <ng-container *ngComponentOutlet="languageIcon(currentLanguage())" />
+          <span class="select-trigger-label">{{ languageLabel(currentLanguage()) }}</span>
+          <chevron-down-icon class="select-chevron" />
+        </button>
+        <ng-template #selectOption let-option>
+          <span class="flex items-center gap-(--spacing-xs)">
+            <ng-container *ngComponentOutlet="languageIcon(option)" />
+            {{ languageLabel(option) }}
+          </span>
+        </ng-template>
+      </SelectMenu>
+    </div>
+  `
+		}]
+	}]
+});
+var SettingsShortcutsPanelComponent = class SettingsShortcutsPanelComponent {
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SettingsShortcutsPanelComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "14.0.0",
+		version: "22.2.1",
+		type: SettingsShortcutsPanelComponent,
+		isStandalone: true,
+		selector: "settings-shortcuts-panel",
+		providers: [provideTranslocoScope("settings")],
+		ngImport: i0,
+		template: `
+    <h2 class="text-(length:--size-2xl) font-semibold">{{ "settings.shortcuts.title" | transloco }}</h2>
+    <p class="mb-(--spacing-md) text-(--font-primary-muted)">{{ "settings.shortcuts.description" | transloco }}</p>
+    <keyboard-shortcuts-list />
+  `,
+		isInline: true,
+		dependencies: [{
+			kind: "component",
+			type: KeyboardShortcutsListComponent,
+			selector: "keyboard-shortcuts-list"
+		}, {
+			kind: "pipe",
+			type: TranslocoPipe,
+			name: "transloco"
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SettingsShortcutsPanelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "settings-shortcuts-panel",
+			imports: [TranslocoPipe, KeyboardShortcutsListComponent],
+			providers: [provideTranslocoScope("settings")],
+			template: `
+    <h2 class="text-(length:--size-2xl) font-semibold">{{ "settings.shortcuts.title" | transloco }}</h2>
+    <p class="mb-(--spacing-md) text-(--font-primary-muted)">{{ "settings.shortcuts.description" | transloco }}</p>
+    <keyboard-shortcuts-list />
+  `
+		}]
+	}]
+});
+let active;
+var SettingsDialogComponent = class SettingsDialogComponent {
+	call = injectCallRef();
+	dialog = viewChild(DialogComponent, ...ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []);
+	items = [
+		{
+			id: "account",
+			labelKey: "settings.account.nav"
+		},
+		{
+			id: "appearance",
+			labelKey: "settings.appearance.nav"
+		},
+		{
+			id: "shortcuts",
+			labelKey: "settings.shortcuts.nav"
+		}
+	];
+	panel = signal(this.call.props()?.panel ?? "account", ...ngDevMode ? [{ debugName: "panel" }] : /* istanbul ignore next */ []);
+	duplicate = active !== void 0;
+	constructor() {
+		if (active) {
+			active.panel.set(this.panel());
+			afterNextRender(() => this.call.end("dialog-close"));
+			return;
+		}
+		active = this;
+		inject(DestroyRef).onDestroy(() => {
+			if (active === this) active = void 0;
+		});
+		afterNextRender(() => this.dialog()?.open());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SettingsDialogComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: SettingsDialogComponent,
+		isStandalone: true,
+		selector: "settings-dialog",
+		providers: [provideTranslocoScope("settings")],
+		viewQueries: [{
+			propertyName: "dialog",
+			first: true,
+			predicate: DialogComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    @if (!duplicate) {
+      <div dialog #dialog="dialog" [closeLabel]="'settings.close' | transloco" (closed)="call.end($event)">
+        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch!">
+          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) bg-(--layer-page-on-layer) p-(--spacing-sm)">
+            <button
+              type="button"
+              variant="none"
+              class="modal-close mb-(--spacing-sm)"
+              [attr.aria-label]="'settings.close' | transloco"
+              (click)="dialog.close()">
+              <XMarkIcon aria-hidden="true" />
+            </button>
+
+            <!-- Panels are a navigation, not a tablist: each one is a button, the current one is
+                 flagged with aria-current, which is what a screen reader reads out. -->
+            <nav [attr.aria-label]="'settings.title' | transloco" class="flex flex-col gap-(--spacing-3xs)">
+              @for (item of items; track item.id) {
+                <button
+                  type="button"
+                  variant="none"
+                  class="flex h-(--row-height-md) w-full cursor-pointer items-center justify-start gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent px-(--spacing-xs) text-left text-(--layer-page-font) transition-colors hover:bg-(--bg-primary-light) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) aria-[current=page]:bg-(--bg-primary-base) aria-[current=page]:text-(--font-neutral-white) aria-[current=page]:hover:bg-(--bg-primary-base)"
+                  [attr.aria-current]="panel() === item.id ? 'page' : null"
+                  (click)="panel.set(item.id)">
+                  @switch (item.id) {
+                    @case ("account") {
+                      <user-icon aria-hidden="true" />
+                    }
+                    @case ("appearance") {
+                      <palette-icon aria-hidden="true" />
+                    }
+                    @case ("shortcuts") {
+                      <keyboard-icon aria-hidden="true" />
+                    }
+                  }
+                  {{ item.labelKey | transloco }}
+                </button>
+              }
+            </nav>
+          </div>
+
+          <div class="m-(--spacing-xs) flex min-w-0 flex-1 flex-col overflow-y-auto rounded-(--radius-lg) bg-(--layer-page-layer) p-(--spacing-xl)">
+            @switch (panel()) {
+              @case ("account") {
+                <settings-account-panel class="flex min-h-0 flex-1 flex-col" />
+              }
+              @case ("appearance") {
+                <settings-appearance-panel />
+              }
+              @case ("shortcuts") {
+                <settings-shortcuts-panel />
+              }
+            }
+          </div>
+        </DialogContent>
+      </div>
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: ButtonComponent,
+				selector: "button",
+				inputs: [
+					"class",
+					"variant",
+					"scheme",
+					"iconOnly",
+					"size"
+				]
+			},
 			{
 				kind: "component",
-				type: UserProfileFormComponent,
-				selector: "user-profile-form, UserProfileForm, userprofileform",
-				inputs: ["currentLanguage"],
-				outputs: ["currentLanguageChange"]
+				type: DialogComponent,
+				selector: "dialog, [dialog]",
+				inputs: ["closeLabel"],
+				outputs: ["closed"],
+				exportAs: ["dialog"]
 			},
 			{
 				kind: "directive",
-				type: DialogTitleComponent,
-				selector: "DialogTitle",
-				inputs: ["id", "class"]
+				type: DialogContentComponent,
+				selector: "DialogContent",
+				inputs: [
+					"size",
+					"labelledby",
+					"class"
+				]
+			},
+			{
+				kind: "component",
+				type: UserIcon,
+				selector: "user, user-icon, User, UserIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: PaletteIcon,
+				selector: "palette, palette-icon, Palette, PaletteIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: KeyboardIcon,
+				selector: "keyboard, keyboard-icon, Keyboard, KeyboardIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: XMarkIcon,
+				selector: "x-mark, x-mark-icon, XMark, XMarkIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: SettingsAccountPanelComponent,
+				selector: "settings-account-panel"
+			},
+			{
+				kind: "component",
+				type: SettingsAppearancePanelComponent,
+				selector: "settings-appearance-panel"
+			},
+			{
+				kind: "component",
+				type: SettingsShortcutsPanelComponent,
+				selector: "settings-shortcuts-panel"
 			},
 			{
 				kind: "pipe",
@@ -31663,33 +32261,82 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.1",
 	ngImport: i0,
-	type: UserProfileDialog,
+	type: SettingsDialogComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "user-profile-dialog, userprofiledialog, UserProfileDialog",
+			selector: "settings-dialog",
 			imports: [
+				TranslocoPipe,
+				ButtonComponent,
 				DialogComponent,
-				DialogHeaderComponent,
 				DialogContentComponent,
-				DialogBodyComponent,
-				UserProfileFormComponent,
-				DialogTitleComponent,
-				TranslocoPipe
+				UserIcon,
+				PaletteIcon,
+				KeyboardIcon,
+				XMarkIcon,
+				SettingsAccountPanelComponent,
+				SettingsAppearancePanelComponent,
+				SettingsShortcutsPanelComponent
 			],
-			providers: [provideTranslocoScope("user-profile")],
+			providers: [provideTranslocoScope("settings")],
 			template: `
-    <div dialog #dialog="dialog" (closed)="call.end($event)">
-      <DialogContent size="md">
-        <DialogHeader [closeLabel]="'userProfile.close' | transloco">
-          <DialogTitle>{{ 'userProfile.title' | transloco }}</DialogTitle>
-        </DialogHeader>
+    @if (!duplicate) {
+      <div dialog #dialog="dialog" [closeLabel]="'settings.close' | transloco" (closed)="call.end($event)">
+        <DialogContent size="xl" class="h-[min(48rem,calc(100dvh-2rem))] flex-row! items-stretch!">
+          <div class="flex w-64 shrink-0 flex-col gap-(--spacing-3xs) bg-(--layer-page-on-layer) p-(--spacing-sm)">
+            <button
+              type="button"
+              variant="none"
+              class="modal-close mb-(--spacing-sm)"
+              [attr.aria-label]="'settings.close' | transloco"
+              (click)="dialog.close()">
+              <XMarkIcon aria-hidden="true" />
+            </button>
 
-        <DialogBody class="flex-1">
-          <user-profile-form class="flex flex-1 flex-col min-h-0" />
-        </DialogBody>
-      </DialogContent>
-    </div>
+            <!-- Panels are a navigation, not a tablist: each one is a button, the current one is
+                 flagged with aria-current, which is what a screen reader reads out. -->
+            <nav [attr.aria-label]="'settings.title' | transloco" class="flex flex-col gap-(--spacing-3xs)">
+              @for (item of items; track item.id) {
+                <button
+                  type="button"
+                  variant="none"
+                  class="flex h-(--row-height-md) w-full cursor-pointer items-center justify-start gap-(--spacing-xs) rounded-(--radius-sm) border-0 bg-transparent px-(--spacing-xs) text-left text-(--layer-page-font) transition-colors hover:bg-(--bg-primary-light) focus-visible:outline-2 focus-visible:outline-offset-0 focus-visible:outline-(--stroke-focus) aria-[current=page]:bg-(--bg-primary-base) aria-[current=page]:text-(--font-neutral-white) aria-[current=page]:hover:bg-(--bg-primary-base)"
+                  [attr.aria-current]="panel() === item.id ? 'page' : null"
+                  (click)="panel.set(item.id)">
+                  @switch (item.id) {
+                    @case ("account") {
+                      <user-icon aria-hidden="true" />
+                    }
+                    @case ("appearance") {
+                      <palette-icon aria-hidden="true" />
+                    }
+                    @case ("shortcuts") {
+                      <keyboard-icon aria-hidden="true" />
+                    }
+                  }
+                  {{ item.labelKey | transloco }}
+                </button>
+              }
+            </nav>
+          </div>
+
+          <div class="m-(--spacing-xs) flex min-w-0 flex-1 flex-col overflow-y-auto rounded-(--radius-lg) bg-(--layer-page-layer) p-(--spacing-xl)">
+            @switch (panel()) {
+              @case ("account") {
+                <settings-account-panel class="flex min-h-0 flex-1 flex-col" />
+              }
+              @case ("appearance") {
+                <settings-appearance-panel />
+              }
+              @case ("shortcuts") {
+                <settings-shortcuts-panel />
+              }
+            }
+          </div>
+        </DialogContent>
+      </div>
+    }
   `
 		}]
 	}],
@@ -31699,7 +32346,7 @@ i0.ɵɵngDeclareClassMetadata({
 		args: [i0.forwardRef(() => DialogComponent), { isSignal: true }]
 	}] }
 });
-const UserProfile = createCallable(UserProfileDialog);
+const Settings = createCallable(SettingsDialogComponent);
 const auditInterceptorFn = (request, next) => {
 	if (!request.url.includes("api/v1")) return next(request);
 	if (isJsonable(request.body) && !(request.body instanceof HttpParams)) addAuditAdditionalInfo(request.body);
@@ -32150,6 +32797,6 @@ function provideSessionExpiry(options = {}) {
 const queryNameResolver = () => {
 	return inject(AppStore).getDefaultQuery()?.name || "";
 };
-export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, ATOMIC_CLIENT, ATOMIC_SCOPED_PROVIDERS, AddToCollection, AdvancedFiltersBodyComponent, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchTabs, AggregationComponent, AggregationDateComponent, AggregationDateRange, AggregationItemDirective, AggregationListComponent, AggregationPanelComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertForm, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, AppliedFiltersComponent, ArticleEntities, ArticleEntitiesTabPanel, ArticleExtracts, ArticleExtractsTabPanel, ArticleHighlights, ArticleLabels, ArticleLabelsTabPanel, ArticleMatchLocations, ArticleMatchLocationsTabPanel, ArticleSimilarDocuments, ArticleSimilarDocumentsTabPanel, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, ConverterSelectComponent, DeleteCollection, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, EditLabels, ErrorComponent, Export, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FORM_ALERT_CLASS, FORM_BARE_CLASS, FORM_ERROR_CLASS, FORM_FIELD_CLASS, FORM_FOOTER_CLASS, FORM_LABEL_CLASS, FORM_SURFACE_CLASS, FaIconComponent, FeatureFlags, FeatureFlagsDialogComponent, Feedback, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, FloatingToolbarComponent, ForgotPasswordComponent, HIGHLIGHTS, HeatmapComponent, HighlightWordPipe, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardShortcutsDialog, KeyboardShortcutsDialogComponent, KeyboardShortcutsService, LabelService, LabelsEditDialog, ListPanelItemDirective, LoadingComponent, MarkdownPipe, MarkdownRendererService, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUser, OverrideUserDialogComponent, PREVIEW_ASSISTANT_COMPONENT, PREVIEW_CONFIG, PagerComponent, PreviewActionsComponent, PreviewContentComponent, PreviewHeaderComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettings, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SavedSearch, SavedSearchDialog, SavedSearchPopover, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectionService, SelectionStore, ShortcutDirective, ShowBookmarkDirective, SignInComponent, SignedOutComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TagCloudComponent, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserOverrideService, UserProfile, UserProfileDialog, UserProfileFormComponent, UserProfileService, UserSettingsPersistence, UserSettingsStore, WEIGHT_STEPS, WordCloudComponent, ZoomControlsComponent, __resetSignInMutexForTests, activateShortcutTarget, applyThemeToNativeElement, atomicClientProvider, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildHeatmap, buildQuery, buildTagCloud, candidatesFor, canonicalize, debouncedSignal, errorInterceptorFn, fieldErrorKey, fieldShowsError, filterKey, filterLeaves, filterValues, findAggregation, flagsFromWeekdays, focusWhenReady, galactikPrimitive, galactikSemantic, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, injectAdvancedFilters, injectAtomicClient, injectRouteNavigation, injectUserSettingsPatch, isAuthRoute, isSignInInFlight, itemLabel, layoutWordCloud, legacyFilterToFilter, makeWeightScale, multiSelectionToolbarVariants, paletteColor, processCssVars, provideAtomicClient, provideAtomicNotifications, provideAtomicScope, provideDocumentLang, provideKeyboardShortcuts, provideSessionExpiry, quantileScale, queryNameResolver, rebuildWithout, seriesPalette, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, timelinePalette, toAriaKeyshortcuts, toDisplayParts, toPercentages, toSeries, toastInterceptorFn, weekdaysFromFlags, withAggregationsFeatures, withAlertsFeatures, withAlpha, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFetch, withMultiSelectionFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
+export { AGGREGATIONS_NAMES, AGGREGATIONS_NAMES_PRESET_DEFAULT, APP_FEATURES, ATOMIC_CLIENT, ATOMIC_SCOPED_PROVIDERS, AddToCollection, AdvancedFiltersBodyComponent, AdvancedFiltersComponent, AdvancedSearch, AdvancedSearchTabs, AggregationComponent, AggregationDateComponent, AggregationDateRange, AggregationItemDirective, AggregationListComponent, AggregationPanelComponent, AggregationTreeComponent, AggregationsService, AggregationsStore, Alert, AlertDialog, AlertForm, AlertsComponent, AppService, AppStore, ApplicationService, ApplicationStore, AppliedFiltersComponent, ArticleEntities, ArticleEntitiesTabPanel, ArticleExtracts, ArticleExtractsTabPanel, ArticleHighlights, ArticleLabels, ArticleLabelsTabPanel, ArticleMatchLocations, ArticleMatchLocationsTabPanel, ArticleSimilarDocuments, ArticleSimilarDocumentsTabPanel, AsideFiltersComponent, AuditFeedbackType, AuditService, AuthGuard, AuthPageComponent, AutocompleteService, BOOKMARKS_CONFIG, BOOKMARKS_OPTIONS, BackdropComponent, BackdropService, BookmarkButtonComponent, BookmarksComponent, COLLECTIONS_CONFIG, COLLECTIONS_OPTIONS, COMPONENTS_FOR_DOCUMENT_TYPE, ChangePasswordComponent, ChildMarkerDirective, CollectionsComponent, CollectionsDialog, ConverterSelectComponent, DeleteCollection, DeleteCollectionDialog, DidYouMeanComponent, DocumentLocatorComponent, EditLabels, ErrorComponent, Export, ExportDialog, ExportService, FILTERS_BREAKPOINT, FILTER_DATE_ALLOW_CUSTOM_RANGE, FORM_ALERT_CLASS, FORM_BARE_CLASS, FORM_ERROR_CLASS, FORM_FIELD_CLASS, FORM_FOOTER_CLASS, FORM_LABEL_CLASS, FORM_SURFACE_CLASS, FaIconComponent, FeatureFlags, FeatureFlagsDialogComponent, Feedback, FeedbackDialogComponent, FileSizePipe, FilterButtonComponent, FiltersBarComponent, FloatingToolbarComponent, ForgotPasswordComponent, HIGHLIGHTS, HeatmapComponent, HighlightWordPipe, InfinityScrollDirective, InlineWorker, JsonMethodPluginService, KeyboardShortcutsDialog, KeyboardShortcutsDialogComponent, KeyboardShortcutsListComponent, KeyboardShortcutsService, LabelService, LabelsEditDialog, ListPanelItemDirective, LoadingComponent, MarkdownPipe, MarkdownRendererService, MetadataComponent, MissingTermsComponent, MoreButtonComponent, MoreComponent, MultiSelectLabelsComponent, MultiSelectionToolbarComponent, NON_SEARCHABLE_COLUMNS, NON_SEARCHABLE_DEFAULTS, NavbarTabsComponent, NavigationService, NoResultComponent, OpenArticleOnCtrlEnterDirective, OperatorPipe, OverflowItemDirective, OverflowManagerDirective, OverflowStopDirective, OverrideUser, OverrideUserDialogComponent, PREVIEW_ASSISTANT_COMPONENT, PREVIEW_CONFIG, PagerComponent, PreviewActionsComponent, PreviewContentComponent, PreviewHeaderComponent, PreviewNavigator, PreviewService, PrincipalService, PrincipalStore, QueryParamsStore, QueryService, RECENT_SEARCHES_CONFIG, RECENT_SEARCHES_OPTIONS, ROUTE_COMPONENTS, RecentSearchesComponent, ResetUserSettings, ResetUserSettingsDialogComponent, SAVED_SEARCHES_CONFIG, SAVED_SEARCHES_OPTIONS, SavedSearch, SavedSearchDialog, SavedSearchPopover, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectionService, SelectionStore, Settings, SettingsAccountPanelComponent, SettingsAppearancePanelComponent, SettingsDialogComponent, SettingsShortcutsPanelComponent, ShortcutDirective, ShowBookmarkDirective, SignInComponent, SignedOutComponent, SortSelectorComponent, SourceComponent, SourceIconPipe, SponsoredResultsComponent, SyslangPipe, THEMES, TagCloudComponent, TextChunkService, ThemeProviderDirective, ThemeSelectorComponent, ThemeStore, ThemeToggleComponent, TranslocoDateImpurePipe, UserOverrideService, UserProfileFormComponent, UserProfileService, UserSettingsPersistence, UserSettingsStore, WEIGHT_STEPS, WordCloudComponent, ZoomControlsComponent, __resetSignInMutexForTests, activateShortcutTarget, applyThemeToNativeElement, atomicClientProvider, auditInterceptorFn, authInterceptorFn, bodyInterceptorFn, bootstrapApp, buildHeatmap, buildQuery, buildTagCloud, candidatesFor, canonicalize, debouncedSignal, errorInterceptorFn, fieldErrorKey, fieldShowsError, filterKey, filterLeaves, filterValues, findAggregation, flagsFromWeekdays, focusWhenReady, galactikPrimitive, galactikSemantic, getCurrentPath, getCurrentQueryName, getQueryNameFromRoute, injectAdvancedFilters, injectAtomicClient, injectRouteNavigation, injectUserSettingsPatch, isAuthRoute, isSignInInFlight, itemLabel, layoutWordCloud, legacyFilterToFilter, makeWeightScale, multiSelectionToolbarVariants, paletteColor, processCssVars, provideAtomicClient, provideAtomicNotifications, provideAtomicScope, provideDocumentLang, provideKeyboardShortcuts, provideSessionExpiry, quantileScale, queryNameResolver, rebuildWithout, seriesPalette, signIn, themeColorNameToCssVariable, themeColorsToCssVariables, timelinePalette, toAriaKeyshortcuts, toDisplayParts, toPercentages, toSeries, toastInterceptorFn, weekdaysFromFlags, withAggregationsFeatures, withAlertsFeatures, withAlpha, withAppFeatures, withApplicationFeatures, withAssistantFeatures, withBasketsFeatures, withBookmarkFeatures, withBootstrapApp, withExtractsFeatures, withFetch, withMultiSelectionFeatures, withQueryParamsFeatures, withRecentSearchesFeatures, withSavedSearchesFeatures, withSelectionFeatures, withThemeBodyHook, withThemes, withThemesFeatures, withUserSettingsFeatures };
 
 //# sourceMappingURL=sinequa-atomic-angular.mjs.map