@focus8/settings-registry 0.5.0 → 0.7.0

package/dist/index.js

@@ -138,21 +138,18 @@ export const SETTINGS_GROUPS = [
         id: 'calendarType',
         labelKey: 'Settings.CalendarType',
         icon: 'ArrowLeftRight',
-        keys: ['calendarView.type'],
+        keys: ['calendarView.type', 'calendarView.view'],
     },
     {
         id: 'calendarView',
         labelKey: 'Settings.CalendarView',
         icon: 'Eye',
         keys: [
-            'calendarView.view',
-            'calendarView.dayViewZoom',
-            'calendarView.weekViewZoom',
-            'calendarView.splitView',
             'calendarView.showCalendarNames',
+            'calendarView.splitView',
             'calendarView.calendarColumns',
-            'calendarView.autoReturnToTodayEnabled',
-            'calendarView.autoReturnToTodayTimeoutSeconds',
+            'calendarView.dayViewZoom',
+            'calendarView.weekViewZoom',
         ],
     },
     {
@@ -197,12 +194,14 @@ export const SETTINGS_GROUPS = [
             'sound.timerAlarmTimeout',
             'timer.',
         ],
+        appMode: 'ENROLLED',
     },
     {
         id: 'lockScreen',
         labelKey: 'Settings.LockScreen',
         icon: 'Lock',
         keys: ['lockScreen.'],
+        appMode: 'ENROLLED',
     },
     {
         id: 'touch',
@@ -221,7 +220,11 @@ export const SETTINGS_GROUPS = [
         id: 'device',
         labelKey: 'SettingsDevices.Title',
         icon: 'Smartphone',
-        keys: ['device.'],
+        keys: [
+            'device.',
+            'calendarView.autoReturnToTodayEnabled',
+            'calendarView.autoReturnToTodayTimeoutSeconds',
+        ],
     },
     {
         id: 'language',
@@ -240,6 +243,223 @@ export const EXCLUDED_DEVICE_SETTINGS = new Set([
     'device.authWarningDismissTtlDays',
     'notification.hasBeenPrompted',
 ]);
+/**
+ * Maps each setting key to its i18n label and optional description key.
+ * These keys must exist in every consumer's i18n catalog.
+ *
+ * When a key is missing from this map, consumers should fall back to
+ * the auto-generated label from `SettingsRegistry.getSettingLabel()`.
+ */
+export const SETTINGS_LABELS = {
+    // ── Appearance ──────────────────────────────────────────────────────────
+    'appearance.theme': { labelKey: 'Settings.SelectTheme' },
+    'appearance.clockType': {
+        labelKey: 'Settings.ClockType',
+        descriptionKey: 'Settings.ClockTypeDescription',
+    },
+    'appearance.enableDayColors': {
+        labelKey: 'Settings.EnableDayColors',
+        descriptionKey: 'Settings.EnableDayColorsDescription',
+    },
+    // ── Calendar type ───────────────────────────────────────────────────────
+    'calendarView.type': {
+        labelKey: 'Settings.CalendarType',
+        descriptionKey: 'Settings.ModeDescription',
+    },
+    'calendarView.view': { labelKey: 'Settings.Calendar' },
+    // ── Calendar view ───────────────────────────────────────────────────────
+    'calendarView.showCalendarNames': { labelKey: 'Settings.ShowCalendarNames' },
+    'calendarView.splitView': {
+        labelKey: 'Settings.SplitViewLabel',
+        descriptionKey: 'Settings.SplitViewDescription',
+    },
+    'calendarView.calendarColumns': {
+        labelKey: 'Settings.SplitViewConfig',
+        descriptionKey: 'Settings.SplitViewConfigDescription',
+    },
+    'calendarView.dayViewZoom': {
+        labelKey: 'Settings.CalendarDayViewIntervalTitle',
+        descriptionKey: 'Settings.CalendarDayViewIntervalDescription',
+    },
+    'calendarView.weekViewZoom': {
+        labelKey: 'Settings.CalendarWeekViewIntervalTitle',
+        descriptionKey: 'Settings.CalendarWeekViewIntervalDescription',
+    },
+    // ── Auto return to today ────────────────────────────────────────────────
+    'calendarView.autoReturnToTodayEnabled': {
+        labelKey: 'Settings.AutoReturnToTodayEnabled',
+    },
+    'calendarView.autoReturnToTodayTimeoutSeconds': {
+        labelKey: 'Settings.AutoReturnToTodayTimeout',
+    },
+    // ── Weather ─────────────────────────────────────────────────────────────
+    'calendarView.weatherLocation': { labelKey: 'Settings.WeatherLocation' },
+    'calendarView.showWeatherOnEvents': {
+        labelKey: 'Settings.ShowWeatherOnEvents',
+        descriptionKey: 'Settings.ShowWeatherOnEventsDescription',
+    },
+    'calendarView.showWeatherOnTimeline': {
+        labelKey: 'Settings.ShowWeatherOnTimeline',
+        descriptionKey: 'Settings.ShowWeatherOnTimelineDescription',
+    },
+    // ── Sound & alerts ──────────────────────────────────────────────────────
+    'sound.reminderVolume': {
+        labelKey: 'Settings.ReminderVolume',
+        descriptionKey: 'Settings.ReminderVolumeDescription',
+    },
+    'sound.timerVolume': {
+        labelKey: 'Settings.TimerVolume',
+        descriptionKey: 'Settings.TimerVolumeDescription',
+    },
+    'sound.mediaVolume': {
+        labelKey: 'Settings.MediaVolume',
+        descriptionKey: 'Settings.MediaVolumeDescription',
+    },
+    'sound.alarmSound': { labelKey: 'Settings.AlarmSound' },
+    'sound.reminderAlarmSound': { labelKey: 'Settings.ReminderAlarmAsset' },
+    'sound.reminderAlarmTimeout': { labelKey: 'Settings.ReminderAlarmTimeout' },
+    'sound.timerAlarmSound': { labelKey: 'Settings.TimerAlarmSound' },
+    'sound.timerAlarmTimeout': { labelKey: 'Settings.TimerAlarmTimeout' },
+    'sound.allowCustomReminderSounds': {
+        labelKey: 'Settings.AllowCustomReminderSounds',
+    },
+    'sound.ttsEnabled': {
+        labelKey: 'Settings.EnableSpeech',
+        descriptionKey: 'Settings.EnableSpeechDescription',
+    },
+    'sound.ttsRate': { labelKey: 'Settings.TtsTitle' },
+    // ── Timer ───────────────────────────────────────────────────────────────
+    'timer.showTimeRemaining': { labelKey: 'Settings.TimerShowTimeRemaining' },
+    'timer.showEndTime': { labelKey: 'Settings.TimerShowEndTime' },
+    'timer.showRestartButton': { labelKey: 'Settings.TimerShowRestartButton' },
+    'timer.showPauseButton': { labelKey: 'Settings.TimerShowPauseButton' },
+    // ── Lock screen ─────────────────────────────────────────────────────────
+    'lockScreen.pin': { labelKey: 'Settings.LockScreenTitlePin' },
+    'lockScreen.clockDisplay': { labelKey: 'Settings.LockScreenClockTitle' },
+    'lockScreen.showDate': { labelKey: 'Settings.LockScreenShowDate' },
+    'lockScreen.showHourNumbers': {
+        labelKey: 'Settings.LockScreenShowHourNumbers',
+    },
+    'lockScreen.imageMode': { labelKey: 'Settings.LockScreenImageModeTitle' },
+    'lockScreen.backgroundImage': {
+        labelKey: 'Settings.LockScreenImageModeBackground',
+    },
+    'lockScreen.photoFrameImages': {
+        labelKey: 'Settings.LockScreenImageModePhotoFrame',
+    },
+    'lockScreen.photoFrameIntervalSeconds': {
+        labelKey: 'Settings.LockScreenPhotoFrameIntervalTitle',
+    },
+    'lockScreen.inactivityLockEnabled': {
+        labelKey: 'SettingsInactivity.EnableLabel',
+    },
+    'lockScreen.inactivityTimeoutMinutes': {
+        labelKey: 'SettingsInactivity.TimeoutLabel',
+    },
+    // ── Touch / gestures ───────────────────────────────────────────────────
+    'touch.enableTapToCreate': {
+        labelKey: 'Settings.EnableTapToCreate',
+        descriptionKey: 'Settings.EnableTapToCreateDescription',
+    },
+    'touch.enableDragDrop': {
+        labelKey: 'Settings.EnableDragDrop',
+        descriptionKey: 'Settings.EnableDragDropDescription',
+    },
+    // ── Device ──────────────────────────────────────────────────────────────
+    'device.timePickerMode': { labelKey: 'Settings.DateTimeTitle' },
+    // ── Language ────────────────────────────────────────────────────────────
+    'language.locale': { labelKey: 'Settings.SelectLanguage' },
+    // ── Notifications ───────────────────────────────────────────────────────
+    'notification.enabled': { labelKey: 'Settings.NotificationsEnabled' },
+    'notification.notifyAllCalendars': {
+        labelKey: 'Settings.NotifyAllCalendars',
+    },
+    'notification.enabledCalendarIds': {
+        labelKey: 'Settings.NotificationsCalendars',
+    },
+    // ── Chronological header ────────────────────────────────────────────────
+    'chronological.header.showNavigationArrows': {
+        labelKey: 'ChronologicalFeatures.NavigationArrows',
+    },
+    'chronological.header.showClock': {
+        labelKey: 'ChronologicalFeatures.Clock',
+    },
+    'chronological.header.showCurrentYearInDate': {
+        labelKey: 'ChronologicalFeatures.ShowCurrentYear',
+    },
+    'chronological.header.showTimeOfDay': {
+        labelKey: 'ChronologicalFeatures.TimeOfDay',
+    },
+    // ── Chronological footer ────────────────────────────────────────────────
+    'chronological.footer.showMenuButton': {
+        labelKey: 'ChronologicalFeatures.MenuButton',
+    },
+    'chronological.footer.showViewSwitcherDay': {
+        labelKey: 'ChronologicalFeatures.ViewSwitcherDay',
+    },
+    'chronological.footer.showViewSwitcherWeek': {
+        labelKey: 'ChronologicalFeatures.ViewSwitcherWeek',
+    },
+    'chronological.footer.showViewSwitcherMonth': {
+        labelKey: 'ChronologicalFeatures.ViewSwitcherMonth',
+    },
+    'chronological.footer.showTimerButton': {
+        labelKey: 'ChronologicalFeatures.TimerButton',
+    },
+    'chronological.footer.showNewEventButton': {
+        labelKey: 'ChronologicalFeatures.NewEventButton',
+    },
+    'chronological.footer.showSettingsButton': {
+        labelKey: 'ChronologicalFeatures.SettingsButton',
+    },
+    // ── Chronological timer ─────────────────────────────────────────────────
+    'chronological.timer.showNewCountdown': {
+        labelKey: 'TimerFeatures.ShowNewCountdown',
+    },
+    'chronological.timer.showFromTemplate': {
+        labelKey: 'TimerFeatures.ShowFromTemplate',
+    },
+    'chronological.timer.showEditTemplate': {
+        labelKey: 'TimerFeatures.ShowEditTemplate',
+    },
+    'chronological.timer.showDeleteTemplate': {
+        labelKey: 'TimerFeatures.ShowDeleteTemplate',
+    },
+    'chronological.timer.showAddTemplate': {
+        labelKey: 'TimerFeatures.ShowAddTemplate',
+    },
+    // ── Chronological menu ──────────────────────────────────────────────────
+    'chronological.menu.showSettingsButton': {
+        labelKey: 'ChronologicalFeatures.MenuSettingsButton',
+    },
+    'chronological.quickSettings.showTimerVolume': {
+        labelKey: 'ChronologicalFeatures.QuickSettingsTimerVolume',
+    },
+    'chronological.quickSettings.showReminderVolume': {
+        labelKey: 'ChronologicalFeatures.QuickSettingsReminderVolume',
+    },
+    'chronological.quickSettings.showMediaVolume': {
+        labelKey: 'ChronologicalFeatures.QuickSettingsMediaVolume',
+    },
+    'chronological.quickSettings.showBrightness': {
+        labelKey: 'ChronologicalFeatures.QuickSettingsBrightness',
+    },
+    'chronological.quickSettings.showLockScreen': {
+        labelKey: 'ChronologicalFeatures.QuickSettingsLockScreen',
+    },
+    // ── Event form (time-based) ─────────────────────────────────────────────
+    'eventForm.recurrence': { labelKey: 'Calendar.LabelRecurrence' },
+    'eventForm.reminders': { labelKey: 'Calendar.LabelReminders' },
+    'eventForm.emailReminders': { labelKey: 'Calendar.LabelEmailReminders' },
+    'eventForm.location': { labelKey: 'Common.Location' },
+    'eventForm.travelTime': { labelKey: 'TravelTime.Title' },
+    'eventForm.description': { labelKey: 'Common.Description' },
+    'eventForm.checklist': { labelKey: 'EventChecklist.DefaultName' },
+    'eventForm.images': { labelKey: 'EventImageGallery.SectionTitle' },
+    'eventForm.audioClips': { labelKey: 'EventAudioGallery.SectionTitle' },
+    'eventForm.notificationReceivers': { labelKey: 'EventForm.NotificationReceivers' },
+    'eventForm.visibility': { labelKey: 'EventVisibility.Title' },
+};
 /**
  * Check whether a setting key matches a group's key matchers.
  */
@@ -254,9 +474,9 @@ function matchesGroup(key, group) {
  * buckets them into the standard groups, filtering by calendar type and
  * excluded keys.
  */
-export function groupSettingsForDevice(allSettings, calendarType) {
-    // Filter excluded
-    const settings = allSettings.filter((s) => !EXCLUDED_DEVICE_SETTINGS.has(s.key));
+export function groupSettingsForDevice(allSettings, calendarType, appMode) {
+    // Filter excluded and hidden settings
+    const settings = allSettings.filter((s) => !EXCLUDED_DEVICE_SETTINGS.has(s.key) && s.uiType !== 'HIDDEN');
     // Calendar type filtering for event form keys
     const isChronological = calendarType === 'chronological';
     const filteredSettings = settings.filter((s) => {
@@ -275,6 +495,10 @@ export function groupSettingsForDevice(allSettings, calendarType) {
         if (group.calendarType && group.calendarType !== calendarType) {
             continue;
         }
+        // Skip groups not relevant for current app mode
+        if (group.appMode && group.appMode !== appMode) {
+            continue;
+        }
         const matched = filteredSettings.filter((s) => !claimed.has(s.key) && matchesGroup(s.key, group));
         if (matched.length === 0) {
             continue;
@@ -298,10 +522,51 @@ export const DEFAULT_REGISTRY_CONFIG = {
     defaultLocale: 'nb',
 };
 // ---------------------------------------------------------------------------
+// Shared option arrays (reused across multiple settings)
+// ---------------------------------------------------------------------------
+const ALARM_SOUND_OPTIONS = [
+    { value: 'none', labelKey: 'Settings.Option.AlarmSound.None' },
+    { value: 'alarm1', labelKey: 'Settings.Option.AlarmSound.Alarm1' },
+    { value: 'alarm2', labelKey: 'Settings.Option.AlarmSound.Alarm2' },
+    { value: 'alarm3', labelKey: 'Settings.Option.AlarmSound.Alarm3' },
+    { value: 'alarm4', labelKey: 'Settings.Option.AlarmSound.Alarm4' },
+    { value: 'alarm5', labelKey: 'Settings.Option.AlarmSound.Alarm5' },
+    { value: 'alarm6', labelKey: 'Settings.Option.AlarmSound.Alarm6' },
+    { value: 'alarm7', labelKey: 'Settings.Option.AlarmSound.Alarm7' },
+    { value: 'alarm8', labelKey: 'Settings.Option.AlarmSound.Alarm8' },
+    { value: 'alarm9', labelKey: 'Settings.Option.AlarmSound.Alarm9' },
+];
+const ALARM_TIMEOUT_OPTIONS = [
+    { value: 1, labelKey: 'Settings.Option.AlarmTimeout.1min' },
+    { value: 2, labelKey: 'Settings.Option.AlarmTimeout.2min' },
+    { value: 3, labelKey: 'Settings.Option.AlarmTimeout.3min' },
+    { value: 5, labelKey: 'Settings.Option.AlarmTimeout.5min' },
+    { value: 10, labelKey: 'Settings.Option.AlarmTimeout.10min' },
+];
+const DAY_VIEW_ZOOM_OPTIONS = [
+    { value: 15, labelKey: 'Settings.Option.DayViewZoom.15min' },
+    { value: 30, labelKey: 'Settings.Option.DayViewZoom.30min' },
+    { value: 60, labelKey: 'Settings.Option.DayViewZoom.60min' },
+];
+const TIME_OF_DAY_SLIDER = { min: 0, max: 23, step: 1 };
+// ---------------------------------------------------------------------------
 // Helper
 // ---------------------------------------------------------------------------
-function def(category, type, defaultValue, sync = true) {
-    return { category, type, default: defaultValue, sync };
+function def(category, type, defaultValue, uiType, extra) {
+    const result = {
+        category,
+        type,
+        default: defaultValue,
+        sync: extra?.sync ?? true,
+        uiType,
+    };
+    if (extra?.options) {
+        result.options = extra.options;
+    }
+    if (extra?.sliderConfig) {
+        result.sliderConfig = extra.sliderConfig;
+    }
+    return result;
 }
 // ---------------------------------------------------------------------------
 // Entry builder (internal — used by SettingsRegistry class and factory)
@@ -311,159 +576,276 @@ function buildEntries(config) {
         // ═══════════════════════════════════════════════════════════════════════
         // Appearance
         // ═══════════════════════════════════════════════════════════════════════
-        'appearance.theme': def('appearance', 'string', config.defaultTheme),
-        'appearance.clockType': def('appearance', 'string', 'digital'),
-        'appearance.enableDayColors': def('appearance', 'boolean', false),
+        'appearance.theme': def('appearance', 'string', config.defaultTheme, 'CUSTOM_THEME_PICKER', {
+            options: [
+                { value: 'light', labelKey: 'Settings.Option.Theme.Light' },
+                { value: 'dark', labelKey: 'Settings.Option.Theme.Dark' },
+                { value: 'system', labelKey: 'Settings.Option.Theme.System' },
+            ],
+        }),
+        'appearance.clockType': def('appearance', 'string', 'digital', 'CUSTOM_CLOCK_TYPE', {
+            options: [
+                { value: 'digital', labelKey: 'Settings.Option.ClockType.Digital' },
+                { value: 'analog', labelKey: 'Settings.Option.ClockType.Analog' },
+            ],
+        }),
+        'appearance.enableDayColors': def('appearance', 'boolean', false, 'TOGGLE'),
         // ═══════════════════════════════════════════════════════════════════════
         // Calendar view
         // ═══════════════════════════════════════════════════════════════════════
-        'calendarView.type': def('calendarView', 'string', 'time-based'),
-        'calendarView.view': def('calendarView', 'string', 'day'),
-        'calendarView.dayViewZoom': def('calendarView', 'number', 60),
-        'calendarView.weekViewZoom': def('calendarView', 'number', 60),
-        'calendarView.splitView': def('calendarView', 'boolean', false),
-        'calendarView.showCalendarNames': def('calendarView', 'boolean', true),
-        'calendarView.calendarColumns': def('calendarView', 'json', []),
-        'calendarView.autoReturnToTodayEnabled': def('calendarView', 'boolean', config.isEnrolled),
-        'calendarView.autoReturnToTodayTimeoutSeconds': def('calendarView', 'number', 300),
-        'calendarView.showWeatherOnEvents': def('calendarView', 'boolean', false),
-        'calendarView.showWeatherOnTimeline': def('calendarView', 'boolean', false),
-        'calendarView.weatherLocation': def('calendarView', 'json', null),
+        'calendarView.type': def('calendarView', 'string', 'time-based', 'CUSTOM_CALENDAR_TYPE', {
+            options: [
+                {
+                    value: 'chronological',
+                    labelKey: 'Settings.Option.CalendarType.Chronological',
+                },
+                {
+                    value: 'time-based',
+                    labelKey: 'Settings.Option.CalendarType.TimeBased',
+                },
+            ],
+        }),
+        'calendarView.view': def('calendarView', 'string', 'day', 'SELECT', {
+            options: [
+                { value: 'day', labelKey: 'Settings.Option.CalendarView.Day' },
+                {
+                    value: '3-days',
+                    labelKey: 'Settings.Option.CalendarView.3Days',
+                },
+                {
+                    value: '5-days',
+                    labelKey: 'Settings.Option.CalendarView.5Days',
+                },
+                {
+                    value: '7-days',
+                    labelKey: 'Settings.Option.CalendarView.7Days',
+                },
+                { value: 'week', labelKey: 'Settings.Option.CalendarView.Week' },
+                {
+                    value: 'month',
+                    labelKey: 'Settings.Option.CalendarView.Month',
+                },
+                {
+                    value: 'overview',
+                    labelKey: 'Settings.Option.CalendarView.Overview',
+                },
+            ],
+        }),
+        'calendarView.dayViewZoom': def('calendarView', 'number', 60, 'SELECT', { options: DAY_VIEW_ZOOM_OPTIONS }),
+        'calendarView.weekViewZoom': def('calendarView', 'number', 60, 'SELECT', { options: DAY_VIEW_ZOOM_OPTIONS }),
+        'calendarView.splitView': def('calendarView', 'boolean', false, 'TOGGLE'),
+        'calendarView.showCalendarNames': def('calendarView', 'boolean', true, 'TOGGLE'),
+        'calendarView.calendarColumns': def('calendarView', 'json', [], 'CUSTOM_SPLIT_VIEW_CONFIG'),
+        'calendarView.autoReturnToTodayEnabled': def('calendarView', 'boolean', config.isEnrolled, 'TOGGLE'),
+        'calendarView.autoReturnToTodayTimeoutSeconds': def('calendarView', 'number', 300, 'SLIDER', { sliderConfig: { min: 30, max: 600, step: 30 } }),
+        'calendarView.showWeatherOnEvents': def('calendarView', 'boolean', false, 'TOGGLE'),
+        'calendarView.showWeatherOnTimeline': def('calendarView', 'boolean', false, 'TOGGLE'),
+        'calendarView.weatherLocation': def('calendarView', 'json', null, 'CUSTOM_WEATHER_LOCATION'),
         // ═══════════════════════════════════════════════════════════════════════
         // Event form field visibility (time-based)
         // ═══════════════════════════════════════════════════════════════════════
-        'eventForm.recurrence': def('eventForm', 'boolean', true),
-        'eventForm.reminders': def('eventForm', 'boolean', true),
-        'eventForm.emailReminders': def('eventForm', 'boolean', false),
-        'eventForm.location': def('eventForm', 'boolean', true),
-        'eventForm.travelTime': def('eventForm', 'boolean', false),
-        'eventForm.description': def('eventForm', 'boolean', true),
-        'eventForm.checklist': def('eventForm', 'boolean', true),
-        'eventForm.images': def('eventForm', 'boolean', false),
-        'eventForm.audioClips': def('eventForm', 'boolean', false),
-        'eventForm.notificationReceivers': def('eventForm', 'boolean', true),
-        'eventForm.visibility': def('eventForm', 'boolean', false),
+        'eventForm.recurrence': def('eventForm', 'boolean', true, 'TOGGLE'),
+        'eventForm.reminders': def('eventForm', 'boolean', true, 'TOGGLE'),
+        'eventForm.emailReminders': def('eventForm', 'boolean', false, 'TOGGLE'),
+        'eventForm.location': def('eventForm', 'boolean', true, 'TOGGLE'),
+        'eventForm.travelTime': def('eventForm', 'boolean', false, 'TOGGLE'),
+        'eventForm.description': def('eventForm', 'boolean', true, 'TOGGLE'),
+        'eventForm.checklist': def('eventForm', 'boolean', true, 'TOGGLE'),
+        'eventForm.images': def('eventForm', 'boolean', false, 'TOGGLE'),
+        'eventForm.audioClips': def('eventForm', 'boolean', false, 'TOGGLE'),
+        'eventForm.notificationReceivers': def('eventForm', 'boolean', true, 'TOGGLE'),
+        'eventForm.visibility': def('eventForm', 'boolean', false, 'TOGGLE'),
         // ═══════════════════════════════════════════════════════════════════════
         // Sound & alerts
         // ═══════════════════════════════════════════════════════════════════════
-        'sound.timerVolume': def('sound', 'number', 0.5),
-        'sound.reminderVolume': def('sound', 'number', 0.5),
-        'sound.mediaVolume': def('sound', 'number', 0.5),
-        'sound.alarmSound': def('sound', 'string', 'alarm1'),
-        'sound.reminderAlarmSound': def('sound', 'string', 'alarm1'),
-        'sound.timerAlarmSound': def('sound', 'string', 'alarm1'),
-        'sound.timerAlarmTimeout': def('sound', 'number', 3),
-        'sound.reminderAlarmTimeout': def('sound', 'number', 3),
-        'sound.allowCustomReminderSounds': def('sound', 'boolean', false),
-        'sound.ttsEnabled': def('sound', 'boolean', config.isEnrolled),
-        'sound.ttsRate': def('sound', 'number', 1.0),
+        'sound.timerVolume': def('sound', 'number', 0.5, 'VOLUME_SLIDER'),
+        'sound.reminderVolume': def('sound', 'number', 0.5, 'VOLUME_SLIDER'),
+        'sound.mediaVolume': def('sound', 'number', 0.5, 'VOLUME_SLIDER'),
+        'sound.alarmSound': def('sound', 'string', 'alarm1', 'SELECT', { options: ALARM_SOUND_OPTIONS }),
+        'sound.reminderAlarmSound': def('sound', 'string', 'alarm1', 'SELECT', { options: ALARM_SOUND_OPTIONS }),
+        'sound.timerAlarmSound': def('sound', 'string', 'alarm1', 'SELECT', { options: ALARM_SOUND_OPTIONS }),
+        'sound.timerAlarmTimeout': def('sound', 'number', 3, 'SELECT', { options: ALARM_TIMEOUT_OPTIONS }),
+        'sound.reminderAlarmTimeout': def('sound', 'number', 3, 'SELECT', { options: ALARM_TIMEOUT_OPTIONS }),
+        'sound.allowCustomReminderSounds': def('sound', 'boolean', false, 'TOGGLE'),
+        'sound.ttsEnabled': def('sound', 'boolean', config.isEnrolled, 'TOGGLE'),
+        'sound.ttsRate': def('sound', 'number', 1.0, 'SLIDER', { sliderConfig: { min: 0.5, max: 2, step: 0.1 } }),
         // ═══════════════════════════════════════════════════════════════════════
         // Timer
         // ═══════════════════════════════════════════════════════════════════════
-        'timer.showTimeRemaining': def('timer', 'boolean', true),
-        'timer.showEndTime': def('timer', 'boolean', true),
-        'timer.showRestartButton': def('timer', 'boolean', true),
-        'timer.showPauseButton': def('timer', 'boolean', true),
+        'timer.showTimeRemaining': def('timer', 'boolean', true, 'TOGGLE'),
+        'timer.showEndTime': def('timer', 'boolean', true, 'TOGGLE'),
+        'timer.showRestartButton': def('timer', 'boolean', true, 'TOGGLE'),
+        'timer.showPauseButton': def('timer', 'boolean', true, 'TOGGLE'),
         // ═══════════════════════════════════════════════════════════════════════
         // Lock screen
         // ═══════════════════════════════════════════════════════════════════════
-        'lockScreen.pin': def('lockScreen', 'string', ''),
-        'lockScreen.inactivityLockEnabled': def('lockScreen', 'boolean', false),
-        'lockScreen.inactivityTimeoutMinutes': def('lockScreen', 'number', 5),
-        'lockScreen.clockDisplay': def('lockScreen', 'string', 'digital'),
-        'lockScreen.showDate': def('lockScreen', 'boolean', true),
-        'lockScreen.showHourNumbers': def('lockScreen', 'boolean', true),
-        'lockScreen.imageMode': def('lockScreen', 'string', 'none'),
-        'lockScreen.backgroundImage': def('lockScreen', 'json', null),
-        'lockScreen.photoFrameImages': def('lockScreen', 'json', []),
-        'lockScreen.photoFrameIntervalSeconds': def('lockScreen', 'number', 60),
+        'lockScreen.pin': def('lockScreen', 'string', '', 'PIN_INPUT'),
+        'lockScreen.inactivityLockEnabled': def('lockScreen', 'boolean', false, 'TOGGLE'),
+        'lockScreen.inactivityTimeoutMinutes': def('lockScreen', 'number', 5, 'SELECT', {
+            options: [
+                { value: 1, labelKey: 'Settings.Option.InactivityTimeout.1min' },
+                { value: 5, labelKey: 'Settings.Option.InactivityTimeout.5min' },
+                { value: 10, labelKey: 'Settings.Option.InactivityTimeout.10min' },
+                { value: 15, labelKey: 'Settings.Option.InactivityTimeout.15min' },
+                { value: 30, labelKey: 'Settings.Option.InactivityTimeout.30min' },
+                { value: 45, labelKey: 'Settings.Option.InactivityTimeout.45min' },
+            ],
+        }),
+        'lockScreen.clockDisplay': def('lockScreen', 'string', 'digital', 'SELECT', {
+            options: [
+                { value: 'none', labelKey: 'Settings.Option.ClockDisplay.None' },
+                {
+                    value: 'digital',
+                    labelKey: 'Settings.Option.ClockDisplay.Digital',
+                },
+                {
+                    value: 'analog',
+                    labelKey: 'Settings.Option.ClockDisplay.Analog',
+                },
+            ],
+        }),
+        'lockScreen.showDate': def('lockScreen', 'boolean', true, 'TOGGLE'),
+        'lockScreen.showHourNumbers': def('lockScreen', 'boolean', true, 'TOGGLE'),
+        'lockScreen.imageMode': def('lockScreen', 'string', 'none', 'SELECT', {
+            options: [
+                { value: 'none', labelKey: 'Settings.Option.ImageMode.None' },
+                {
+                    value: 'background',
+                    labelKey: 'Settings.Option.ImageMode.Background',
+                },
+                {
+                    value: 'photoFrame',
+                    labelKey: 'Settings.Option.ImageMode.PhotoFrame',
+                },
+            ],
+        }),
+        'lockScreen.backgroundImage': def('lockScreen', 'json', null, 'CUSTOM_IMAGE'),
+        'lockScreen.photoFrameImages': def('lockScreen', 'json', [], 'CUSTOM_IMAGE_ARRAY'),
+        'lockScreen.photoFrameIntervalSeconds': def('lockScreen', 'number', 60, 'SELECT', {
+            options: [
+                { value: 30, labelKey: 'Settings.Option.PhotoFrameInterval.30sec' },
+                { value: 60, labelKey: 'Settings.Option.PhotoFrameInterval.1min' },
+                { value: 120, labelKey: 'Settings.Option.PhotoFrameInterval.2min' },
+                { value: 300, labelKey: 'Settings.Option.PhotoFrameInterval.5min' },
+            ],
+        }),
         // ═══════════════════════════════════════════════════════════════════════
         // Touch / gestures
         // ═══════════════════════════════════════════════════════════════════════
-        'touch.enableTapToCreate': def('touch', 'boolean', false),
-        'touch.enableDragDrop': def('touch', 'boolean', false),
+        'touch.enableTapToCreate': def('touch', 'boolean', false, 'TOGGLE'),
+        'touch.enableDragDrop': def('touch', 'boolean', false, 'TOGGLE'),
         // ═══════════════════════════════════════════════════════════════════════
         // Device (not synced unless noted)
         // ═══════════════════════════════════════════════════════════════════════
-        'device.id': def('device', 'string', '', false),
-        'device.timePickerMode': def('device', 'string', 'dials'),
-        'device.devMenuEnabled': def('device', 'boolean', false, false),
-        'device.authWarningDismissTtlDays': def('device', 'number', 3, false),
+        'device.id': def('device', 'string', '', 'HIDDEN', { sync: false }),
+        'device.timePickerMode': def('device', 'string', 'dials', 'SELECT', {
+            options: [
+                { value: 'dials', labelKey: 'Settings.Option.TimePickerMode.Dials' },
+                {
+                    value: 'keypad',
+                    labelKey: 'Settings.Option.TimePickerMode.Keypad',
+                },
+            ],
+        }),
+        'device.devMenuEnabled': def('device', 'boolean', false, 'HIDDEN', { sync: false }),
+        'device.authWarningDismissTtlDays': def('device', 'number', 3, 'HIDDEN', { sync: false }),
         // ═══════════════════════════════════════════════════════════════════════
         // Language
         // ═══════════════════════════════════════════════════════════════════════
-        'language.locale': def('language', 'string', config.defaultLocale),
+        'language.locale': def('language', 'string', config.defaultLocale, 'CUSTOM_LANGUAGE_PICKER', {
+            options: [
+                { value: 'nb', labelKey: 'Settings.Option.Language.Norwegian' },
+                { value: 'en', labelKey: 'Settings.Option.Language.English' },
+            ],
+        }),
         // ═══════════════════════════════════════════════════════════════════════
         // Notifications
         // ═══════════════════════════════════════════════════════════════════════
-        'notification.enabled': def('notification', 'boolean', false),
-        'notification.notifyAllCalendars': def('notification', 'boolean', true),
-        'notification.enabledCalendarIds': def('notification', 'json', []),
-        'notification.hasBeenPrompted': def('notification', 'boolean', false, false),
+        'notification.enabled': def('notification', 'boolean', false, 'TOGGLE'),
+        'notification.notifyAllCalendars': def('notification', 'boolean', true, 'TOGGLE'),
+        'notification.enabledCalendarIds': def('notification', 'json', [], 'CUSTOM_CALENDAR_IDS'),
+        'notification.hasBeenPrompted': def('notification', 'boolean', false, 'HIDDEN', { sync: false }),
         // ═══════════════════════════════════════════════════════════════════════
         // Chronological features (header, footer, menu, quick settings, timer)
         // ═══════════════════════════════════════════════════════════════════════
         // Header
-        'chronological.header.showNavigationArrows': def('chronological', 'boolean', true),
-        'chronological.header.showClock': def('chronological', 'boolean', true),
-        'chronological.header.showCurrentYearInDate': def('chronological', 'boolean', false),
-        'chronological.header.showTimeOfDay': def('chronological', 'boolean', false),
+        'chronological.header.showNavigationArrows': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.header.showClock': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.header.showCurrentYearInDate': def('chronological', 'boolean', false, 'TOGGLE'),
+        'chronological.header.showTimeOfDay': def('chronological', 'boolean', false, 'TOGGLE'),
         // Footer
-        'chronological.footer.showMenuButton': def('chronological', 'boolean', true),
-        'chronological.footer.showViewSwitcherDay': def('chronological', 'boolean', true),
-        'chronological.footer.showViewSwitcherWeek': def('chronological', 'boolean', true),
-        'chronological.footer.showViewSwitcherMonth': def('chronological', 'boolean', true),
-        'chronological.footer.showTimerButton': def('chronological', 'boolean', true),
-        'chronological.footer.showNewEventButton': def('chronological', 'boolean', true),
-        'chronological.footer.showSettingsButton': def('chronological', 'boolean', true),
+        'chronological.footer.showMenuButton': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.footer.showViewSwitcherDay': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.footer.showViewSwitcherWeek': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.footer.showViewSwitcherMonth': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.footer.showTimerButton': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.footer.showNewEventButton': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.footer.showSettingsButton': def('chronological', 'boolean', true, 'TOGGLE'),
         // Timer features
-        'chronological.timer.showNewCountdown': def('chronological', 'boolean', true),
-        'chronological.timer.showFromTemplate': def('chronological', 'boolean', true),
-        'chronological.timer.showEditTemplate': def('chronological', 'boolean', true),
-        'chronological.timer.showDeleteTemplate': def('chronological', 'boolean', true),
-        'chronological.timer.showAddTemplate': def('chronological', 'boolean', true),
+        'chronological.timer.showNewCountdown': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.timer.showFromTemplate': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.timer.showEditTemplate': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.timer.showDeleteTemplate': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.timer.showAddTemplate': def('chronological', 'boolean', true, 'TOGGLE'),
         // Menu
-        'chronological.menu.showSettingsButton': def('chronological', 'boolean', true),
+        'chronological.menu.showSettingsButton': def('chronological', 'boolean', true, 'TOGGLE'),
         // Quick settings
-        'chronological.quickSettings.showTimerVolume': def('chronological', 'boolean', true),
-        'chronological.quickSettings.showReminderVolume': def('chronological', 'boolean', true),
-        'chronological.quickSettings.showMediaVolume': def('chronological', 'boolean', true),
-        'chronological.quickSettings.showBrightness': def('chronological', 'boolean', true),
-        'chronological.quickSettings.showLockScreen': def('chronological', 'boolean', true),
+        'chronological.quickSettings.showTimerVolume': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.quickSettings.showReminderVolume': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.quickSettings.showMediaVolume': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.quickSettings.showBrightness': def('chronological', 'boolean', true, 'TOGGLE'),
+        'chronological.quickSettings.showLockScreen': def('chronological', 'boolean', true, 'TOGGLE'),
         // Time-of-day periods
-        'chronological.timeOfDay.morningStart': def('chronological', 'number', 6),
-        'chronological.timeOfDay.forenoonStart': def('chronological', 'number', 9),
-        'chronological.timeOfDay.afternoonStart': def('chronological', 'number', 12),
-        'chronological.timeOfDay.eveningStart': def('chronological', 'number', 18),
-        'chronological.timeOfDay.nightStart': def('chronological', 'number', 0),
+        'chronological.timeOfDay.morningStart': def('chronological', 'number', 6, 'SLIDER', { sliderConfig: TIME_OF_DAY_SLIDER }),
+        'chronological.timeOfDay.forenoonStart': def('chronological', 'number', 9, 'SLIDER', { sliderConfig: TIME_OF_DAY_SLIDER }),
+        'chronological.timeOfDay.afternoonStart': def('chronological', 'number', 12, 'SLIDER', { sliderConfig: TIME_OF_DAY_SLIDER }),
+        'chronological.timeOfDay.eveningStart': def('chronological', 'number', 18, 'SLIDER', { sliderConfig: TIME_OF_DAY_SLIDER }),
+        'chronological.timeOfDay.nightStart': def('chronological', 'number', 0, 'SLIDER', { sliderConfig: TIME_OF_DAY_SLIDER }),
         // ═══════════════════════════════════════════════════════════════════════
         // Chronological event form
         // ═══════════════════════════════════════════════════════════════════════
         // Toggleable fields
-        'chronologicalEventForm.field.description': def('chronologicalEventForm', 'boolean', true),
-        'chronologicalEventForm.field.recurrence': def('chronologicalEventForm', 'boolean', true),
-        'chronologicalEventForm.field.acknowledge': def('chronologicalEventForm', 'boolean', true),
-        'chronologicalEventForm.field.checklist': def('chronologicalEventForm', 'boolean', true),
-        'chronologicalEventForm.field.extraImages': def('chronologicalEventForm', 'boolean', true),
-        'chronologicalEventForm.field.reminders': def('chronologicalEventForm', 'boolean', true),
-        'chronologicalEventForm.field.audioClips': def('chronologicalEventForm', 'boolean', true),
+        'chronologicalEventForm.field.description': def('chronologicalEventForm', 'boolean', true, 'TOGGLE'),
+        'chronologicalEventForm.field.recurrence': def('chronologicalEventForm', 'boolean', true, 'TOGGLE'),
+        'chronologicalEventForm.field.acknowledge': def('chronologicalEventForm', 'boolean', true, 'TOGGLE'),
+        'chronologicalEventForm.field.checklist': def('chronologicalEventForm', 'boolean', true, 'TOGGLE'),
+        'chronologicalEventForm.field.extraImages': def('chronologicalEventForm', 'boolean', true, 'TOGGLE'),
+        'chronologicalEventForm.field.reminders': def('chronologicalEventForm', 'boolean', true, 'TOGGLE'),
+        'chronologicalEventForm.field.audioClips': def('chronologicalEventForm', 'boolean', true, 'TOGGLE'),
         // Fixed fields
-        'chronologicalEventForm.fixedField.allDay': def('chronologicalEventForm', 'boolean', true),
-        'chronologicalEventForm.fixedField.endTime': def('chronologicalEventForm', 'boolean', true),
-        'chronologicalEventForm.fixedField.visibility': def('chronologicalEventForm', 'boolean', true),
+        'chronologicalEventForm.fixedField.allDay': def('chronologicalEventForm', 'boolean', true, 'TOGGLE'),
+        'chronologicalEventForm.fixedField.endTime': def('chronologicalEventForm', 'boolean', true, 'TOGGLE'),
+        'chronologicalEventForm.fixedField.visibility': def('chronologicalEventForm', 'boolean', true, 'TOGGLE'),
         // Suggest end time
-        'chronologicalEventForm.suggestEndTime.enabled': def('chronologicalEventForm', 'boolean', false),
-        'chronologicalEventForm.suggestEndTime.value': def('chronologicalEventForm', 'number', 30),
-        'chronologicalEventForm.suggestEndTime.unit': def('chronologicalEventForm', 'string', 'minutes'),
+        'chronologicalEventForm.suggestEndTime.enabled': def('chronologicalEventForm', 'boolean', false, 'TOGGLE'),
+        'chronologicalEventForm.suggestEndTime.value': def('chronologicalEventForm', 'number', 30, 'SLIDER', { sliderConfig: { min: 5, max: 480, step: 5 } }),
+        'chronologicalEventForm.suggestEndTime.unit': def('chronologicalEventForm', 'string', 'minutes', 'SELECT', {
+            options: [
+                {
+                    value: 'minutes',
+                    labelKey: 'Settings.Option.SuggestEndTimeUnit.Minutes',
+                },
+                {
+                    value: 'hours',
+                    labelKey: 'Settings.Option.SuggestEndTimeUnit.Hours',
+                },
+            ],
+        }),
         // Default visibility
-        'chronologicalEventForm.defaultVisibility': def('chronologicalEventForm', 'string', 'Private'),
+        'chronologicalEventForm.defaultVisibility': def('chronologicalEventForm', 'string', 'Private', 'SELECT', {
+            options: [
+                { value: 'Public', labelKey: 'Settings.Option.Visibility.Public' },
+                { value: 'Private', labelKey: 'Settings.Option.Visibility.Private' },
+                { value: 'Custom', labelKey: 'Settings.Option.Visibility.Custom' },
+            ],
+        }),
         // Reminder presets
-        'chronologicalEventForm.reminderPresets.timed': def('chronologicalEventForm', 'json', [5, 15, 30, 60, 120, 1440]),
+        'chronologicalEventForm.reminderPresets.timed': def('chronologicalEventForm', 'json', [5, 15, 30, 60, 120, 1440], 'CUSTOM_REMINDER_PRESETS'),
         'chronologicalEventForm.reminderPresets.allDay': def('chronologicalEventForm', 'json', [
             { daysBefore: 0, time: '09:00' },
             { daysBefore: 1, time: '18:00' },
             { daysBefore: 2, time: '09:00' },
-        ]),
+        ], 'CUSTOM_REMINDER_PRESETS'),
     };
 }
 // ---------------------------------------------------------------------------
@@ -606,11 +988,20 @@ export function parseSettingsSnapshot(json, calendarType, registry = defaultRegi
         if (!groups.has(category)) {
             groups.set(category, []);
         }
+        const labelDef = SETTINGS_LABELS[key];
+        const entryDef = key in registry.entries
+            ? registry.entries[key]
+            : undefined;
         groups.get(category).push({
             key,
             name,
             label: registry.getSettingLabel(key),
+            labelKey: labelDef?.labelKey,
+            descriptionKey: labelDef?.descriptionKey,
             value,
+            uiType: entryDef?.uiType ?? 'TEXT_INPUT',
+            ...(entryDef?.options && { options: entryDef.options }),
+            ...(entryDef?.sliderConfig && { sliderConfig: entryDef.sliderConfig }),
         });
     }
     // Determine which categories to show