@sinequa/atomic-angular 2.7.0 → 2.9.0

package/fesm2022/sinequa-atomic-angular.mjs

@@ -2,7 +2,7 @@ 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, scan, shareReplay, switchMap, tap, throwError } from "rxjs";
 import { TranslocoPipe, TranslocoService, provideTranslocoScope } from "@jsverse/transloco";
-import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, 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, LockIcon, 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, SidebarInsetDirective, SlashIcon, SlidersIcon, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, 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, isApplePlatform } from "@sinequa/galactik";
+import { ArrowDownIcon, ArrowDownZaIcon, ArrowLeftIcon, ArrowRightFromBracketIcon, ArrowRightIcon, ArrowUpAzIcon, ArrowUpIcon, ArrowUpRightFromSquareIcon, ArrowsMaximizeIcon, AutocompleteComponent, AvatarComponent, AvatarFallbackComponent, AvatarImageComponent, BadgeComponent, BarsIcon, BellIcon, BellSlashIcon, 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, GripVerticalIcon, 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, LockIcon, MagnifyingGlassIcon, MagnifyingGlassMinusIcon, MagnifyingGlassPlusIcon, MenuComponent, MenuContentComponent, MenuItemComponent, MenuTriggerDirective, MoonIcon, PaletteIcon, PaperclipIcon, PenToSquareIcon, PlusIcon, PopoverDirective, PresentationIcon, QuestionCircleIcon, RadioComponent, RobotIcon, SaveIcon, SearchBarComponent, SearchIcon, SearchInputComponent, SelectComponent, SelectTriggerDirective, SendIcon, SheetBodyComponent, SheetComponent, SheetHeaderComponent, SidebarInsetDirective, SlashIcon, SlidersIcon, SortableDirective, SortableItemDirective, SparklesIcon, SpinnerIcon, SquareCheckIcon, SquareIcon, SquareMinusIcon, StarIcon, SunBrightIcon, SwitchComponent, SyncIcon, TabComponent, TabListComponent, TabPanelComponent, TabsComponent, TagComponent, TagIcon, TagInputComponent, TagsIcon, TextareaComponent, TextareaControlDirective, ThumbsDownIcon, ThumbsUpIcon, ToggleComponent, ToggleGroupComponent, ToggleItemComponent, ToggleLeftIcon, ToggleRightIcon, TooltipDirective, TrashCanIcon, TrashIcon, TreeComponent, TreeItemComponent, TreeItemExpanderComponent, TreeItemGroupComponent, TriangleAlertIcon, TruncatedDirective, UndoIcon, UserIcon, UserSecretIcon, VideoIcon, XMarkIcon, createCallable, injectCallRef, isApplePlatform } 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";
@@ -18,8 +18,6 @@ import { FormField, FormRoot, applyEach, form, readonly, required, schema, submi
 import { injectVirtualizer } from "@tanstack/angular-virtual";
 import { catchError as catchError$1, filter as filter$2, map as map$1, switchMap as switchMap$1 } from "rxjs/operators";
 import { Tab } from "@angular/aria/tabs";
-import * as i1 from "@angular/cdk/drag-drop";
-import { DragDropModule } from "@angular/cdk/drag-drop";
 import { A11yModule } from "@angular/cdk/a11y";
 import { Calendar, months } from "vanilla-calendar-pro";
 import { getDate, getDateString } from "vanilla-calendar-pro/utils";
@@ -1374,9 +1372,8 @@ function withAlertsFeatures() {
 				});
 			},
 			async updateAlert(alert, index) {
-				const alerts = store.alerts();
-				if (index < 0 || index >= alerts.length) return;
-				alerts.splice(index, 1, alert);
+				if (index < 0 || index >= store.alerts().length) return;
+				const alerts = store.alerts().with(index, alert);
 				await patch({ alerts }, {
 					type: "Alert_Update",
 					detail: { alert: alert.name }
@@ -1390,8 +1387,8 @@ function withAlertsFeatures() {
 			},
 			async updateAlerts(alerts) {
 				await patch({ alerts }, {
-					type: "Alert_Update",
-					detail: { alert: alert.name }
+					type: "Alerts_Update",
+					detail: { alerts: alerts.map((a) => a.name).join(", ") }
 				});
 				patchState(store, (state) => {
 					return {
@@ -5745,6 +5742,86 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+const COLOR_CLASSES = {
+	yellow: "bg-(--bg-yellow-base-alt) text-(--font-yellow-muted)",
+	blue: "bg-(--bg-info-base-alt) text-(--font-info-muted)",
+	pink: "bg-(--bg-accent-base-alt) text-(--font-accent-muted)",
+	indigo: "bg-(--bg-indigo-base-alt) text-(--font-indigo-muted)",
+	green: "bg-(--bg-success-base-alt) text-(--font-success-muted)",
+	orange: "bg-(--bg-warning-base-alt) text-(--font-warning-muted)"
+};
+var ListPanelEmptyComponent = class ListPanelEmptyComponent {
+	color = input("blue", ...ngDevMode ? [{ debugName: "color" }] : /* istanbul ignore next */ []);
+	tileClasses = computed(() => `inline-flex size-12 shrink-0 items-center justify-center rounded-(--radius-md) [&_svg]:size-6 [&_svg]:opacity-80 ${COLOR_CLASSES[this.color()]}`, ...ngDevMode ? [{ debugName: "tileClasses" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: ListPanelEmptyComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.1.0",
+		version: "22.2.1",
+		type: ListPanelEmptyComponent,
+		isStandalone: true,
+		selector: "list-panel-empty, ListPanelEmpty",
+		inputs: { color: {
+			classPropertyName: "color",
+			publicName: "color",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: { classAttribute: "flex flex-col items-center gap-(--spacing-xs) py-(--spacing-xs) text-center [&>[listPanelEmptyHint]]:m-0 [&>[listPanelEmptyHint]]:-mt-(--spacing-2xs) [&>[listPanelEmptyHint]]:max-w-prose [&>[listPanelEmptyHint]]:text-(length:--size-sm) [&>[listPanelEmptyHint]]:leading-(--line-height-2) [&>[listPanelEmptyHint]]:text-(--font-neutral-muted)" },
+		ngImport: i0,
+		template: `
+    <span [class]="tileClasses()" aria-hidden="true">
+      <ng-content select="[listPanelEmptyIcon]" />
+    </span>
+    <p class="m-0 text-(length:--size-base) leading-(--line-height-3) font-semibold text-(--font-neutral-base)">
+      <ng-content />
+    </p>
+    <ng-content select="[listPanelEmptyHint]" />
+    <ng-content select="[listPanelEmptyAction]" />
+  `,
+		isInline: true,
+		changeDetection: i0.ChangeDetectionStrategy.OnPush
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: ListPanelEmptyComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "list-panel-empty, ListPanelEmpty",
+			changeDetection: ChangeDetectionStrategy.OnPush,
+			host: { class: "flex flex-col items-center gap-(--spacing-xs) py-(--spacing-xs) text-center [&>[listPanelEmptyHint]]:m-0 [&>[listPanelEmptyHint]]:-mt-(--spacing-2xs) [&>[listPanelEmptyHint]]:max-w-prose [&>[listPanelEmptyHint]]:text-(length:--size-sm) [&>[listPanelEmptyHint]]:leading-(--line-height-2) [&>[listPanelEmptyHint]]:text-(--font-neutral-muted)" },
+			template: `
+    <span [class]="tileClasses()" aria-hidden="true">
+      <ng-content select="[listPanelEmptyIcon]" />
+    </span>
+    <p class="m-0 text-(length:--size-base) leading-(--line-height-3) font-semibold text-(--font-neutral-base)">
+      <ng-content />
+    </p>
+    <ng-content select="[listPanelEmptyHint]" />
+    <ng-content select="[listPanelEmptyAction]" />
+  `
+		}]
+	}],
+	propDecorators: { color: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "color",
+			required: false
+		}]
+	}] }
+});
 var CollectionsDialog = class CollectionsDialog {
 	call = injectCallRef();
 	createInputElement = viewChild("createInput", ...ngDevMode ? [{ debugName: "createInputElement" }] : /* istanbul ignore next */ []);
@@ -5920,9 +5997,21 @@ var CollectionsDialog = class CollectionsDialog {
                   }
                 </div>
               } @else {
-                <p class="py-4 text-center text-neutral-500">
-                  {{ (searchText().trim() ? 'collections.noMatch' : 'collections.noCollections') | transloco }}
-                </p>
+                <!-- One ListPanelEmpty per branch: an @if holding the icon and the text would be projected as a
+                     whole into the default slot, and the icon would not reach the tile. -->
+                @if (searchText().trim()) {
+                  <ListPanelEmpty color="indigo">
+                    <search-icon listPanelEmptyIcon />
+                    {{ 'collections.noMatch' | transloco }}
+                    <p listPanelEmptyHint>{{ 'collections.noMatchHint' | transloco }}</p>
+                  </ListPanelEmpty>
+                } @else {
+                  <ListPanelEmpty color="indigo">
+                    <inbox-icon listPanelEmptyIcon />
+                    {{ 'collections.noCollections' | transloco }}
+                    <p listPanelEmptyHint>{{ 'collections.noCollectionsDialogHint' | transloco }}</p>
+                  </ListPanelEmpty>
+                }
               }
             </div>
           } @else {
@@ -6059,6 +6148,24 @@ var CollectionsDialog = class CollectionsDialog {
 				],
 				outputs: ["checkedChange"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
+			{
+				kind: "component",
+				type: InboxIcon,
+				selector: "inbox, inbox-icon, Inbox, InboxIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: SearchIcon,
+				selector: "search, search-icon, Search, SearchIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -6088,7 +6195,10 @@ i0.ɵɵngDeclareClassMetadata({
 				DialogFooterComponent,
 				InputComponent,
 				InputControlDirective,
-				CheckboxComponent
+				CheckboxComponent,
+				ListPanelEmptyComponent,
+				InboxIcon,
+				SearchIcon
 			],
 			providers: [provideTranslocoScope("collections")],
 			template: `
@@ -6137,9 +6247,21 @@ i0.ɵɵngDeclareClassMetadata({
                   }
                 </div>
               } @else {
-                <p class="py-4 text-center text-neutral-500">
-                  {{ (searchText().trim() ? 'collections.noMatch' : 'collections.noCollections') | transloco }}
-                </p>
+                <!-- One ListPanelEmpty per branch: an @if holding the icon and the text would be projected as a
+                     whole into the default slot, and the icon would not reach the tile. -->
+                @if (searchText().trim()) {
+                  <ListPanelEmpty color="indigo">
+                    <search-icon listPanelEmptyIcon />
+                    {{ 'collections.noMatch' | transloco }}
+                    <p listPanelEmptyHint>{{ 'collections.noMatchHint' | transloco }}</p>
+                  </ListPanelEmpty>
+                } @else {
+                  <ListPanelEmpty color="indigo">
+                    <inbox-icon listPanelEmptyIcon />
+                    {{ 'collections.noCollections' | transloco }}
+                    <p listPanelEmptyHint>{{ 'collections.noCollectionsDialogHint' | transloco }}</p>
+                  </ListPanelEmpty>
+                }
               }
             </div>
           } @else {
@@ -16096,6 +16218,169 @@ var Alert;
 	})(Alert.Days || (Alert.Days = {}));
 })(Alert || (Alert = {}));
 const COMPONENTS_FOR_DOCUMENT_TYPE = new InjectionToken("COMPONENTS_FOR_DOCUMENT_TYPE");
+const WEEKDAY_FLAGS = [
+	Alert.Days.Monday,
+	Alert.Days.Tuesday,
+	Alert.Days.Wednesday,
+	Alert.Days.Thursday,
+	Alert.Days.Friday,
+	Alert.Days.Saturday,
+	Alert.Days.Sunday
+];
+const TIMED_FREQUENCIES = [
+	Alert.Frequency.Daily,
+	Alert.Frequency.Weekly,
+	Alert.Frequency.Monthly
+];
+function weekdayNames(lang) {
+	const format = new Intl.DateTimeFormat(lang, { weekday: "short" });
+	return WEEKDAY_FLAGS.map((_, offset) => format.format(new Date(2024, 0, 1 + offset)));
+}
+function formatDays(days, lang) {
+	const names = weekdayNames(lang);
+	const selected = WEEKDAY_FLAGS.map((flag) => (days & flag) !== 0);
+	const parts = [];
+	let start = 0;
+	while (start < selected.length) {
+		if (!selected[start]) {
+			start++;
+			continue;
+		}
+		let end = start;
+		while (end + 1 < selected.length && selected[end + 1]) end++;
+		if (end - start >= 2) parts.push(`${names[start]}–${names[end]}`);
+		else for (let i = start; i <= end; i++) parts.push(names[i]);
+		start = end + 1;
+	}
+	return parts.join(", ");
+}
+function alertSummary(lang, alert) {
+	const parts = [];
+	if (!alert.active) parts.push({ key: "alerts.paused" });
+	if (alert.frequency !== void 0 && Alert.Frequency[alert.frequency] !== void 0) parts.push({ key: `alerts.frequency.${Alert.Frequency[alert.frequency]}` });
+	if (alert.times && TIMED_FREQUENCIES.includes(alert.frequency)) parts.push({ text: alert.times });
+	const days = alert.days ?? Alert.Days.None;
+	if (alert.frequency !== Alert.Frequency.Immediate && days !== Alert.Days.None && (days & Alert.Days.AllDays) !== Alert.Days.AllDays) parts.push({ text: formatDays(days, lang) });
+	return parts;
+}
+function querySummary(query) {
+	if (!query) return [];
+	const parts = [];
+	if (query.text) parts.push({ text: `“${query.text}”` });
+	if (query.tab) parts.push({
+		key: "alerts.queryTab",
+		params: { tab: query.tab }
+	});
+	const filters = Array.isArray(query.filters) ? query.filters.length : 0;
+	if (filters === 1) parts.push({ key: "alerts.queryFiltersOne" });
+	else if (filters > 1) parts.push({
+		key: "alerts.queryFiltersMany",
+		params: { count: filters }
+	});
+	return parts;
+}
+function saveErrorDetail(error) {
+	const { errorMessage, message } = error ?? {};
+	return errorMessage ?? message;
+}
+var AlertSaveErrorComponent = class AlertSaveErrorComponent {
+	detail = input(void 0, ...ngDevMode ? [{ debugName: "detail" }] : /* istanbul ignore next */ []);
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AlertSaveErrorComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: AlertSaveErrorComponent,
+		isStandalone: true,
+		selector: "alert-save-error",
+		inputs: { detail: {
+			classPropertyName: "detail",
+			publicName: "detail",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		host: {
+			attributes: { "role": "alert" },
+			classAttribute: "save-error"
+		},
+		providers: [provideTranslocoScope("alerts")],
+		ngImport: i0,
+		template: `
+    <div class="min-h-0 overflow-hidden">
+      <div
+        class="flex w-full items-start gap-(--spacing-xs) rounded-(--radius-md) border border-(--stroke-error-base) bg-(--bg-error-lightest) px-(--spacing-sm) py-(--spacing-xs) text-(--font-error-base)">
+        <TriangleAlert class="mt-px size-3.5 shrink-0" width="14" height="14" aria-hidden="true" />
+        <div class="flex min-w-0 flex-col">
+          <p class="m-0 text-(length:--size-sm) font-medium">{{ "alerts.saveFailed" | transloco }}</p>
+          @if (detail()) {
+            <p class="m-0 text-(length:--size-xs) wrap-anywhere opacity-80">{{ detail() }}</p>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+		isInline: true,
+		styles: [":host{display:grid;animation:save-error-in .22s ease-out}:host>div>div{animation:save-error-card-in .22s ease-out}@keyframes save-error-in{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes save-error-card-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){:host,:host>div>div{animation:none}}\n"],
+		dependencies: [{
+			kind: "component",
+			type: TriangleAlertIcon,
+			selector: "triangle-alert, triangle-alert-icon, TriangleAlert, TriangleAlertIcon",
+			inputs: ["class"]
+		}, {
+			kind: "pipe",
+			type: TranslocoPipe,
+			name: "transloco"
+		}]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AlertSaveErrorComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "alert-save-error",
+			imports: [TranslocoPipe, TriangleAlertIcon],
+			providers: [provideTranslocoScope("alerts")],
+			host: {
+				class: "save-error",
+				role: "alert"
+			},
+			template: `
+    <div class="min-h-0 overflow-hidden">
+      <div
+        class="flex w-full items-start gap-(--spacing-xs) rounded-(--radius-md) border border-(--stroke-error-base) bg-(--bg-error-lightest) px-(--spacing-sm) py-(--spacing-xs) text-(--font-error-base)">
+        <TriangleAlert class="mt-px size-3.5 shrink-0" width="14" height="14" aria-hidden="true" />
+        <div class="flex min-w-0 flex-col">
+          <p class="m-0 text-(length:--size-sm) font-medium">{{ "alerts.saveFailed" | transloco }}</p>
+          @if (detail()) {
+            <p class="m-0 text-(length:--size-xs) wrap-anywhere opacity-80">{{ detail() }}</p>
+          }
+        </div>
+      </div>
+    </div>
+  `,
+			styles: [":host{display:grid;animation:save-error-in .22s ease-out}:host>div>div{animation:save-error-card-in .22s ease-out}@keyframes save-error-in{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes save-error-card-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){:host,:host>div>div{animation:none}}\n"]
+		}]
+	}],
+	propDecorators: { detail: [{
+		type: i0.Input,
+		args: [{
+			isSignal: true,
+			alias: "detail",
+			required: false
+		}]
+	}] }
+});
 const WEEKDAYS = [
 	{
 		key: "monday",
@@ -16141,6 +16426,15 @@ function emptyAlertModel() {
 		active: true
 	};
 }
+function modelOf(alert) {
+	return {
+		name: alert.name,
+		frequency: alert.frequency,
+		days: weekdaysFromFlags(alert.days),
+		time: alert.times,
+		active: alert.active
+	};
+}
 const alertSchema = schema((p) => {
 	required(p.name);
 	validate(p.name, ({ value }) => value().length > 0 && !value().trim() ? { kind: "required" } : void 0);
@@ -16148,13 +16442,17 @@ const alertSchema = schema((p) => {
 	required(p.time);
 	validate(p.days, ({ value, valueOf }) => valueOf(p.frequency) === Alert.Frequency.Immediate || Object.values(value()).some(Boolean) ? void 0 : { kind: "noDaySelected" });
 });
-var AlertDialog = class AlertDialog {
-	call = injectCallRef();
+let nextFormId = 0;
+var AlertFormComponent = class AlertFormComponent {
 	queryService = inject(QueryService);
 	queryParamsStore = inject(QueryParamsStore);
 	userSettingsStore = inject(UserSettingsStore);
 	transloco = inject(TranslocoService);
-	dialog = viewChild(DialogComponent, ...ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []);
+	lang = toSignal(this.transloco.langChanges$);
+	index = input(void 0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
+	saved = output();
+	executed = output();
+	formId = `alert-form-${nextFormId++}`;
 	fieldClass = FORM_FIELD_CLASS;
 	labelClass = FORM_LABEL_CLASS;
 	errorClass = FORM_ERROR_CLASS;
@@ -16164,43 +16462,48 @@ var AlertDialog = class AlertDialog {
 		Alert.Frequency.Immediate
 	];
 	frequency = Alert.Frequency;
+	Days = Alert.Days;
+	querySummary = querySummary;
 	frequencyLabel = (value) => this.transloco.translate(`alerts.frequency.${Alert.Frequency[value]}`);
 	weekdays = WEEKDAYS;
-	index = signal(void 0, ...ngDevMode ? [{ debugName: "index" }] : /* istanbul ignore next */ []);
-	alert = signal(void 0, ...ngDevMode ? [{ debugName: "alert" }] : /* istanbul ignore next */ []);
-	canUpdateQuery = signal(false, ...ngDevMode ? [{ debugName: "canUpdateQuery" }] : /* istanbul ignore next */ []);
+	dayNames = computed(() => weekdayNames(this.lang() ?? this.transloco.getActiveLang()), ...ngDevMode ? [{ debugName: "dayNames" }] : /* istanbul ignore next */ []);
+	alert = computed(() => {
+		const index = this.index();
+		return index === void 0 ? void 0 : this.userSettingsStore.alerts()[index];
+	}, ...ngDevMode ? [{ debugName: "alert" }] : /* istanbul ignore next */ []);
+	currentSearch = rxResource({
+		params: () => this.alert() ? true : void 0,
+		stream: () => this.queryService.search(this.queryParamsStore.getQuery(), false).pipe(map((response) => response.records?.length > 0))
+	});
+	canUpdateQuery = computed(() => this.currentSearch.value() === true, ...ngDevMode ? [{ debugName: "canUpdateQuery" }] : /* istanbul ignore next */ []);
 	updateStatus = signal("idle", ...ngDevMode ? [{ debugName: "updateStatus" }] : /* istanbul ignore next */ []);
-	alertModel = signal(emptyAlertModel(), ...ngDevMode ? [{ debugName: "alertModel" }] : /* istanbul ignore next */ []);
+	saveError = signal(void 0, ...ngDevMode ? [{ debugName: "saveError" }] : /* istanbul ignore next */ []);
+	alertModel = linkedSignal(() => {
+		const alert = this.alert();
+		return alert ? modelOf(alert) : emptyAlertModel();
+	}, ...ngDevMode ? [{ debugName: "alertModel" }] : /* istanbul ignore next */ []);
 	alertForm = form(this.alertModel, alertSchema, {
 		name: "alert",
 		submission: { action: async () => this.persist() }
 	});
+	saving = computed(() => this.alertForm().submitting(), ...ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []);
 	showDaysError = computed(() => fieldShowsError(this.alertForm.days), ...ngDevMode ? [{ debugName: "showDaysError" }] : /* istanbul ignore next */ []);
-	constructor() {
-		afterNextRender(() => this.init(this.call.props()));
-	}
-	async init(index) {
-		this.index.set(index);
-		const alert = index !== void 0 ? this.userSettingsStore.alerts()[index] : void 0;
-		this.alert.set(alert);
-		if (alert) {
-			this.alertModel.set({
-				name: alert.name,
-				frequency: alert.frequency,
-				days: weekdaysFromFlags(alert.days),
-				time: alert.times,
-				active: alert.active
-			});
-			const q = this.queryParamsStore.getQuery();
-			const response = await firstValueFrom(this.queryService.search(q, false));
-			this.canUpdateQuery.set(response.records?.length > 0);
-		} else this.alertModel.set(emptyAlertModel());
-		this.dialog()?.open();
+	setDays(mask) {
+		this.alertModel.update((model) => ({
+			...model,
+			days: weekdaysFromFlags(mask)
+		}));
 	}
 	async persist() {
-		if (this.alert()) await this.update();
-		else await this.create();
-		this.dialog()?.close("dialog-confirm");
+		this.saveError.set(void 0);
+		try {
+			if (this.alert()) await this.update();
+			else await this.create();
+		} catch (error) {
+			this.saveError.set({ detail: saveErrorDetail(error) });
+			return;
+		}
+		this.saved.emit();
 	}
 	async create() {
 		const model = this.alertModel();
@@ -16218,19 +16521,21 @@ var AlertDialog = class AlertDialog {
 			combine: true,
 			respectTabSelection: false
 		};
-		this.userSettingsStore.createAlert(alert);
+		await this.userSettingsStore.createAlert(alert);
 	}
 	async update() {
 		const alert = this.alert();
 		const index = this.index();
 		if (!alert || index === void 0) return;
 		const model = this.alertModel();
-		alert.name = model.name.trim();
-		alert.frequency = model.frequency ?? Alert.Frequency.Daily;
-		alert.days = flagsFromWeekdays(model.days);
-		alert.times = model.time;
-		alert.active = model.active;
-		this.userSettingsStore.updateAlert(alert, index);
+		await this.userSettingsStore.updateAlert({
+			...alert,
+			name: model.name.trim(),
+			frequency: model.frequency ?? Alert.Frequency.Daily,
+			days: flagsFromWeekdays(model.days),
+			times: model.time,
+			active: model.active
+		}, index);
 	}
 	showError(field) {
 		return fieldShowsError(field);
@@ -16242,9 +16547,12 @@ var AlertDialog = class AlertDialog {
 		const alert = this.alert();
 		const index = this.index();
 		if (!alert || index === void 0) return;
+		this.saveError.set(void 0);
 		this.updateStatus.set("updating");
-		alert.query = this.queryParamsStore.getQuery();
-		this.userSettingsStore.updateAlert(alert, index).then(() => {
+		this.userSettingsStore.updateAlert({
+			...alert,
+			query: this.queryParamsStore.getQuery()
+		}, index).then(() => {
 			setTimeout(() => {
 				this.updateStatus.set("updated");
 			}, 500);
@@ -16252,6 +16560,9 @@ var AlertDialog = class AlertDialog {
 			setTimeout(() => {
 				this.updateStatus.set("idle");
 			}, 2e3);
+		}).catch((error) => {
+			this.updateStatus.set("idle");
+			this.saveError.set({ detail: saveErrorDetail(error) });
 		});
 	}
 	execute() {
@@ -16267,190 +16578,197 @@ var AlertDialog = class AlertDialog {
 			filters,
 			name: q.name
 		});
-		this.dialog()?.close();
+		this.executed.emit();
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
 		version: "22.2.1",
 		ngImport: i0,
-		type: AlertDialog,
+		type: AlertFormComponent,
 		deps: [],
 		target: i0.ɵɵFactoryTarget.Component
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
 		version: "22.2.1",
-		type: AlertDialog,
+		type: AlertFormComponent,
 		isStandalone: true,
-		selector: "alert-dialog, alertdialog, AlertDialog",
+		selector: "alert-form, alertform, AlertFormComponent",
+		inputs: { index: {
+			classPropertyName: "index",
+			publicName: "index",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: {
+			saved: "saved",
+			executed: "executed"
+		},
+		host: { classAttribute: "block @container" },
 		providers: [provideTranslocoScope("alerts")],
-		viewQueries: [{
-			propertyName: "dialog",
-			first: true,
-			predicate: DialogComponent,
-			descendants: true,
-			isSignal: true
-		}],
 		ngImport: i0,
 		template: `
-    <dialog #dialog (closed)="call.end($event)">
-      <DialogContent size="md">
-        <DialogHeader [closeLabel]="'alerts.close' | transloco">
-          <DialogTitle>{{ 'alerts.createAlert' | transloco }}</DialogTitle>
-        </DialogHeader>
+    <!--
+      [formRoot] poses novalidate, intercepts submit, calls preventDefault() and triggers submit()
+      on the field tree: Enter submits natively, and the action only runs on a valid form.
+    -->
+    <form
+      [formRoot]="alertForm"
+      [id]="formId"
+      class="flex flex-col gap-(--spacing-lg)"
+      [attr.aria-label]="(alert() ? 'alerts.editAlert' : 'alerts.createAlert') | transloco">
+      <div [class]="fieldClass">
+        <label for="alertName" [class]="labelClass">{{ 'alerts.alertName' | transloco }}</label>
+        <input-group [scheme]="showError(alertForm.name) ? 'error' : 'default'">
+          <input
+            input-control
+            id="alertName"
+            type="text"
+            autocomplete="off"
+            spellcheck="false"
+            [formField]="alertForm.name"
+            [attr.placeholder]="'alerts.placeholder' | transloco"
+            [attr.aria-invalid]="showError(alertForm.name) ? 'true' : null"
+            [attr.aria-describedby]="showError(alertForm.name) ? 'alertName-error' : null" />
+        </input-group>
+        @if (showError(alertForm.name)) {
+          <p id="alertName-error" role="alert" [class]="errorClass">{{ errorKey(alertForm.name) | transloco }}</p>
+        }
+      </div>
 
-        <!--
-          [formRoot] poses novalidate, intercepts submit, calls preventDefault() and triggers submit()
-          on the field tree: Enter submits natively, and the action only runs on a valid form.
-          class="contents" keeps the DialogContent flex column intact — the body/footer slots are
-          styled by descendant selectors, which a display: contents wrapper does not break.
-        -->
-        <form [formRoot]="alertForm" class="contents" [attr.aria-label]="'alerts.createAlert' | transloco">
-          <DialogBody class="gap-(--spacing-md)">
-            <div [class]="fieldClass">
-              <label for="alertName" [class]="labelClass">{{ 'alerts.alertName' | transloco }}</label>
-              <input-group [scheme]="showError(alertForm.name) ? 'error' : 'default'">
-                <input
-                  input-control
-                  id="alertName"
-                  type="text"
-                  autocomplete="off"
-                  spellcheck="false"
-                  [formField]="alertForm.name"
-                  [attr.placeholder]="'alerts.placeholder' | transloco"
-                  [attr.aria-invalid]="showError(alertForm.name) ? 'true' : null"
-                  [attr.aria-describedby]="showError(alertForm.name) ? 'alertName-error' : null" />
-              </input-group>
-              @if (showError(alertForm.name)) {
-                <p id="alertName-error" role="alert" [class]="errorClass">{{ errorKey(alertForm.name) | transloco }}</p>
+      <div class="grid gap-(--spacing-md) @sm:grid-cols-2">
+        @let selectedFrequency = alertForm.frequency().value();
+        <div [class]="fieldClass">
+          <label [class]="labelClass" for="alertFrequency">{{ 'alerts.alertFrequency' | transloco }}</label>
+          <SelectMenu class="contents" [options]="frequencies" [formField]="alertForm.frequency" [label]="frequencyLabel" size="md">
+            <button selectTrigger type="button" id="alertFrequency" class="select-trigger">
+              <span class="select-trigger-label" [class.select-placeholder]="selectedFrequency === null">
+                @if (selectedFrequency === null) {
+                  {{ 'alerts.selectFrequency' | transloco }}
+                } @else {
+                  {{ 'alerts.frequency.' + frequency[selectedFrequency] | transloco }}
+                }
+              </span>
+              <chevron-down-icon class="select-chevron" />
+            </button>
+
+            <ng-template #selectOption let-frequencyValue let-selected="selected">
+              <span class="select-option-body">
+                <span class="select-option-label">{{ 'alerts.frequency.' + frequency[frequencyValue] | transloco }}</span>
+              </span>
+              @if (selected) {
+                <check-icon class="select-option-check" />
               }
-            </div>
+            </ng-template>
+          </SelectMenu>
+        </div>
 
-            @let selectedFrequency = alertForm.frequency().value();
-            <div [class]="fieldClass">
-              <label [class]="labelClass" for="alertFrequency">{{ 'alerts.alertFrequency' | transloco }}</label>
-              <SelectMenu
-                class="contents"
-                [options]="frequencies"
-                [formField]="alertForm.frequency"
-                [label]="frequencyLabel"
-                size="md">
-                <button selectTrigger type="button" id="alertFrequency" class="select-trigger">
-                  <span class="select-trigger-label" [class.select-placeholder]="selectedFrequency === null">
-                    @if (selectedFrequency === null) {
-                      {{ 'alerts.selectFrequency' | transloco }}
-                    } @else {
-                      {{ 'alerts.frequency.' + frequency[selectedFrequency] | transloco }}
-                    }
-                  </span>
-                  <chevron-down-icon class="select-chevron" />
-                </button>
+        <div [class]="fieldClass">
+          <label [class]="labelClass" for="alertTimes">{{ 'alerts.alertHours' | transloco }}</label>
+          <input-group [scheme]="showError(alertForm.time) ? 'error' : 'default'">
+            <input
+              input-control
+              type="time"
+              id="alertTimes"
+              autocomplete="off"
+              spellcheck="false"
+              [formField]="alertForm.time"
+              [attr.aria-invalid]="showError(alertForm.time) ? 'true' : null"
+              [attr.aria-describedby]="showError(alertForm.time) ? 'alertTimes-error' : null" />
+          </input-group>
+          @if (showError(alertForm.time)) {
+            <p id="alertTimes-error" role="alert" [class]="errorClass">{{ errorKey(alertForm.time) | transloco }}</p>
+          }
+        </div>
+      </div>
 
-                <ng-template #selectOption let-frequencyValue let-selected="selected">
-                  <span class="select-option-body">
-                    <span class="select-option-label">{{ 'alerts.frequency.' + frequency[frequencyValue] | transloco }}</span>
-                  </span>
-                  @if (selected) {
-                    <check-icon class="select-option-check" />
-                  }
-                </ng-template>
-              </SelectMenu>
-            </div>
+      <!--
+        An immediate alert does not repeat: the weekdays carry no meaning for it, so they are not offered
+        (the schema exempts it too).
+        A group of related checkboxes is a fieldset: its legend is what names the group for assistive
+        technologies. Each day is a native checkbox dressed as a toggle chip — the chip is its label, and
+        the name read out is the full weekday, the short one being decoration.
+      -->
+      @if (selectedFrequency !== frequency.Immediate) {
+        <fieldset
+          class="m-0 flex flex-col gap-(--spacing-xs) border-0 p-0"
+          [attr.aria-invalid]="showDaysError() ? 'true' : null"
+          [attr.aria-describedby]="showDaysError() ? 'alertDays-error' : null">
+          <div class="flex items-baseline justify-between gap-(--spacing-md)">
+            <legend [class]="labelClass + ' p-0'">{{ 'alerts.repeatOn' | transloco }}</legend>
+            <span class="flex gap-(--spacing-xs)">
+              <button type="button" variant="tertiary" size="sm" (click)="setDays(Days.WeekDays)">{{ 'alerts.weekdaysPreset' | transloco }}</button>
+              <button type="button" variant="tertiary" size="sm" (click)="setDays(Days.AllDays)">{{ 'alerts.everyDay' | transloco }}</button>
+            </span>
+          </div>
+          <div class="grid grid-cols-7 gap-1.5">
+            @for (day of weekdays; track day.key; let i = $index) {
+              <label
+                class="relative flex h-10 cursor-pointer items-center justify-center rounded-(--radius-md) border border-(--layer-page-edge) bg-(--bg-neutral-white) text-(length:--size-sm) font-medium text-(--font-neutral-muted) transition-colors select-none hover:bg-(--bg-primary-lighter) has-checked:border-(--stroke-primary-base) has-checked:bg-(--bg-primary-lighter) has-checked:text-(--font-primary-base) has-focus-visible:outline-2 has-focus-visible:outline-(--stroke-focus) motion-reduce:transition-none">
+                <input type="checkbox" class="absolute inset-0 m-0 size-full cursor-pointer opacity-0" [formField]="alertForm.days[day.key]" />
+                <span aria-hidden="true">{{ dayNames()[i] }}</span>
+                <span class="sr-only">{{ 'alerts.weekdays.' + day.key | transloco }}</span>
+              </label>
+            }
+          </div>
+          @if (showDaysError()) {
+            <p id="alertDays-error" role="alert" [class]="errorClass">
+              {{ errorKey(alertForm.days) | transloco }}
+            </p>
+          }
+        </fieldset>
+      }
 
-            <!-- A group of related checkboxes is a fieldset: its legend is what names the group for
-                 assistive technologies. It used to be a <p>, which names nothing. -->
-            <fieldset
-              class="m-0 border-0 p-0"
-              [attr.aria-invalid]="showDaysError() ? 'true' : null"
-              [attr.aria-describedby]="showDaysError() ? 'alertDays-error' : null">
-              <legend [class]="labelClass + ' mb-(--spacing-2xs)'">{{ 'alerts.repeatOn' | transloco }}</legend>
-              <div class="weekdays-grid gap-1.5 px-2.5 py-0">
-                @for (day of weekdays; track day.key) {
-                  <div>
-                    <checkbox [formField]="alertForm.days[day.key]">
-                      {{ 'alerts.weekdays.' + day.key | transloco }}
-                    </checkbox>
-                  </div>
-                }
-              </div>
-              @if (showDaysError()) {
-                <p id="alertDays-error" role="alert" [class]="errorClass + ' mt-(--spacing-2xs)'">
-                  {{ errorKey(alertForm.days) | transloco }}
-                </p>
-              }
-            </fieldset>
+      <div class="flex items-center justify-between gap-(--spacing-md) rounded-(--radius-md) border border-(--layer-page-edge) px-(--spacing-md) py-(--spacing-sm)">
+        <div id="alertActiveLabel" class="flex min-w-0 flex-col">
+          <span class="text-(length:--size-base) font-medium">{{ 'alerts.alertActive' | transloco }}</span>
+          <span class="text-(length:--size-sm) text-(--font-neutral-muted)">{{ 'alerts.activeHint' | transloco }}</span>
+        </div>
+        <Switch [formField]="alertForm.active" aria-labelledby="alertActiveLabel" />
+      </div>
 
-            <div [class]="fieldClass">
-              <label [class]="labelClass" for="alertTimes">{{ 'alerts.alertHours' | transloco }}</label>
-              <input-group [scheme]="showError(alertForm.time) ? 'error' : 'default'">
-                <input
-                  input-control
-                  type="time"
-                  id="alertTimes"
-                  autocomplete="off"
-                  spellcheck="false"
-                  [formField]="alertForm.time"
-                  [attr.aria-invalid]="showError(alertForm.time) ? 'true' : null"
-                  [attr.aria-describedby]="showError(alertForm.time) ? 'alertTimes-error' : null" />
-              </input-group>
-              @if (showError(alertForm.time)) {
-                <p id="alertTimes-error" role="alert" [class]="errorClass">{{ errorKey(alertForm.time) | transloco }}</p>
+      @if (alert(); as current) {
+        <section aria-labelledby="alertQueryTitle" class="flex flex-col gap-(--spacing-sm) rounded-(--radius-md) bg-(--layer-page-on-layer) p-(--spacing-md)">
+          <div class="flex min-w-0 flex-col gap-(--spacing-2xs)">
+            <h3 id="alertQueryTitle" class="m-0 text-(length:--size-sm) font-semibold">{{ 'alerts.queryWatched' | transloco }}</h3>
+            <p class="m-0 text-(length:--size-sm) wrap-anywhere text-(--font-neutral-muted)">
+              @for (part of querySummary(current); track $index; let first = $first) {
+                {{ first ? "" : " · " }}{{ part.key ? (part.key | transloco: part.params) : part.text }}
               }
-            </div>
-
-            <div>
-              <checkbox [formField]="alertForm.active">{{ 'alerts.alertActive' | transloco }}</checkbox>
-            </div>
-          </DialogBody>
-
-          <DialogFooter class="flex-col">
-            @if (alert() || canUpdateQuery()) {
-              <div class="flex w-full flex-col gap-2">
-                @if (alert()) {
-                  <button type="button" variant="secondary" (click)="execute()" [disabled]="!canUpdateQuery()">
-                    {{ 'alerts.execute' | transloco }}
-                  </button>
-                }
-                @if (canUpdateQuery()) {
-                  <button type="button" [disabled]="updateStatus() !== 'idle'" variant="tertiary" (click)="updateQuery()">
-                    @switch (updateStatus()) {
-                      @case ('updating') {
-                        <LoadingCircle class="size-4 animate-spin" width="16" height="16" />
-                        {{ 'alerts.updateQuery' | transloco }}
-                      }
-                      @case ('updated') {
-                        <CircleCheck width="16" height="16" />
-                        {{ 'alerts.queryUpdated' | transloco }}
-                      }
-                      @default {
-                        {{ 'alerts.updateQuery' | transloco }}
-                      }
-                    }
-                  </button>
+            </p>
+          </div>
+          <div class="flex flex-wrap gap-(--spacing-xs)">
+            <button type="button" variant="secondary" size="sm" (click)="execute()" [disabled]="!canUpdateQuery()">
+              {{ 'alerts.execute' | transloco }}
+            </button>
+            @if (canUpdateQuery()) {
+              <button type="button" variant="tertiary" size="sm" [disabled]="updateStatus() !== 'idle'" (click)="updateQuery()">
+                @switch (updateStatus()) {
+                  @case ('updating') {
+                    <LoadingCircle class="size-4 animate-spin" width="16" height="16" />
+                    {{ 'alerts.updateQuery' | transloco }}
+                  }
+                  @case ('updated') {
+                    <CircleCheck width="16" height="16" />
+                    {{ 'alerts.queryUpdated' | transloco }}
+                  }
+                  @default {
+                    {{ 'alerts.updateQuery' | transloco }}
+                  }
                 }
-              </div>
-            }
-            <div class="ml-auto flex justify-end gap-2">
-              <button type="button" variant="secondary" (click)="dialog.cancel()">
-                {{ 'cancel' | transloco }}
-              </button>
-              <!--
-                Deliberately not disabled on an invalid form: a disabled submit button never fires
-                submit(), which is what marks every field as touched and reveals the messages. The
-                weekday group has no other way to become touched — the galactik Checkbox emits no
-                touch output — so the "pick a day" error would be unreachable.
-              -->
-              <button type="submit">
-                {{ 'confirm' | transloco }}
               </button>
-            </div>
-          </DialogFooter>
-        </form>
-      </DialogContent>
-    </dialog>
+            }
+          </div>
+        </section>
+      }
+
+      @if (saveError(); as failure) {
+        <alert-save-error [detail]="failure.detail" />
+      }
+    </form>
   `,
 		isInline: true,
-		styles: [".weekdays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}\n"],
 		dependencies: [
 			{
 				kind: "directive",
@@ -16477,62 +16795,6 @@ var AlertDialog = class AlertDialog {
 					"size"
 				]
 			},
-			{
-				kind: "component",
-				type: CheckboxComponent,
-				selector: "checkbox, Checkbox",
-				inputs: [
-					"checked",
-					"disabled",
-					"indeterminate",
-					"hint",
-					"class",
-					"aria-label"
-				],
-				outputs: ["checkedChange"]
-			},
-			{
-				kind: "component",
-				type: DialogComponent,
-				selector: "dialog, [dialog]",
-				inputs: ["closeLabel"],
-				outputs: ["closed"],
-				exportAs: ["dialog"]
-			},
-			{
-				kind: "component",
-				type: DialogHeaderComponent,
-				selector: "DialogHeader",
-				inputs: ["closeLabel", "class"]
-			},
-			{
-				kind: "directive",
-				type: DialogTitleComponent,
-				selector: "DialogTitle",
-				inputs: ["id", "class"]
-			},
-			{
-				kind: "directive",
-				type: DialogContentComponent,
-				selector: "DialogContent",
-				inputs: [
-					"size",
-					"labelledby",
-					"class"
-				]
-			},
-			{
-				kind: "directive",
-				type: DialogBodyComponent,
-				selector: "DialogBody",
-				inputs: ["class"]
-			},
-			{
-				kind: "directive",
-				type: DialogFooterComponent,
-				selector: "DialogFooter",
-				inputs: ["class"]
-			},
 			{
 				kind: "directive",
 				type: InputComponent,
@@ -16586,6 +16848,23 @@ var AlertDialog = class AlertDialog {
 				selector: "[selectTrigger]",
 				exportAs: ["selectTrigger"]
 			},
+			{
+				kind: "component",
+				type: SwitchComponent,
+				selector: "switch, Switch",
+				inputs: [
+					"checked",
+					"disabled",
+					"size",
+					"class",
+					"aria-label",
+					"aria-labelledby",
+					"presentational",
+					"compact",
+					"tabIndex"
+				],
+				outputs: ["checkedChange"]
+			},
 			{
 				kind: "component",
 				type: ChevronDownIcon,
@@ -16610,6 +16889,12 @@ var AlertDialog = class AlertDialog {
 				selector: "circle-check, circle-check-icon, CircleCheck, CircleCheckIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: AlertSaveErrorComponent,
+				selector: "alert-save-error",
+				inputs: ["detail"]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -16622,191 +16907,388 @@ i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
 	version: "22.2.1",
 	ngImport: i0,
-	type: AlertDialog,
+	type: AlertFormComponent,
 	decorators: [{
 		type: Component,
 		args: [{
-			selector: "alert-dialog, alertdialog, AlertDialog",
+			selector: "alert-form, alertform, AlertFormComponent",
 			imports: [
 				FormRoot,
 				FormField,
 				TranslocoPipe,
 				ButtonComponent,
-				CheckboxComponent,
-				DialogComponent,
-				DialogHeaderComponent,
-				DialogTitleComponent,
-				DialogContentComponent,
-				DialogBodyComponent,
-				DialogFooterComponent,
 				InputComponent,
 				InputControlDirective,
 				SelectComponent,
 				SelectTriggerDirective,
+				SwitchComponent,
 				ChevronDownIcon,
 				CheckIcon,
 				LoadingCircleIcon,
-				CircleCheckIcon
+				CircleCheckIcon,
+				AlertSaveErrorComponent
 			],
 			providers: [provideTranslocoScope("alerts")],
+			host: { class: "block @container" },
 			template: `
-    <dialog #dialog (closed)="call.end($event)">
-      <DialogContent size="md">
-        <DialogHeader [closeLabel]="'alerts.close' | transloco">
-          <DialogTitle>{{ 'alerts.createAlert' | transloco }}</DialogTitle>
-        </DialogHeader>
+    <!--
+      [formRoot] poses novalidate, intercepts submit, calls preventDefault() and triggers submit()
+      on the field tree: Enter submits natively, and the action only runs on a valid form.
+    -->
+    <form
+      [formRoot]="alertForm"
+      [id]="formId"
+      class="flex flex-col gap-(--spacing-lg)"
+      [attr.aria-label]="(alert() ? 'alerts.editAlert' : 'alerts.createAlert') | transloco">
+      <div [class]="fieldClass">
+        <label for="alertName" [class]="labelClass">{{ 'alerts.alertName' | transloco }}</label>
+        <input-group [scheme]="showError(alertForm.name) ? 'error' : 'default'">
+          <input
+            input-control
+            id="alertName"
+            type="text"
+            autocomplete="off"
+            spellcheck="false"
+            [formField]="alertForm.name"
+            [attr.placeholder]="'alerts.placeholder' | transloco"
+            [attr.aria-invalid]="showError(alertForm.name) ? 'true' : null"
+            [attr.aria-describedby]="showError(alertForm.name) ? 'alertName-error' : null" />
+        </input-group>
+        @if (showError(alertForm.name)) {
+          <p id="alertName-error" role="alert" [class]="errorClass">{{ errorKey(alertForm.name) | transloco }}</p>
+        }
+      </div>
 
-        <!--
-          [formRoot] poses novalidate, intercepts submit, calls preventDefault() and triggers submit()
-          on the field tree: Enter submits natively, and the action only runs on a valid form.
-          class="contents" keeps the DialogContent flex column intact — the body/footer slots are
-          styled by descendant selectors, which a display: contents wrapper does not break.
-        -->
-        <form [formRoot]="alertForm" class="contents" [attr.aria-label]="'alerts.createAlert' | transloco">
-          <DialogBody class="gap-(--spacing-md)">
-            <div [class]="fieldClass">
-              <label for="alertName" [class]="labelClass">{{ 'alerts.alertName' | transloco }}</label>
-              <input-group [scheme]="showError(alertForm.name) ? 'error' : 'default'">
-                <input
-                  input-control
-                  id="alertName"
-                  type="text"
-                  autocomplete="off"
-                  spellcheck="false"
-                  [formField]="alertForm.name"
-                  [attr.placeholder]="'alerts.placeholder' | transloco"
-                  [attr.aria-invalid]="showError(alertForm.name) ? 'true' : null"
-                  [attr.aria-describedby]="showError(alertForm.name) ? 'alertName-error' : null" />
-              </input-group>
-              @if (showError(alertForm.name)) {
-                <p id="alertName-error" role="alert" [class]="errorClass">{{ errorKey(alertForm.name) | transloco }}</p>
+      <div class="grid gap-(--spacing-md) @sm:grid-cols-2">
+        @let selectedFrequency = alertForm.frequency().value();
+        <div [class]="fieldClass">
+          <label [class]="labelClass" for="alertFrequency">{{ 'alerts.alertFrequency' | transloco }}</label>
+          <SelectMenu class="contents" [options]="frequencies" [formField]="alertForm.frequency" [label]="frequencyLabel" size="md">
+            <button selectTrigger type="button" id="alertFrequency" class="select-trigger">
+              <span class="select-trigger-label" [class.select-placeholder]="selectedFrequency === null">
+                @if (selectedFrequency === null) {
+                  {{ 'alerts.selectFrequency' | transloco }}
+                } @else {
+                  {{ 'alerts.frequency.' + frequency[selectedFrequency] | transloco }}
+                }
+              </span>
+              <chevron-down-icon class="select-chevron" />
+            </button>
+
+            <ng-template #selectOption let-frequencyValue let-selected="selected">
+              <span class="select-option-body">
+                <span class="select-option-label">{{ 'alerts.frequency.' + frequency[frequencyValue] | transloco }}</span>
+              </span>
+              @if (selected) {
+                <check-icon class="select-option-check" />
               }
-            </div>
+            </ng-template>
+          </SelectMenu>
+        </div>
 
-            @let selectedFrequency = alertForm.frequency().value();
-            <div [class]="fieldClass">
-              <label [class]="labelClass" for="alertFrequency">{{ 'alerts.alertFrequency' | transloco }}</label>
-              <SelectMenu
-                class="contents"
-                [options]="frequencies"
-                [formField]="alertForm.frequency"
-                [label]="frequencyLabel"
-                size="md">
-                <button selectTrigger type="button" id="alertFrequency" class="select-trigger">
-                  <span class="select-trigger-label" [class.select-placeholder]="selectedFrequency === null">
-                    @if (selectedFrequency === null) {
-                      {{ 'alerts.selectFrequency' | transloco }}
-                    } @else {
-                      {{ 'alerts.frequency.' + frequency[selectedFrequency] | transloco }}
-                    }
-                  </span>
-                  <chevron-down-icon class="select-chevron" />
-                </button>
+        <div [class]="fieldClass">
+          <label [class]="labelClass" for="alertTimes">{{ 'alerts.alertHours' | transloco }}</label>
+          <input-group [scheme]="showError(alertForm.time) ? 'error' : 'default'">
+            <input
+              input-control
+              type="time"
+              id="alertTimes"
+              autocomplete="off"
+              spellcheck="false"
+              [formField]="alertForm.time"
+              [attr.aria-invalid]="showError(alertForm.time) ? 'true' : null"
+              [attr.aria-describedby]="showError(alertForm.time) ? 'alertTimes-error' : null" />
+          </input-group>
+          @if (showError(alertForm.time)) {
+            <p id="alertTimes-error" role="alert" [class]="errorClass">{{ errorKey(alertForm.time) | transloco }}</p>
+          }
+        </div>
+      </div>
 
-                <ng-template #selectOption let-frequencyValue let-selected="selected">
-                  <span class="select-option-body">
-                    <span class="select-option-label">{{ 'alerts.frequency.' + frequency[frequencyValue] | transloco }}</span>
-                  </span>
-                  @if (selected) {
-                    <check-icon class="select-option-check" />
-                  }
-                </ng-template>
-              </SelectMenu>
-            </div>
+      <!--
+        An immediate alert does not repeat: the weekdays carry no meaning for it, so they are not offered
+        (the schema exempts it too).
+        A group of related checkboxes is a fieldset: its legend is what names the group for assistive
+        technologies. Each day is a native checkbox dressed as a toggle chip — the chip is its label, and
+        the name read out is the full weekday, the short one being decoration.
+      -->
+      @if (selectedFrequency !== frequency.Immediate) {
+        <fieldset
+          class="m-0 flex flex-col gap-(--spacing-xs) border-0 p-0"
+          [attr.aria-invalid]="showDaysError() ? 'true' : null"
+          [attr.aria-describedby]="showDaysError() ? 'alertDays-error' : null">
+          <div class="flex items-baseline justify-between gap-(--spacing-md)">
+            <legend [class]="labelClass + ' p-0'">{{ 'alerts.repeatOn' | transloco }}</legend>
+            <span class="flex gap-(--spacing-xs)">
+              <button type="button" variant="tertiary" size="sm" (click)="setDays(Days.WeekDays)">{{ 'alerts.weekdaysPreset' | transloco }}</button>
+              <button type="button" variant="tertiary" size="sm" (click)="setDays(Days.AllDays)">{{ 'alerts.everyDay' | transloco }}</button>
+            </span>
+          </div>
+          <div class="grid grid-cols-7 gap-1.5">
+            @for (day of weekdays; track day.key; let i = $index) {
+              <label
+                class="relative flex h-10 cursor-pointer items-center justify-center rounded-(--radius-md) border border-(--layer-page-edge) bg-(--bg-neutral-white) text-(length:--size-sm) font-medium text-(--font-neutral-muted) transition-colors select-none hover:bg-(--bg-primary-lighter) has-checked:border-(--stroke-primary-base) has-checked:bg-(--bg-primary-lighter) has-checked:text-(--font-primary-base) has-focus-visible:outline-2 has-focus-visible:outline-(--stroke-focus) motion-reduce:transition-none">
+                <input type="checkbox" class="absolute inset-0 m-0 size-full cursor-pointer opacity-0" [formField]="alertForm.days[day.key]" />
+                <span aria-hidden="true">{{ dayNames()[i] }}</span>
+                <span class="sr-only">{{ 'alerts.weekdays.' + day.key | transloco }}</span>
+              </label>
+            }
+          </div>
+          @if (showDaysError()) {
+            <p id="alertDays-error" role="alert" [class]="errorClass">
+              {{ errorKey(alertForm.days) | transloco }}
+            </p>
+          }
+        </fieldset>
+      }
 
-            <!-- A group of related checkboxes is a fieldset: its legend is what names the group for
-                 assistive technologies. It used to be a <p>, which names nothing. -->
-            <fieldset
-              class="m-0 border-0 p-0"
-              [attr.aria-invalid]="showDaysError() ? 'true' : null"
-              [attr.aria-describedby]="showDaysError() ? 'alertDays-error' : null">
-              <legend [class]="labelClass + ' mb-(--spacing-2xs)'">{{ 'alerts.repeatOn' | transloco }}</legend>
-              <div class="weekdays-grid gap-1.5 px-2.5 py-0">
-                @for (day of weekdays; track day.key) {
-                  <div>
-                    <checkbox [formField]="alertForm.days[day.key]">
-                      {{ 'alerts.weekdays.' + day.key | transloco }}
-                    </checkbox>
-                  </div>
-                }
-              </div>
-              @if (showDaysError()) {
-                <p id="alertDays-error" role="alert" [class]="errorClass + ' mt-(--spacing-2xs)'">
-                  {{ errorKey(alertForm.days) | transloco }}
-                </p>
-              }
-            </fieldset>
+      <div class="flex items-center justify-between gap-(--spacing-md) rounded-(--radius-md) border border-(--layer-page-edge) px-(--spacing-md) py-(--spacing-sm)">
+        <div id="alertActiveLabel" class="flex min-w-0 flex-col">
+          <span class="text-(length:--size-base) font-medium">{{ 'alerts.alertActive' | transloco }}</span>
+          <span class="text-(length:--size-sm) text-(--font-neutral-muted)">{{ 'alerts.activeHint' | transloco }}</span>
+        </div>
+        <Switch [formField]="alertForm.active" aria-labelledby="alertActiveLabel" />
+      </div>
 
-            <div [class]="fieldClass">
-              <label [class]="labelClass" for="alertTimes">{{ 'alerts.alertHours' | transloco }}</label>
-              <input-group [scheme]="showError(alertForm.time) ? 'error' : 'default'">
-                <input
-                  input-control
-                  type="time"
-                  id="alertTimes"
-                  autocomplete="off"
-                  spellcheck="false"
-                  [formField]="alertForm.time"
-                  [attr.aria-invalid]="showError(alertForm.time) ? 'true' : null"
-                  [attr.aria-describedby]="showError(alertForm.time) ? 'alertTimes-error' : null" />
-              </input-group>
-              @if (showError(alertForm.time)) {
-                <p id="alertTimes-error" role="alert" [class]="errorClass">{{ errorKey(alertForm.time) | transloco }}</p>
+      @if (alert(); as current) {
+        <section aria-labelledby="alertQueryTitle" class="flex flex-col gap-(--spacing-sm) rounded-(--radius-md) bg-(--layer-page-on-layer) p-(--spacing-md)">
+          <div class="flex min-w-0 flex-col gap-(--spacing-2xs)">
+            <h3 id="alertQueryTitle" class="m-0 text-(length:--size-sm) font-semibold">{{ 'alerts.queryWatched' | transloco }}</h3>
+            <p class="m-0 text-(length:--size-sm) wrap-anywhere text-(--font-neutral-muted)">
+              @for (part of querySummary(current); track $index; let first = $first) {
+                {{ first ? "" : " · " }}{{ part.key ? (part.key | transloco: part.params) : part.text }}
               }
-            </div>
-
-            <div>
-              <checkbox [formField]="alertForm.active">{{ 'alerts.alertActive' | transloco }}</checkbox>
-            </div>
-          </DialogBody>
-
-          <DialogFooter class="flex-col">
-            @if (alert() || canUpdateQuery()) {
-              <div class="flex w-full flex-col gap-2">
-                @if (alert()) {
-                  <button type="button" variant="secondary" (click)="execute()" [disabled]="!canUpdateQuery()">
-                    {{ 'alerts.execute' | transloco }}
-                  </button>
-                }
-                @if (canUpdateQuery()) {
-                  <button type="button" [disabled]="updateStatus() !== 'idle'" variant="tertiary" (click)="updateQuery()">
-                    @switch (updateStatus()) {
-                      @case ('updating') {
-                        <LoadingCircle class="size-4 animate-spin" width="16" height="16" />
-                        {{ 'alerts.updateQuery' | transloco }}
-                      }
-                      @case ('updated') {
-                        <CircleCheck width="16" height="16" />
-                        {{ 'alerts.queryUpdated' | transloco }}
-                      }
-                      @default {
-                        {{ 'alerts.updateQuery' | transloco }}
-                      }
-                    }
-                  </button>
+            </p>
+          </div>
+          <div class="flex flex-wrap gap-(--spacing-xs)">
+            <button type="button" variant="secondary" size="sm" (click)="execute()" [disabled]="!canUpdateQuery()">
+              {{ 'alerts.execute' | transloco }}
+            </button>
+            @if (canUpdateQuery()) {
+              <button type="button" variant="tertiary" size="sm" [disabled]="updateStatus() !== 'idle'" (click)="updateQuery()">
+                @switch (updateStatus()) {
+                  @case ('updating') {
+                    <LoadingCircle class="size-4 animate-spin" width="16" height="16" />
+                    {{ 'alerts.updateQuery' | transloco }}
+                  }
+                  @case ('updated') {
+                    <CircleCheck width="16" height="16" />
+                    {{ 'alerts.queryUpdated' | transloco }}
+                  }
+                  @default {
+                    {{ 'alerts.updateQuery' | transloco }}
+                  }
                 }
-              </div>
-            }
-            <div class="ml-auto flex justify-end gap-2">
-              <button type="button" variant="secondary" (click)="dialog.cancel()">
-                {{ 'cancel' | transloco }}
-              </button>
-              <!--
-                Deliberately not disabled on an invalid form: a disabled submit button never fires
-                submit(), which is what marks every field as touched and reveals the messages. The
-                weekday group has no other way to become touched — the galactik Checkbox emits no
-                touch output — so the "pick a day" error would be unreachable.
-              -->
-              <button type="submit">
-                {{ 'confirm' | transloco }}
               </button>
-            </div>
-          </DialogFooter>
-        </form>
+            }
+          </div>
+        </section>
+      }
+
+      @if (saveError(); as failure) {
+        <alert-save-error [detail]="failure.detail" />
+      }
+    </form>
+  `
+		}]
+	}],
+	propDecorators: {
+		index: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "index",
+				required: false
+			}]
+		}],
+		saved: [{
+			type: i0.Output,
+			args: ["saved"]
+		}],
+		executed: [{
+			type: i0.Output,
+			args: ["executed"]
+		}]
+	}
+});
+var AlertDialog = class AlertDialog {
+	call = injectCallRef();
+	dialog = viewChild(DialogComponent, ...ngDevMode ? [{ debugName: "dialog" }] : /* istanbul ignore next */ []);
+	index = this.call.props;
+	constructor() {
+		afterNextRender(() => this.dialog()?.open());
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: AlertDialog,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.2.0",
+		version: "22.2.1",
+		type: AlertDialog,
+		isStandalone: true,
+		selector: "alert-dialog, alertdialog, AlertDialog",
+		providers: [provideTranslocoScope("alerts")],
+		viewQueries: [{
+			propertyName: "dialog",
+			first: true,
+			predicate: DialogComponent,
+			descendants: true,
+			isSignal: true
+		}],
+		ngImport: i0,
+		template: `
+    <dialog #dialog (closed)="call.end($event)">
+      <DialogContent size="md">
+        <DialogHeader [closeLabel]="'alerts.close' | transloco">
+          <DialogTitle>{{ (index() === undefined ? 'alerts.createAlert' : 'alerts.editAlert') | transloco }}</DialogTitle>
+        </DialogHeader>
+
+        <DialogBody>
+          <alert-form #form [index]="index()" (saved)="dialog.close('dialog-confirm')" (executed)="dialog.close()" />
+        </DialogBody>
+
+        <DialogFooter>
+          <button type="button" variant="secondary" (click)="dialog.cancel()">
+            {{ 'cancel' | transloco }}
+          </button>
+          <!--
+            Deliberately not disabled on an invalid form: a disabled submit button never fires
+            submit(), which is what marks every field as touched and reveals the messages. The
+            weekday group has no other way to become touched — it emits no touch event — so the
+            "pick a day" error would be unreachable. It does wait for a save in progress.
+          -->
+          <button type="submit" [attr.form]="form.formId" [disabled]="form.saving()">
+            {{ 'confirm' | transloco }}
+          </button>
+        </DialogFooter>
       </DialogContent>
     </dialog>
   `,
-			styles: [".weekdays-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr))}\n"]
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: ButtonComponent,
+				selector: "button",
+				inputs: [
+					"class",
+					"variant",
+					"scheme",
+					"iconOnly",
+					"size"
+				]
+			},
+			{
+				kind: "component",
+				type: DialogComponent,
+				selector: "dialog, [dialog]",
+				inputs: ["closeLabel"],
+				outputs: ["closed"],
+				exportAs: ["dialog"]
+			},
+			{
+				kind: "component",
+				type: DialogHeaderComponent,
+				selector: "DialogHeader",
+				inputs: ["closeLabel", "class"]
+			},
+			{
+				kind: "directive",
+				type: DialogTitleComponent,
+				selector: "DialogTitle",
+				inputs: ["id", "class"]
+			},
+			{
+				kind: "directive",
+				type: DialogContentComponent,
+				selector: "DialogContent",
+				inputs: [
+					"size",
+					"labelledby",
+					"class"
+				]
+			},
+			{
+				kind: "directive",
+				type: DialogBodyComponent,
+				selector: "DialogBody",
+				inputs: ["class"]
+			},
+			{
+				kind: "directive",
+				type: DialogFooterComponent,
+				selector: "DialogFooter",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: AlertFormComponent,
+				selector: "alert-form, alertform, AlertFormComponent",
+				inputs: ["index"],
+				outputs: ["saved", "executed"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: AlertDialog,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "alert-dialog, alertdialog, AlertDialog",
+			imports: [
+				TranslocoPipe,
+				ButtonComponent,
+				DialogComponent,
+				DialogHeaderComponent,
+				DialogTitleComponent,
+				DialogContentComponent,
+				DialogBodyComponent,
+				DialogFooterComponent,
+				AlertFormComponent
+			],
+			providers: [provideTranslocoScope("alerts")],
+			template: `
+    <dialog #dialog (closed)="call.end($event)">
+      <DialogContent size="md">
+        <DialogHeader [closeLabel]="'alerts.close' | transloco">
+          <DialogTitle>{{ (index() === undefined ? 'alerts.createAlert' : 'alerts.editAlert') | transloco }}</DialogTitle>
+        </DialogHeader>
+
+        <DialogBody>
+          <alert-form #form [index]="index()" (saved)="dialog.close('dialog-confirm')" (executed)="dialog.close()" />
+        </DialogBody>
+
+        <DialogFooter>
+          <button type="button" variant="secondary" (click)="dialog.cancel()">
+            {{ 'cancel' | transloco }}
+          </button>
+          <!--
+            Deliberately not disabled on an invalid form: a disabled submit button never fires
+            submit(), which is what marks every field as touched and reveals the messages. The
+            weekday group has no other way to become touched — it emits no touch event — so the
+            "pick a day" error would be unreachable. It does wait for a save in progress.
+          -->
+          <button type="submit" [attr.form]="form.formId" [disabled]="form.saving()">
+            {{ 'confirm' | transloco }}
+          </button>
+        </DialogFooter>
+      </DialogContent>
+    </dialog>
+  `
 		}]
 	}],
 	ctorParameters: () => [],
@@ -16816,6 +17298,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}] }
 });
 const AlertForm = createCallable(AlertDialog);
+const UNDO_DELAY = 6e3;
 var AlertsComponent = class AlertsComponent {
 	floating = inject(PopoverDirective, {
 		skipSelf: true,
@@ -16823,37 +17306,133 @@ var AlertsComponent = class AlertsComponent {
 	});
 	userSettingsStore = inject(UserSettingsStore);
 	injector = inject(Injector);
-	reordering = signal(false, ...ngDevMode ? [{ debugName: "reordering" }] : /* istanbul ignore next */ []);
-	alerts = computed(() => this.userSettingsStore.alerts(), ...ngDevMode ? [{ debugName: "alerts" }] : /* istanbul ignore next */ []);
-	tmpAlerts = [];
+	transloco = inject(TranslocoService);
+	lang = toSignal(this.transloco.langChanges$);
 	query;
+	dialog = input(true, {
+		...ngDevMode ? { debugName: "dialog" } : /* istanbul ignore next */ {},
+		transform: booleanAttribute
+	});
+	editRequested = output();
+	createRequested = output();
+	saveError = signal(void 0, ...ngDevMode ? [{ debugName: "saveError" }] : /* istanbul ignore next */ []);
+	alerts = computed(() => this.userSettingsStore.alerts() ?? [], ...ngDevMode ? [{ debugName: "alerts" }] : /* istanbul ignore next */ []);
+	order = linkedSignal(() => [...this.alerts()], ...ngDevMode ? [{ debugName: "order" }] : /* istanbul ignore next */ []);
+	hidden = signal(/* @__PURE__ */ new Set(), ...ngDevMode ? [{ debugName: "hidden" }] : /* istanbul ignore next */ []);
+	pendingDeletion = signal(void 0, ...ngDevMode ? [{ debugName: "pendingDeletion" }] : /* istanbul ignore next */ []);
+	undoTimer;
+	visible = computed(() => {
+		const hidden = this.hidden();
+		return this.order().filter((alert) => !hidden.has(alert));
+	}, ...ngDevMode ? [{ debugName: "visible" }] : /* istanbul ignore next */ []);
+	summaries = computed(() => {
+		const lang = this.lang() ?? this.transloco.getActiveLang();
+		return new Map(this.order().map((alert) => [alert, alertSummary(lang, alert)]));
+	}, ...ngDevMode ? [{ debugName: "summaries" }] : /* istanbul ignore next */ []);
+	summaryOf = (alert) => this.summaries().get(alert) ?? [];
+	announceMove = (alert, position, total) => this.transloco.translate("alerts.moved", {
+		name: alert.name,
+		position,
+		total
+	});
 	constructor() {
 		this.query = buildQuery();
-		effect(() => {
-			this.tmpAlerts = this.alerts()?.map((a) => Object.assign({}, a));
-		});
+		inject(DestroyRef).onDestroy(() => this.commitDeletion());
+	}
+	onRowClick(event, alert) {
+		if (event.target.closest("[data-row-action]")) return;
+		this.edit(alert);
 	}
-	onClick(index) {
+	onRowEnter(event, alert) {
+		if (event.target === event.currentTarget) this.edit(alert);
+	}
+	edit(alert) {
+		const index = this.alerts().indexOf(alert);
+		if (index < 0) return;
 		this.floating?.close();
+		if (!this.dialog()) {
+			this.editRequested.emit(index);
+			return;
+		}
 		AlertForm.call(index, { injector: this.injector });
 	}
 	createAlert() {
 		this.floating?.close();
+		if (!this.dialog()) {
+			this.createRequested.emit();
+			return;
+		}
 		AlertForm.call(void 0, { injector: this.injector });
 	}
-	deleteAlert(event, index) {
-		event.stopPropagation();
-		this.userSettingsStore.deleteAlert(index);
+	pendingActive = signal(/* @__PURE__ */ new Map(), ...ngDevMode ? [{ debugName: "pendingActive" }] : /* istanbul ignore next */ []);
+	isActive(alert) {
+		return this.pendingActive().get(alert) ?? alert.active;
 	}
-	async reorder() {
-		if (this.reordering()) {
-			await this.userSettingsStore.updateAlerts(this.tmpAlerts);
-			this.reordering.set(false);
-		} else this.reordering.set(true);
+	async toggle(alert, active) {
+		const index = this.alerts().indexOf(alert);
+		if (index < 0) return;
+		this.saveError.set(void 0);
+		this.pendingActive.update((pending) => new Map(pending).set(alert, active));
+		try {
+			await this.userSettingsStore.updateAlert({
+				...alert,
+				active
+			}, index);
+		} catch (error) {
+			this.saveError.set({ detail: saveErrorDetail(error) });
+		} finally {
+			this.pendingActive.update((pending) => {
+				const next = new Map(pending);
+				next.delete(alert);
+				return next;
+			});
+		}
+	}
+	deleteAlert(alert) {
+		this.commitDeletion();
+		this.hidden.update((hidden) => new Set(hidden).add(alert));
+		this.pendingDeletion.set(alert);
+		this.undoTimer = setTimeout(() => this.commitDeletion(), UNDO_DELAY);
+	}
+	undoDeletion() {
+		clearTimeout(this.undoTimer);
+		const alert = this.pendingDeletion();
+		if (!alert) return;
+		this.pendingDeletion.set(void 0);
+		this.unhide(alert);
 	}
-	dropped(drop) {
-		if (drop.currentIndex === drop.previousIndex) return;
-		this.tmpAlerts.splice(drop.currentIndex, 0, this.tmpAlerts.splice(drop.previousIndex, 1)[0]);
+	commitDeletion() {
+		clearTimeout(this.undoTimer);
+		const alert = this.pendingDeletion();
+		if (!alert) return;
+		this.pendingDeletion.set(void 0);
+		const index = this.alerts().indexOf(alert);
+		if (index < 0) {
+			this.unhide(alert);
+			return;
+		}
+		this.userSettingsStore.deleteAlert(index).catch((error) => this.saveError.set({ detail: saveErrorDetail(error) })).finally(() => this.unhide(alert));
+	}
+	unhide(alert) {
+		this.hidden.update((hidden) => {
+			const next = new Set(hidden);
+			next.delete(alert);
+			return next;
+		});
+	}
+	async saveOrder(shown) {
+		const hidden = this.hidden();
+		const previous = this.order();
+		const next = [...shown, ...previous.filter((alert) => hidden.has(alert))];
+		if (next.every((alert, index) => alert === previous[index])) return;
+		this.saveError.set(void 0);
+		this.order.set(next);
+		try {
+			await this.userSettingsStore.updateAlerts(next);
+		} catch (error) {
+			this.order.set(previous);
+			this.saveError.set({ detail: saveErrorDetail(error) });
+		}
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
@@ -16869,9 +17448,20 @@ var AlertsComponent = class AlertsComponent {
 		type: AlertsComponent,
 		isStandalone: true,
 		selector: "Alerts",
+		inputs: { dialog: {
+			classPropertyName: "dialog",
+			publicName: "dialog",
+			isSignal: true,
+			isRequired: false,
+			transformFunction: null
+		} },
+		outputs: {
+			editRequested: "editRequested",
+			createRequested: "createRequested"
+		},
 		providers: [provideTranslocoScope("alerts")],
 		ngImport: i0,
-		template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ \"alerts.label\" | transloco }}</label>\n    <hr\n      class=\"my-(--spacing-3xs) h-px w-full shrink-0 border-0 bg-(--stroke-neutral-disabled)\" />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li\n      class=\"group box-border flex h-10 w-full cursor-pointer items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-transparent px-(--spacing-2xs) py-(--spacing-3xs) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light)\"\n      tabindex=\"0\"\n      cdkDrag\n      (click)=\"onClick($index)\"\n      (keydown.enter)=\"onClick($index)\">\n      <bell-icon class=\"shrink-0\" />\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        @let openBookmark = \"bookmarks.openBookmark\" | transloco;\n        <button\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          title=\"{{ openBookmark }}\"\n          class=\"text-destructive ms-auto group-hover:visible\"\n          [attr.title]=\"openBookmark\"\n          [attr.aria-label]=\"openBookmark\"\n          (click)=\"deleteAlert($event, $index)\">\n          <TrashIcon />\n        </button>\n      } @else {\n        <bars-icon class=\"ms-auto\" />\n      }\n    </li>\n  } @empty {\n    <span class=\"py-4 text-center text-neutral-500\">\n      {{ \"alerts.noAlerts\" | transloco }}\n    </span>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button\n    variant=\"secondary\"\n    class=\"w-full\"\n    tabindex=\"0\"\n    [attr.title]=\"'alerts.manageAlerts' | transloco\"\n    [disabled]=\"!alerts().length\"\n    (click)=\"reorder()\">\n    {{ (reordering() ? \"save\" : \"alerts.manageAlerts\") | transloco }}\n  </button>\n  <button\n    variant=\"secondary\"\n    class=\"w-full\"\n    [attr.title]=\"'alerts.createAlert' | transloco\"\n    (click)=\"createAlert()\">\n    {{ \"alerts.createAlert\" | transloco }}\n  </button>\n</div>\n",
+		template: "<div class=\"flex min-w-80 flex-col gap-(--spacing-3xs) p-2\">\n  <div class=\"flex items-center gap-(--spacing-2xs) ps-(--spacing-2xs)\">\n    @if (floating) {\n      <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->\n      <span\n        role=\"heading\"\n        aria-level=\"2\"\n        class=\"flex-1 text-xl leading-(--line-height-4) font-bold\">\n        {{ \"alerts.label\" | transloco }}\n        @if (visible().length) {\n          <span\n            class=\"text-(length:--size-sm) font-normal text-(--font-neutral-muted)\"\n            >· {{ visible().length }}</span\n          >\n        }\n      </span>\n    } @else {\n      <span class=\"flex-1\"></span>\n    }\n    <!-- With no alert, \"Create\" is the call to action of the empty state, below. -->\n    @if (visible().length) {\n      <button size=\"md\" (click)=\"createAlert()\">\n        <plus-icon />\n        {{ \"alerts.create\" | transloco }}\n      </button>\n    }\n  </div>\n\n  @if (saveError(); as failure) {\n    <alert-save-error class=\"mb-(--spacing-2xs)\" [detail]=\"failure.detail\" />\n  }\n\n  <ul\n    role=\"list\"\n    class=\"m-0 flex list-none flex-col p-0\"\n    [attr.aria-label]=\"'alerts.label' | transloco\"\n    [sortable]=\"visible()\"\n    #sortable=\"sortable\"\n    [sortableAnnounce]=\"announceMove\"\n    (reorder)=\"saveOrder($event)\">\n    @for (alert of sortable.items(); track alert.name) {\n      @let name = alert.name;\n      <li\n        [sortableItem]=\"alert\"\n        class=\"group relative flex min-h-12 w-full cursor-pointer items-center gap-(--spacing-3xs) rounded-(--radius-sm) py-(--spacing-3xs) ps-(--spacing-3xs) pe-(--spacing-2xs) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light) data-dragging:bg-(--bg-primary-lighter) data-dragging:outline-2 data-dragging:-outline-offset-2 data-dragging:outline-(--stroke-primary-base) data-dragging:outline-dashed data-dragging:*:invisible\"\n        tabindex=\"0\"\n        [attr.data-inactive]=\"alert.active ? null : ''\"\n        (click)=\"onRowClick($event, alert)\"\n        (keydown.enter)=\"onRowEnter($event, alert)\">\n        <!-- Handle: shown when the row is hovered or focused, only if there is something to reorder. -->\n        <grip-vertical-icon\n          class=\"shrink-0 cursor-grab text-(--font-neutral-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:hidden\"\n          [class.invisible]=\"visible().length < 2\" />\n        @if (alert.active) {\n          <bell-icon class=\"shrink-0\" />\n        } @else {\n          <bell-slash-icon class=\"shrink-0 text-(--font-neutral-muted)\" />\n        }\n        <span class=\"flex min-w-0 flex-1 flex-col\">\n          <span\n            class=\"line-clamp-1 text-(length:--size-base) group-data-inactive:text-(--font-neutral-muted)\"\n            >{{ name }}</span\n          >\n          @if (summaryOf(alert).length) {\n            <span\n              class=\"line-clamp-1 text-(length:--size-sm) text-(--font-neutral-muted)\">\n              @for (\n                part of summaryOf(alert);\n                track $index;\n                let first = $first\n              ) {\n                {{ first ? \"\" : \" · \"\n                }}{{ part.key ? (part.key | transloco) : part.text }}\n              }\n            </span>\n          }\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <Switch\n            [checked]=\"isActive(alert)\"\n            [aria-label]=\"'alerts.alertActiveFor' | transloco: { name }\"\n            (checkedChange)=\"toggle(alert, $event)\" />\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <button\n            variant=\"tertiary\"\n            size=\"sm\"\n            [iconOnly]=\"true\"\n            class=\"text-(--font-error-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) focus-visible:opacity-100 pointer-coarse:opacity-100\"\n            [attr.title]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            [attr.aria-label]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            (click)=\"deleteAlert(alert)\">\n            <TrashIcon />\n          </button>\n        </span>\n      </li>\n    } @empty {\n      <li class=\"list-none\">\n        <ListPanelEmpty color=\"orange\">\n          <bell-icon listPanelEmptyIcon />\n          {{ \"alerts.noAlerts\" | transloco }}\n          <p listPanelEmptyHint>{{ \"alerts.noAlertsHint\" | transloco }}</p>\n          <button listPanelEmptyAction (click)=\"createAlert()\">\n            <plus-icon />\n            {{ \"alerts.createAlert\" | transloco }}\n          </button>\n        </ListPanelEmpty>\n      </li>\n    }\n  </ul>\n\n  @if (visible().length > 1) {\n    <p\n      class=\"m-0 ps-(--spacing-2xs) pt-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n      {{ \"alerts.reorderHint\" | transloco }}\n    </p>\n  }\n\n  <!-- The regions exist before their text does, which is what makes a screen reader announce the text. -->\n  <div role=\"status\">\n    @if (pendingDeletion(); as pending) {\n      <div\n        class=\"mt-(--spacing-2xs) flex items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-(--bg-neutral-base) py-(--spacing-3xs) ps-(--spacing-xs) pe-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-base)\">\n        <span class=\"min-w-0 flex-1\">{{\n          \"alerts.deleted\" | transloco: { name: pending.name }\n        }}</span>\n        <button variant=\"tertiary\" size=\"sm\" (click)=\"undoDeletion()\">\n          {{ \"alerts.undo\" | transloco }}\n        </button>\n      </div>\n    }\n  </div>\n</div>\n",
 		dependencies: [
 			{
 				kind: "directive",
@@ -16886,63 +17476,39 @@ var AlertsComponent = class AlertsComponent {
 				]
 			},
 			{
-				kind: "ngmodule",
-				type: DragDropModule
+				kind: "component",
+				type: SwitchComponent,
+				selector: "switch, Switch",
+				inputs: [
+					"checked",
+					"disabled",
+					"size",
+					"class",
+					"aria-label",
+					"aria-labelledby",
+					"presentational",
+					"compact",
+					"tabIndex"
+				],
+				outputs: ["checkedChange"]
 			},
 			{
 				kind: "directive",
-				type: i1.CdkDropList,
-				selector: "[cdkDropList], cdk-drop-list",
+				type: SortableDirective,
+				selector: "[sortable]",
 				inputs: [
-					"cdkDropListConnectedTo",
-					"cdkDropListData",
-					"cdkDropListOrientation",
-					"id",
-					"cdkDropListLockAxis",
-					"cdkDropListDisabled",
-					"cdkDropListSortingDisabled",
-					"cdkDropListEnterPredicate",
-					"cdkDropListSortPredicate",
-					"cdkDropListAutoScrollDisabled",
-					"cdkDropListAutoScrollStep",
-					"cdkDropListElementContainer",
-					"cdkDropListHasAnchor"
+					"sortable",
+					"sortableDisabled",
+					"sortableAnnounce"
 				],
-				outputs: [
-					"cdkDropListDropped",
-					"cdkDropListEntered",
-					"cdkDropListExited",
-					"cdkDropListSorted"
-				],
-				exportAs: ["cdkDropList"]
+				outputs: ["reorder"],
+				exportAs: ["sortable"]
 			},
 			{
 				kind: "directive",
-				type: i1.CdkDrag,
-				selector: "[cdkDrag]",
-				inputs: [
-					"cdkDragData",
-					"cdkDragLockAxis",
-					"cdkDragRootElement",
-					"cdkDragBoundary",
-					"cdkDragStartDelay",
-					"cdkDragFreeDragPosition",
-					"cdkDragDisabled",
-					"cdkDragConstrainPosition",
-					"cdkDragPreviewClass",
-					"cdkDragPreviewContainer",
-					"cdkDragScale"
-				],
-				outputs: [
-					"cdkDragStarted",
-					"cdkDragReleased",
-					"cdkDragEnded",
-					"cdkDragEntered",
-					"cdkDragExited",
-					"cdkDragDropped",
-					"cdkDragMoved"
-				],
-				exportAs: ["cdkDrag"]
+				type: SortableItemDirective,
+				selector: "[sortableItem]",
+				inputs: ["sortableItem", "sortableItemDisabled"]
 			},
 			{
 				kind: "component",
@@ -16950,6 +17516,24 @@ var AlertsComponent = class AlertsComponent {
 				selector: "bell, bell-icon, Bell, BellIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: BellSlashIcon,
+				selector: "bell-slash, bell-slash-icon, BellSlash, BellSlashIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: GripVerticalIcon,
+				selector: "grip-vertical, grip-vertical-icon, GripVertical, GripVerticalIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: PlusIcon,
+				selector: "plus, plus-icon, Plus, PlusIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "component",
 				type: TrashIcon,
@@ -16958,9 +17542,15 @@ var AlertsComponent = class AlertsComponent {
 			},
 			{
 				kind: "component",
-				type: BarsIcon,
-				selector: "bars, bars-icon, Bars, BarsIcon",
-				inputs: ["class"]
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
+			{
+				kind: "component",
+				type: AlertSaveErrorComponent,
+				selector: "alert-save-error",
+				inputs: ["detail"]
 			},
 			{
 				kind: "pipe",
@@ -16982,16 +17572,40 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				ButtonComponent,
-				DragDropModule,
+				SwitchComponent,
+				SortableDirective,
+				SortableItemDirective,
 				BellIcon,
+				BellSlashIcon,
+				GripVerticalIcon,
+				PlusIcon,
 				TrashIcon,
-				BarsIcon
+				ListPanelEmptyComponent,
+				AlertSaveErrorComponent
 			],
 			providers: [provideTranslocoScope("alerts")],
-			template: "<ul\n  role=\"list\"\n  class=\"flex min-w-80 flex-col p-2\"\n  cdkDropList\n  [cdkDropListData]=\"tmpAlerts\"\n  [cdkDropListDisabled]=\"!reordering()\"\n  (cdkDropListDropped)=\"dropped($event)\">\n  @if (floating) {\n    <label class=\"text-xl font-bold\">{{ \"alerts.label\" | transloco }}</label>\n    <hr\n      class=\"my-(--spacing-3xs) h-px w-full shrink-0 border-0 bg-(--stroke-neutral-disabled)\" />\n  }\n  @for (alert of tmpAlerts; track $index) {\n    <li\n      class=\"group box-border flex h-10 w-full cursor-pointer items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-transparent px-(--spacing-2xs) py-(--spacing-3xs) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light)\"\n      tabindex=\"0\"\n      cdkDrag\n      (click)=\"onClick($index)\"\n      (keydown.enter)=\"onClick($index)\">\n      <bell-icon class=\"shrink-0\" />\n      <p class=\"line-clamp-1\">{{ alert.name }}</p>\n      @if (!reordering()) {\n        @let openBookmark = \"bookmarks.openBookmark\" | transloco;\n        <button\n          variant=\"tertiary\"\n          [iconOnly]=\"true\"\n          title=\"{{ openBookmark }}\"\n          class=\"text-destructive ms-auto group-hover:visible\"\n          [attr.title]=\"openBookmark\"\n          [attr.aria-label]=\"openBookmark\"\n          (click)=\"deleteAlert($event, $index)\">\n          <TrashIcon />\n        </button>\n      } @else {\n        <bars-icon class=\"ms-auto\" />\n      }\n    </li>\n  } @empty {\n    <span class=\"py-4 text-center text-neutral-500\">\n      {{ \"alerts.noAlerts\" | transloco }}\n    </span>\n  }\n</ul>\n<div class=\"flex flex-col gap-2 p-2\">\n  <button\n    variant=\"secondary\"\n    class=\"w-full\"\n    tabindex=\"0\"\n    [attr.title]=\"'alerts.manageAlerts' | transloco\"\n    [disabled]=\"!alerts().length\"\n    (click)=\"reorder()\">\n    {{ (reordering() ? \"save\" : \"alerts.manageAlerts\") | transloco }}\n  </button>\n  <button\n    variant=\"secondary\"\n    class=\"w-full\"\n    [attr.title]=\"'alerts.createAlert' | transloco\"\n    (click)=\"createAlert()\">\n    {{ \"alerts.createAlert\" | transloco }}\n  </button>\n</div>\n"
+			template: "<div class=\"flex min-w-80 flex-col gap-(--spacing-3xs) p-2\">\n  <div class=\"flex items-center gap-(--spacing-2xs) ps-(--spacing-2xs)\">\n    @if (floating) {\n      <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->\n      <span\n        role=\"heading\"\n        aria-level=\"2\"\n        class=\"flex-1 text-xl leading-(--line-height-4) font-bold\">\n        {{ \"alerts.label\" | transloco }}\n        @if (visible().length) {\n          <span\n            class=\"text-(length:--size-sm) font-normal text-(--font-neutral-muted)\"\n            >· {{ visible().length }}</span\n          >\n        }\n      </span>\n    } @else {\n      <span class=\"flex-1\"></span>\n    }\n    <!-- With no alert, \"Create\" is the call to action of the empty state, below. -->\n    @if (visible().length) {\n      <button size=\"md\" (click)=\"createAlert()\">\n        <plus-icon />\n        {{ \"alerts.create\" | transloco }}\n      </button>\n    }\n  </div>\n\n  @if (saveError(); as failure) {\n    <alert-save-error class=\"mb-(--spacing-2xs)\" [detail]=\"failure.detail\" />\n  }\n\n  <ul\n    role=\"list\"\n    class=\"m-0 flex list-none flex-col p-0\"\n    [attr.aria-label]=\"'alerts.label' | transloco\"\n    [sortable]=\"visible()\"\n    #sortable=\"sortable\"\n    [sortableAnnounce]=\"announceMove\"\n    (reorder)=\"saveOrder($event)\">\n    @for (alert of sortable.items(); track alert.name) {\n      @let name = alert.name;\n      <li\n        [sortableItem]=\"alert\"\n        class=\"group relative flex min-h-12 w-full cursor-pointer items-center gap-(--spacing-3xs) rounded-(--radius-sm) py-(--spacing-3xs) ps-(--spacing-3xs) pe-(--spacing-2xs) text-(--font-neutral-base) select-none hover:bg-(--bg-primary-lighter) focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--stroke-focus) active:bg-(--bg-primary-light) data-dragging:bg-(--bg-primary-lighter) data-dragging:outline-2 data-dragging:-outline-offset-2 data-dragging:outline-(--stroke-primary-base) data-dragging:outline-dashed data-dragging:*:invisible\"\n        tabindex=\"0\"\n        [attr.data-inactive]=\"alert.active ? null : ''\"\n        (click)=\"onRowClick($event, alert)\"\n        (keydown.enter)=\"onRowEnter($event, alert)\">\n        <!-- Handle: shown when the row is hovered or focused, only if there is something to reorder. -->\n        <grip-vertical-icon\n          class=\"shrink-0 cursor-grab text-(--font-neutral-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 pointer-coarse:hidden\"\n          [class.invisible]=\"visible().length < 2\" />\n        @if (alert.active) {\n          <bell-icon class=\"shrink-0\" />\n        } @else {\n          <bell-slash-icon class=\"shrink-0 text-(--font-neutral-muted)\" />\n        }\n        <span class=\"flex min-w-0 flex-1 flex-col\">\n          <span\n            class=\"line-clamp-1 text-(length:--size-base) group-data-inactive:text-(--font-neutral-muted)\"\n            >{{ name }}</span\n          >\n          @if (summaryOf(alert).length) {\n            <span\n              class=\"line-clamp-1 text-(length:--size-sm) text-(--font-neutral-muted)\">\n              @for (\n                part of summaryOf(alert);\n                track $index;\n                let first = $first\n              ) {\n                {{ first ? \"\" : \" · \"\n                }}{{ part.key ? (part.key | transloco) : part.text }}\n              }\n            </span>\n          }\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <Switch\n            [checked]=\"isActive(alert)\"\n            [aria-label]=\"'alerts.alertActiveFor' | transloco: { name }\"\n            (checkedChange)=\"toggle(alert, $event)\" />\n        </span>\n        <span data-row-action class=\"flex shrink-0 items-center\">\n          <button\n            variant=\"tertiary\"\n            size=\"sm\"\n            [iconOnly]=\"true\"\n            class=\"text-(--font-error-muted) opacity-0 group-focus-within:opacity-100 group-hover:opacity-100 hover:bg-(--bg-error-lightest) hover:text-(--font-error-base) focus-visible:opacity-100 pointer-coarse:opacity-100\"\n            [attr.title]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            [attr.aria-label]=\"'alerts.deleteAlertNamed' | transloco: { name }\"\n            (click)=\"deleteAlert(alert)\">\n            <TrashIcon />\n          </button>\n        </span>\n      </li>\n    } @empty {\n      <li class=\"list-none\">\n        <ListPanelEmpty color=\"orange\">\n          <bell-icon listPanelEmptyIcon />\n          {{ \"alerts.noAlerts\" | transloco }}\n          <p listPanelEmptyHint>{{ \"alerts.noAlertsHint\" | transloco }}</p>\n          <button listPanelEmptyAction (click)=\"createAlert()\">\n            <plus-icon />\n            {{ \"alerts.createAlert\" | transloco }}\n          </button>\n        </ListPanelEmpty>\n      </li>\n    }\n  </ul>\n\n  @if (visible().length > 1) {\n    <p\n      class=\"m-0 ps-(--spacing-2xs) pt-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-muted)\">\n      {{ \"alerts.reorderHint\" | transloco }}\n    </p>\n  }\n\n  <!-- The regions exist before their text does, which is what makes a screen reader announce the text. -->\n  <div role=\"status\">\n    @if (pendingDeletion(); as pending) {\n      <div\n        class=\"mt-(--spacing-2xs) flex items-center gap-(--spacing-2xs) rounded-(--radius-sm) bg-(--bg-neutral-base) py-(--spacing-3xs) ps-(--spacing-xs) pe-(--spacing-3xs) text-(length:--size-sm) text-(--font-neutral-base)\">\n        <span class=\"min-w-0 flex-1\">{{\n          \"alerts.deleted\" | transloco: { name: pending.name }\n        }}</span>\n        <button variant=\"tertiary\" size=\"sm\" (click)=\"undoDeletion()\">\n          {{ \"alerts.undo\" | transloco }}\n        </button>\n      </div>\n    }\n  </div>\n</div>\n"
 		}]
 	}],
-	ctorParameters: () => []
+	ctorParameters: () => [],
+	propDecorators: {
+		dialog: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "dialog",
+				required: false
+			}]
+		}],
+		editRequested: [{
+			type: i0.Output,
+			args: ["editRequested"]
+		}],
+		createRequested: [{
+			type: i0.Output,
+			args: ["createRequested"]
+		}]
+	}
 });
 const passwordChangeSchema = schema((p) => {
 	required(p.currentPassword);
@@ -19105,9 +19719,9 @@ var ListPanelComponent = class ListPanelComponent {
           }
         </ListItem>
       } @empty {
-        <span class="py-4 text-center text-neutral-500">
+        <div class="py-(--spacing-xs) text-center text-(--font-neutral-base)">
           <ng-content />
-        </span>
+        </div>
       }
     </List>
   `,
@@ -19212,9 +19826,9 @@ i0.ɵɵngDeclareClassMetadata({
           }
         </ListItem>
       } @empty {
-        <span class="py-4 text-center text-neutral-500">
+        <div class="py-(--spacing-xs) text-center text-(--font-neutral-base)">
           <ng-content />
-        </span>
+        </div>
       }
     </List>
   `,
@@ -19357,7 +19971,7 @@ var ListPanelFooterComponent = class ListPanelFooterComponent {
 			}
 		},
 		outputs: { loadMore: "loadMore" },
-		host: { properties: { "class": "cn('flex flex-col px-2 mt-2 py-(--spacing-xs)', class())" } },
+		host: { properties: { "class": "cn('flex flex-col gap-(--spacing-xs) px-2 mt-2 py-(--spacing-xs)', class())" } },
 		providers: [provideTranslocoScope("list-panel")],
 		ngImport: i0,
 		template: `
@@ -19509,7 +20123,7 @@ i0.ɵɵngDeclareClassMetadata({
       </button>
     </div>
   `,
-			host: { "[class]": "cn('flex flex-col px-2 mt-2 py-(--spacing-xs)', class())" }
+			host: { "[class]": "cn('flex flex-col gap-(--spacing-xs) px-2 mt-2 py-(--spacing-xs)', class())" }
 		}]
 	}],
 	propDecorators: {
@@ -19588,8 +20202,8 @@ var ListPanelHeaderComponent = class ListPanelHeaderComponent {
 		template: `
     @if (floating()) {
       <div class="p-2">
-        <label class="text-xl font-bold">{{ label() }}</label>
-        <hr class="my-(--spacing-3xs) h-px w-full shrink-0 border-0 bg-(--stroke-neutral-disabled)" />
+        <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->
+        <span role="heading" aria-level="2" class="block text-xl leading-(--line-height-4) font-bold">{{ label() }}</span>
       </div>
     }
   `,
@@ -19608,8 +20222,8 @@ i0.ɵɵngDeclareClassMetadata({
 			template: `
     @if (floating()) {
       <div class="p-2">
-        <label class="text-xl font-bold">{{ label() }}</label>
-        <hr class="my-(--spacing-3xs) h-px w-full shrink-0 border-0 bg-(--stroke-neutral-disabled)" />
+        <!-- Not an <h2>: a page's prose styles put a rule and margins on every h2, even inside a popover. -->
+        <span role="heading" aria-level="2" class="block text-xl leading-(--line-height-4) font-bold">{{ label() }}</span>
       </div>
     }
   `
@@ -19733,7 +20347,7 @@ var BookmarksComponent = class BookmarksComponent {
 		} },
 		providers: [provideTranslocoScope("bookmarks")],
 		ngImport: i0,
-		template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
+		template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <div class=\"flex min-w-0 flex-1 flex-col gap-(--spacing-3xs)\">\n        <ListItemText\n          truncated=\".list-item-text\"\n          #labelCut=\"truncated\"\n          [tooltip]=\"bookmark.label\"\n          [tooltipDisabled]=\"!labelCut.isTruncated()\"\n          tooltipPosition=\"top\"\n          class=\"[&_.list-item-text]:line-clamp-2 in-focus-visible:[&_.list-item-text]:line-clamp-none\">\n          {{ bookmark.label }}\n        </ListItemText>\n\n        @if (bookmark.author || bookmark.parentFolder) {\n          <div class=\"flex min-w-0 flex-wrap gap-(--spacing-3xs)\">\n            @if (bookmark.author) {\n              <Tag\n                variant=\"primary\"\n                scheme=\"sage\"\n                size=\"xs\"\n                class=\"max-w-full gap-1\">\n                <UserIcon class=\"size-3 shrink-0\" />\n                <span\n                  truncated\n                  #authorCut=\"truncated\"\n                  [tooltip]=\"bookmark.author\"\n                  [tooltipDisabled]=\"!authorCut.isTruncated()\"\n                  tooltipPosition=\"top\"\n                  class=\"min-w-0 truncate in-focus-visible:break-words in-focus-visible:whitespace-normal\">\n                  {{ bookmark.author }}\n                </span>\n              </Tag>\n            }\n            @if (bookmark.parentFolder) {\n              <Tag\n                variant=\"primary\"\n                scheme=\"sage\"\n                size=\"xs\"\n                class=\"max-w-full gap-1\">\n                <FolderIcon class=\"size-3 shrink-0\" />\n                <span\n                  truncated\n                  #folderCut=\"truncated\"\n                  [tooltip]=\"bookmark.parentFolder\"\n                  [tooltipDisabled]=\"!folderCut.isTruncated()\"\n                  tooltipPosition=\"top\"\n                  class=\"min-w-0 truncate in-focus-visible:break-words in-focus-visible:whitespace-normal\">\n                  {{ bookmark.parentFolder }}\n                </span>\n              </Tag>\n            }\n          </div>\n        }\n      </div>\n    </ListItemLeft>\n  </ng-template>\n\n  <ListPanelEmpty color=\"pink\">\n    <BookmarkIcon listPanelEmptyIcon solid />\n    {{ \"bookmarks.noBookmarks\" | transloco }}\n    <p listPanelEmptyHint>{{ \"bookmarks.noBookmarksHint\" | transloco }}</p>\n  </ListPanelEmpty>\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -19756,6 +20370,12 @@ var BookmarksComponent = class BookmarksComponent {
 				],
 				outputs: ["itemClick", "delete"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "component",
 				type: ListPanelFooterComponent,
@@ -19815,6 +20435,39 @@ var BookmarksComponent = class BookmarksComponent {
 					"size"
 				]
 			},
+			{
+				kind: "directive",
+				type: TooltipDirective,
+				selector: "[tooltip]",
+				inputs: [
+					"tooltip",
+					"tooltipPosition",
+					"tooltipEvent",
+					"showDelay",
+					"hideDelay",
+					"life",
+					"tooltipOffset",
+					"autoHide",
+					"hideOnEscape",
+					"escape",
+					"tooltipDisabled",
+					"tooltipArrow",
+					"tooltipStyleClass",
+					"tooltipOptions",
+					"tooltip-position",
+					"tooltip-delay",
+					"tooltip-duration",
+					"tooltip-offset"
+				],
+				exportAs: ["tooltip"]
+			},
+			{
+				kind: "directive",
+				type: TruncatedDirective,
+				selector: "[truncated]",
+				inputs: ["truncated"],
+				exportAs: ["truncated"]
+			},
 			{
 				kind: "pipe",
 				type: TranslocoPipe,
@@ -19836,6 +20489,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TranslocoPipe,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent,
 				ListPanelItemDirective,
 				BookmarkIcon,
@@ -19843,10 +20497,12 @@ i0.ɵɵngDeclareClassMetadata({
 				FolderIcon,
 				ListItemLeftDirective,
 				ListItemTextComponent,
-				TagComponent
+				TagComponent,
+				TooltipDirective,
+				TruncatedDirective
 			],
 			providers: [provideTranslocoScope("bookmarks")],
-			template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <ListItemText>{{ bookmark.label }}</ListItemText>\n    </ListItemLeft>\n\n    @if (bookmark.author) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <UserIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.author }}</span>\n      </Tag>\n    }\n    @if (bookmark.parentFolder) {\n      <Tag variant=\"primary\" scheme=\"sage\" size=\"xs\" class=\"gap-1\">\n        <FolderIcon class=\"size-3\" />\n        <span class=\"min-w-0 truncate\">{{ bookmark.parentFolder }}</span>\n      </Tag>\n    }\n  </ng-template>\n\n  {{ \"bookmarks.noBookmarks\" | transloco }}\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
+			template: "<ListPanelHeader\n  [label]=\"'bookmarks.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedBookmarks()\"\n  [getValue]=\"idOf\"\n  [getLabel]=\"labelOf\"\n  deleteButtonTitle=\"bookmarks.removeBookmark\"\n  [ariaLabel]=\"'bookmarks.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-bookmark>\n    <ListItemLeft>\n      <BookmarkIcon solid class=\"shrink-0\" />\n      <div class=\"flex min-w-0 flex-1 flex-col gap-(--spacing-3xs)\">\n        <ListItemText\n          truncated=\".list-item-text\"\n          #labelCut=\"truncated\"\n          [tooltip]=\"bookmark.label\"\n          [tooltipDisabled]=\"!labelCut.isTruncated()\"\n          tooltipPosition=\"top\"\n          class=\"[&_.list-item-text]:line-clamp-2 in-focus-visible:[&_.list-item-text]:line-clamp-none\">\n          {{ bookmark.label }}\n        </ListItemText>\n\n        @if (bookmark.author || bookmark.parentFolder) {\n          <div class=\"flex min-w-0 flex-wrap gap-(--spacing-3xs)\">\n            @if (bookmark.author) {\n              <Tag\n                variant=\"primary\"\n                scheme=\"sage\"\n                size=\"xs\"\n                class=\"max-w-full gap-1\">\n                <UserIcon class=\"size-3 shrink-0\" />\n                <span\n                  truncated\n                  #authorCut=\"truncated\"\n                  [tooltip]=\"bookmark.author\"\n                  [tooltipDisabled]=\"!authorCut.isTruncated()\"\n                  tooltipPosition=\"top\"\n                  class=\"min-w-0 truncate in-focus-visible:break-words in-focus-visible:whitespace-normal\">\n                  {{ bookmark.author }}\n                </span>\n              </Tag>\n            }\n            @if (bookmark.parentFolder) {\n              <Tag\n                variant=\"primary\"\n                scheme=\"sage\"\n                size=\"xs\"\n                class=\"max-w-full gap-1\">\n                <FolderIcon class=\"size-3 shrink-0\" />\n                <span\n                  truncated\n                  #folderCut=\"truncated\"\n                  [tooltip]=\"bookmark.parentFolder\"\n                  [tooltipDisabled]=\"!folderCut.isTruncated()\"\n                  tooltipPosition=\"top\"\n                  class=\"min-w-0 truncate in-focus-visible:break-words in-focus-visible:whitespace-normal\">\n                  {{ bookmark.parentFolder }}\n                </span>\n              </Tag>\n            }\n          </div>\n        }\n      </div>\n    </ListItemLeft>\n  </ng-template>\n\n  <ListPanelEmpty color=\"pink\">\n    <BookmarkIcon listPanelEmptyIcon solid />\n    {{ \"bookmarks.noBookmarks\" | transloco }}\n    <p listPanelEmptyHint>{{ \"bookmarks.noBookmarksHint\" | transloco }}</p>\n  </ListPanelEmpty>\n</ListPanel>\n\n@if (paginatedBookmarks().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -20102,7 +20758,7 @@ var CollectionsComponent = class CollectionsComponent {
 		} },
 		providers: [provideTranslocoScope("collections")],
 		ngImport: i0,
-		template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
+		template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  <ListPanelEmpty color=\"indigo\">\n    <inbox-icon listPanelEmptyIcon />\n    {{ \"collections.noCollections\" | transloco }}\n    <p listPanelEmptyHint>{{ \"collections.noCollectionsHint\" | transloco }}</p>\n  </ListPanelEmpty>\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n",
 		dependencies: [
 			{
 				kind: "component",
@@ -20125,6 +20781,12 @@ var CollectionsComponent = class CollectionsComponent {
 				],
 				outputs: ["itemClick", "delete"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "component",
 				type: ListPanelFooterComponent,
@@ -20182,6 +20844,7 @@ i0.ɵɵngDeclareClassMetadata({
 				TranslocoPipe,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent,
 				ListPanelItemDirective,
 				InboxIcon,
@@ -20189,7 +20852,7 @@ i0.ɵɵngDeclareClassMetadata({
 				ListItemTextComponent
 			],
 			providers: [provideTranslocoScope("collections")],
-			template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  {{ \"collections.noCollections\" | transloco }}\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
+			template: "<ListPanelHeader\n  [label]=\"'collections.label' | transloco\"\n  [floating]=\"!!floating\" />\n\n<ListPanel\n  #panel\n  [items]=\"paginatedCollections()\"\n  [getValue]=\"nameOf\"\n  [getLabel]=\"nameOf\"\n  deleteButtonTitle=\"collections.deleteCollection\"\n  [ariaLabel]=\"'collections.label' | transloco\"\n  (itemClick)=\"onClick($event)\"\n  (delete)=\"onDelete($event)\">\n  <ng-template listPanelItem let-collection>\n    <ListItemLeft>\n      <inbox-icon />\n      <ListItemText>{{ collection.name }}</ListItemText>\n    </ListItemLeft>\n  </ng-template>\n\n  <ListPanelEmpty color=\"indigo\">\n    <inbox-icon listPanelEmptyIcon />\n    {{ \"collections.noCollections\" | transloco }}\n    <p listPanelEmptyHint>{{ \"collections.noCollectionsHint\" | transloco }}</p>\n  </ListPanelEmpty>\n</ListPanel>\n\n@if (paginatedCollections().length > 0) {\n  <ListPanelFooter\n    [navigationHint]=\"panel.keyboardFocused()\"\n    [hasMore]=\"hasMore()\"\n    [config]=\"config\"\n    (loadMore)=\"loadMore()\" />\n}\n"
 		}]
 	}],
 	ctorParameters: () => [],
@@ -30670,6 +31333,14 @@ function navigateToSearch(router, search) {
 	if (search.queryParams?.filters && search.queryParams?.filters?.length > 0) queryParams.f = JSON.stringify(search.queryParams?.filters);
 	router.navigate([search.queryParams?.path], { queryParams });
 }
+function searchItemSubtext(transloco, search) {
+	const parts = [];
+	const filterCount = search.filterCount || 0;
+	if (filterCount > 0) parts.push(transloco.translate("searches.filterCount", { count: filterCount }));
+	if (search.date) parts.push(getRelativeDate(transloco.getActiveLang(), search.date));
+	const text = parts.join(" · ");
+	return text ? text.charAt(0).toUpperCase() + text.slice(1) : void 0;
+}
 const RECENT_SEARCHES_OPTIONS = {
 	itemsPerPage: 10,
 	showLoadMore: true,
@@ -30686,7 +31357,7 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 	userSettingsStore = inject(UserSettingsStore);
 	transloco = inject(TranslocoService);
 	router = inject(Router);
-	getRelativeDate = getRelativeDate;
+	subtextOf = (search) => searchItemSubtext(this.transloco, search);
 	urlOf = (search) => search.url;
 	labelOf = (search) => search.display || search.label || search.url;
 	range = signal(10, ...ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []);
@@ -30759,24 +31430,15 @@ var RecentSearchesComponent = class RecentSearchesComponent {
       <ng-template listPanelItem let-search>
         <ListItemLeft>
           <history-icon />
-          <ListItemText>{{ search.display || search.label }}</ListItemText>
+          <ListItemText [subtext]="subtextOf(search)">{{ search.display || search.label }}</ListItemText>
         </ListItemLeft>
-
-        @let filterCount = search.filterCount || 0;
-        @if (filterCount > 0) {
-          <Badge variant="number" fill="secondary" scheme="grey" size="xs" class="flex items-center gap-1" aria-hidden="true">
-            <FilterIcon />
-            {{ 'searches.filterCount' | transloco: { count: filterCount } }}
-          </Badge>
-        }
-
-        @let date = search.date;
-        @if (date) {
-          <Tag variant="primary" scheme="sage" size="xs" class="ms-auto shrink-0 first-letter:capitalize">{{ getRelativeDate(transloco.getActiveLang(), date) }}</Tag>
-        }
       </ng-template>
 
-      {{ "searches.recent.noRecentSearches" | transloco }}
+      <ListPanelEmpty color="blue">
+        <history-icon listPanelEmptyIcon />
+        {{ "searches.recent.noRecentSearches" | transloco }}
+        <p listPanelEmptyHint>{{ "searches.recent.noRecentSearchesHint" | transloco }}</p>
+      </ListPanelEmpty>
     </ListPanel>
 
     @if (paginatedRecentSearches().length > 0) {
@@ -30794,36 +31456,6 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 				selector: "history, history-icon, History, HistoryIcon",
 				inputs: ["class"]
 			},
-			{
-				kind: "component",
-				type: FilterIcon,
-				selector: "filter, filter-icon, Filter, FilterIcon",
-				inputs: ["class"]
-			},
-			{
-				kind: "directive",
-				type: BadgeComponent,
-				selector: "badge, Badge",
-				inputs: [
-					"class",
-					"variant",
-					"fill",
-					"scheme",
-					"size",
-					"aria-label"
-				]
-			},
-			{
-				kind: "directive",
-				type: TagComponent,
-				selector: "tag, Tag",
-				inputs: [
-					"class",
-					"variant",
-					"scheme",
-					"size"
-				]
-			},
 			{
 				kind: "directive",
 				type: ListItemLeftDirective,
@@ -30863,6 +31495,12 @@ var RecentSearchesComponent = class RecentSearchesComponent {
 				],
 				outputs: ["itemClick", "delete"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "component",
 				type: ListPanelFooterComponent,
@@ -30896,14 +31534,12 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				HistoryIcon,
-				FilterIcon,
-				BadgeComponent,
-				TagComponent,
 				ListItemLeftDirective,
 				ListItemTextComponent,
 				ListPanelItemDirective,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent
 			],
 			template: `
@@ -30920,24 +31556,15 @@ i0.ɵɵngDeclareClassMetadata({
       <ng-template listPanelItem let-search>
         <ListItemLeft>
           <history-icon />
-          <ListItemText>{{ search.display || search.label }}</ListItemText>
+          <ListItemText [subtext]="subtextOf(search)">{{ search.display || search.label }}</ListItemText>
         </ListItemLeft>
-
-        @let filterCount = search.filterCount || 0;
-        @if (filterCount > 0) {
-          <Badge variant="number" fill="secondary" scheme="grey" size="xs" class="flex items-center gap-1" aria-hidden="true">
-            <FilterIcon />
-            {{ 'searches.filterCount' | transloco: { count: filterCount } }}
-          </Badge>
-        }
-
-        @let date = search.date;
-        @if (date) {
-          <Tag variant="primary" scheme="sage" size="xs" class="ms-auto shrink-0 first-letter:capitalize">{{ getRelativeDate(transloco.getActiveLang(), date) }}</Tag>
-        }
       </ng-template>
 
-      {{ "searches.recent.noRecentSearches" | transloco }}
+      <ListPanelEmpty color="blue">
+        <history-icon listPanelEmptyIcon />
+        {{ "searches.recent.noRecentSearches" | transloco }}
+        <p listPanelEmptyHint>{{ "searches.recent.noRecentSearchesHint" | transloco }}</p>
+      </ListPanelEmpty>
     </ListPanel>
 
     @if (paginatedRecentSearches().length > 0) {
@@ -31409,7 +32036,7 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 	userSettingsStore = inject(UserSettingsStore);
 	transloco = inject(TranslocoService);
 	router = inject(Router);
-	getRelativeDate = getRelativeDate;
+	subtextOf = (search) => searchItemSubtext(this.transloco, search);
 	urlOf = (search) => search.url;
 	labelOf = (search) => search.display || search.label || search.url;
 	range = signal(10, ...ngDevMode ? [{ debugName: "range" }] : /* istanbul ignore next */ []);
@@ -31482,24 +32109,15 @@ var SavedSearchesComponent = class SavedSearchesComponent {
       <ng-template listPanelItem let-search>
         <ListItemLeft>
           <star-icon [solid]="true" />
-          <ListItemText>{{ search.display || search.label }}</ListItemText>
+          <ListItemText [subtext]="subtextOf(search)">{{ search.display || search.label }}</ListItemText>
         </ListItemLeft>
-
-        @let filterCount = search.filterCount || 0;
-        @if (filterCount > 0) {
-          <Badge variant="number" fill="secondary" scheme="grey" size="xs" class="flex items-center gap-1" aria-hidden="true">
-            <FilterIcon />
-            {{ 'searches.filterCount' | transloco: { count: filterCount } }}
-          </Badge>
-        }
-
-        @let date = search.date;
-        @if (date) {
-          <Tag variant="primary" scheme="sage" size="xs" class="ms-auto shrink-0 first-letter:capitalize">{{ getRelativeDate(transloco.getActiveLang(), date) }}</Tag>
-        }
       </ng-template>
 
-      {{ 'searches.saved.noSavedSearches' | transloco }}
+      <ListPanelEmpty color="yellow">
+        <star-icon listPanelEmptyIcon [solid]="true" />
+        {{ 'searches.saved.noSavedSearches' | transloco }}
+        <p listPanelEmptyHint>{{ 'searches.saved.noSavedSearchesHint' | transloco }}</p>
+      </ListPanelEmpty>
     </ListPanel>
 
     @if(paginatedSearches().length > 0) {
@@ -31514,36 +32132,6 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 				selector: "star, star-icon, Star, StarIcon",
 				inputs: ["class", "solid"]
 			},
-			{
-				kind: "component",
-				type: FilterIcon,
-				selector: "filter, filter-icon, Filter, FilterIcon",
-				inputs: ["class"]
-			},
-			{
-				kind: "directive",
-				type: BadgeComponent,
-				selector: "badge, Badge",
-				inputs: [
-					"class",
-					"variant",
-					"fill",
-					"scheme",
-					"size",
-					"aria-label"
-				]
-			},
-			{
-				kind: "directive",
-				type: TagComponent,
-				selector: "tag, Tag",
-				inputs: [
-					"class",
-					"variant",
-					"scheme",
-					"size"
-				]
-			},
 			{
 				kind: "directive",
 				type: ListItemLeftDirective,
@@ -31583,6 +32171,12 @@ var SavedSearchesComponent = class SavedSearchesComponent {
 				],
 				outputs: ["itemClick", "delete"]
 			},
+			{
+				kind: "component",
+				type: ListPanelEmptyComponent,
+				selector: "list-panel-empty, ListPanelEmpty",
+				inputs: ["color"]
+			},
 			{
 				kind: "component",
 				type: ListPanelFooterComponent,
@@ -31616,14 +32210,12 @@ i0.ɵɵngDeclareClassMetadata({
 			imports: [
 				TranslocoPipe,
 				StarIcon,
-				FilterIcon,
-				BadgeComponent,
-				TagComponent,
 				ListItemLeftDirective,
 				ListItemTextComponent,
 				ListPanelItemDirective,
 				ListPanelHeaderComponent,
 				ListPanelComponent,
+				ListPanelEmptyComponent,
 				ListPanelFooterComponent
 			],
 			template: `
@@ -31640,24 +32232,15 @@ i0.ɵɵngDeclareClassMetadata({
       <ng-template listPanelItem let-search>
         <ListItemLeft>
           <star-icon [solid]="true" />
-          <ListItemText>{{ search.display || search.label }}</ListItemText>
+          <ListItemText [subtext]="subtextOf(search)">{{ search.display || search.label }}</ListItemText>
         </ListItemLeft>
-
-        @let filterCount = search.filterCount || 0;
-        @if (filterCount > 0) {
-          <Badge variant="number" fill="secondary" scheme="grey" size="xs" class="flex items-center gap-1" aria-hidden="true">
-            <FilterIcon />
-            {{ 'searches.filterCount' | transloco: { count: filterCount } }}
-          </Badge>
-        }
-
-        @let date = search.date;
-        @if (date) {
-          <Tag variant="primary" scheme="sage" size="xs" class="ms-auto shrink-0 first-letter:capitalize">{{ getRelativeDate(transloco.getActiveLang(), date) }}</Tag>
-        }
       </ng-template>
 
-      {{ 'searches.saved.noSavedSearches' | transloco }}
+      <ListPanelEmpty color="yellow">
+        <star-icon listPanelEmptyIcon [solid]="true" />
+        {{ 'searches.saved.noSavedSearches' | transloco }}
+        <p listPanelEmptyHint>{{ 'searches.saved.noSavedSearchesHint' | transloco }}</p>
+      </ListPanelEmpty>
     </ListPanel>
 
     @if(paginatedSearches().length > 0) {
@@ -32543,6 +33126,147 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}] }
 });
+var SettingsAlertsPanelComponent = class SettingsAlertsPanelComponent {
+	closeRequested = output();
+	form = signal(void 0, ...ngDevMode ? [{ debugName: "form" }] : /* istanbul ignore next */ []);
+	edit(index) {
+		this.form.set({ index });
+	}
+	create() {
+		this.form.set({ index: void 0 });
+	}
+	back() {
+		this.form.set(void 0);
+	}
+	static ɵfac = i0.ɵɵngDeclareFactory({
+		minVersion: "12.0.0",
+		version: "22.2.1",
+		ngImport: i0,
+		type: SettingsAlertsPanelComponent,
+		deps: [],
+		target: i0.ɵɵFactoryTarget.Component
+	});
+	static ɵcmp = i0.ɵɵngDeclareComponent({
+		minVersion: "17.0.0",
+		version: "22.2.1",
+		type: SettingsAlertsPanelComponent,
+		isStandalone: true,
+		selector: "settings-alerts-panel",
+		outputs: { closeRequested: "closeRequested" },
+		providers: [provideTranslocoScope("settings"), provideTranslocoScope("alerts")],
+		ngImport: i0,
+		template: `
+    @if (form(); as current) {
+      <button type="button" variant="tertiary" size="sm" class="-ms-(--spacing-xs) mb-(--spacing-xs)" (click)="back()">
+        <chevron-left-icon aria-hidden="true" />
+        {{ "settings.alerts.back" | transloco }}
+      </button>
+      <h2 class="mb-(--spacing-md) text-(length:--size-2xl) font-semibold">
+        {{ (current.index === undefined ? "alerts.createAlert" : "alerts.editAlert") | transloco }}
+      </h2>
+
+      <alert-form #alertForm [index]="current.index" (saved)="back()" (executed)="closeRequested.emit()" />
+
+      <div class="mt-(--spacing-lg) flex justify-end gap-(--spacing-xs)">
+        <button type="button" variant="secondary" (click)="back()">{{ "cancel" | transloco }}</button>
+        <button type="submit" [attr.form]="alertForm.formId" [disabled]="alertForm.saving()">{{ "confirm" | transloco }}</button>
+      </div>
+    } @else {
+      <h2 class="text-(length:--size-2xl) font-semibold">{{ "settings.alerts.title" | transloco }}</h2>
+      <p class="text-(--font-primary-muted)">{{ "settings.alerts.description" | transloco }}</p>
+
+      <Alerts class="mt-(--spacing-md) block" [dialog]="false" (editRequested)="edit($event)" (createRequested)="create()" />
+    }
+  `,
+		isInline: true,
+		dependencies: [
+			{
+				kind: "directive",
+				type: ButtonComponent,
+				selector: "button",
+				inputs: [
+					"class",
+					"variant",
+					"scheme",
+					"iconOnly",
+					"size"
+				]
+			},
+			{
+				kind: "component",
+				type: ChevronLeftIcon,
+				selector: "chevron-left, chevron-left-icon, ChevronLeft, ChevronLeftIcon",
+				inputs: ["class"]
+			},
+			{
+				kind: "component",
+				type: AlertsComponent,
+				selector: "Alerts",
+				inputs: ["dialog"],
+				outputs: ["editRequested", "createRequested"]
+			},
+			{
+				kind: "component",
+				type: AlertFormComponent,
+				selector: "alert-form, alertform, AlertFormComponent",
+				inputs: ["index"],
+				outputs: ["saved", "executed"]
+			},
+			{
+				kind: "pipe",
+				type: TranslocoPipe,
+				name: "transloco"
+			}
+		]
+	});
+};
+i0.ɵɵngDeclareClassMetadata({
+	minVersion: "12.0.0",
+	version: "22.2.1",
+	ngImport: i0,
+	type: SettingsAlertsPanelComponent,
+	decorators: [{
+		type: Component,
+		args: [{
+			selector: "settings-alerts-panel",
+			imports: [
+				TranslocoPipe,
+				ButtonComponent,
+				ChevronLeftIcon,
+				AlertsComponent,
+				AlertFormComponent
+			],
+			providers: [provideTranslocoScope("settings"), provideTranslocoScope("alerts")],
+			template: `
+    @if (form(); as current) {
+      <button type="button" variant="tertiary" size="sm" class="-ms-(--spacing-xs) mb-(--spacing-xs)" (click)="back()">
+        <chevron-left-icon aria-hidden="true" />
+        {{ "settings.alerts.back" | transloco }}
+      </button>
+      <h2 class="mb-(--spacing-md) text-(length:--size-2xl) font-semibold">
+        {{ (current.index === undefined ? "alerts.createAlert" : "alerts.editAlert") | transloco }}
+      </h2>
+
+      <alert-form #alertForm [index]="current.index" (saved)="back()" (executed)="closeRequested.emit()" />
+
+      <div class="mt-(--spacing-lg) flex justify-end gap-(--spacing-xs)">
+        <button type="button" variant="secondary" (click)="back()">{{ "cancel" | transloco }}</button>
+        <button type="submit" [attr.form]="alertForm.formId" [disabled]="alertForm.saving()">{{ "confirm" | transloco }}</button>
+      </div>
+    } @else {
+      <h2 class="text-(length:--size-2xl) font-semibold">{{ "settings.alerts.title" | transloco }}</h2>
+      <p class="text-(--font-primary-muted)">{{ "settings.alerts.description" | transloco }}</p>
+
+      <Alerts class="mt-(--spacing-md) block" [dialog]="false" (editRequested)="edit($event)" (createRequested)="create()" />
+    }
+  `
+		}]
+	}],
+	propDecorators: { closeRequested: [{
+		type: i0.Output,
+		args: ["closeRequested"]
+	}] }
+});
 const THEMES$1 = [
 	"light",
 	"dark",
@@ -32879,6 +33603,10 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 			id: "appearance",
 			labelKey: "settings.appearance.nav"
 		},
+		{
+			id: "alerts",
+			labelKey: "settings.alerts.nav"
+		},
 		{
 			id: "shortcuts",
 			labelKey: "settings.shortcuts.nav"
@@ -32959,6 +33687,9 @@ var SettingsDialogComponent = class SettingsDialogComponent {
                     @case ("appearance") {
                       <palette-icon aria-hidden="true" />
                     }
+                    @case ("alerts") {
+                      <bell-icon aria-hidden="true" />
+                    }
                     @case ("shortcuts") {
                       <keyboard-icon aria-hidden="true" />
                     }
@@ -32977,6 +33708,9 @@ var SettingsDialogComponent = class SettingsDialogComponent {
               @case ("appearance") {
                 <settings-appearance-panel />
               }
+              @case ("alerts") {
+                <settings-alerts-panel (closeRequested)="dialog.close()" />
+              }
               @case ("shortcuts") {
                 <settings-shortcuts-panel />
               }
@@ -33030,6 +33764,12 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 				selector: "palette, palette-icon, Palette, PaletteIcon",
 				inputs: ["class"]
 			},
+			{
+				kind: "component",
+				type: BellIcon,
+				selector: "bell, bell-icon, Bell, BellIcon",
+				inputs: ["class"]
+			},
 			{
 				kind: "component",
 				type: KeyboardIcon,
@@ -33059,6 +33799,12 @@ var SettingsDialogComponent = class SettingsDialogComponent {
 				type: SettingsAppearancePanelComponent,
 				selector: "settings-appearance-panel"
 			},
+			{
+				kind: "component",
+				type: SettingsAlertsPanelComponent,
+				selector: "settings-alerts-panel",
+				outputs: ["closeRequested"]
+			},
 			{
 				kind: "component",
 				type: SettingsShortcutsPanelComponent,
@@ -33088,11 +33834,13 @@ i0.ɵɵngDeclareClassMetadata({
 				DialogContentComponent,
 				UserIcon,
 				PaletteIcon,
+				BellIcon,
 				KeyboardIcon,
 				XMarkIcon,
 				SidebarInsetDirective,
 				SettingsAccountPanelComponent,
 				SettingsAppearancePanelComponent,
+				SettingsAlertsPanelComponent,
 				SettingsShortcutsPanelComponent
 			],
 			providers: [provideTranslocoScope("settings")],
@@ -33129,6 +33877,9 @@ i0.ɵɵngDeclareClassMetadata({
                     @case ("appearance") {
                       <palette-icon aria-hidden="true" />
                     }
+                    @case ("alerts") {
+                      <bell-icon aria-hidden="true" />
+                    }
                     @case ("shortcuts") {
                       <keyboard-icon aria-hidden="true" />
                     }
@@ -33147,6 +33898,9 @@ i0.ɵɵngDeclareClassMetadata({
               @case ("appearance") {
                 <settings-appearance-panel />
               }
+              @case ("alerts") {
+                <settings-alerts-panel (closeRequested)="dialog.close()" />
+              }
               @case ("shortcuts") {
                 <settings-shortcuts-panel />
               }
@@ -33639,6 +34393,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, 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, STARTUP_DATA_SOURCE, 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, provideStartupAggregation, 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, AlertFormComponent, 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, STARTUP_DATA_SOURCE, SavedSearch, SavedSearchDialog, SavedSearchPopover, SavedSearchesComponent, SavedSearchesService, SearchFeedbackComponent, SearchInputFooter, SearchService, SelectArticleDirective, SelectionService, SelectionStore, Settings, SettingsAccountPanelComponent, SettingsAlertsPanelComponent, 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, provideStartupAggregation, 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