@focus8/settings-registry 0.6.0 → 0.7.0

package/src/index.ts

@@ -77,6 +77,47 @@ export type AllDayPreset = {
   time: string;
 };
 
+// ---------------------------------------------------------------------------
+// UI type discriminator — determines which component renders each setting
+// ---------------------------------------------------------------------------
+
+export type SettingUiType =
+  | 'TOGGLE'
+  | 'SELECT'
+  | 'VOLUME_SLIDER'
+  | 'SLIDER'
+  | 'NUMBER_INPUT'
+  | 'TEXT_INPUT'
+  | 'PIN_INPUT'
+  | 'CUSTOM_THEME_PICKER'
+  | 'CUSTOM_LANGUAGE_PICKER'
+  | 'CUSTOM_CALENDAR_TYPE'
+  | 'CUSTOM_CLOCK_TYPE'
+  | 'CUSTOM_WEATHER_LOCATION'
+  | 'CUSTOM_IMAGE'
+  | 'CUSTOM_IMAGE_ARRAY'
+  | 'CUSTOM_CALENDAR_IDS'
+  | 'CUSTOM_REMINDER_PRESETS'
+  | 'CUSTOM_EVENT_FORM'
+  | 'CUSTOM_CHRONOLOGICAL_EVENT_FORM'
+  | 'CUSTOM_DISPLAY_DENSITY'
+  | 'CUSTOM_BRIGHTNESS'
+  | 'CUSTOM_SPLIT_VIEW_CONFIG'
+  | 'HIDDEN';
+
+export type SettingOption<T = unknown> = {
+  /** The option value */
+  value: T;
+  /** i18n message key for the option label */
+  labelKey: string;
+};
+
+export type SliderConfig = {
+  min: number;
+  max: number;
+  step: number;
+};
+
 // ---------------------------------------------------------------------------
 // Setting categories — used for UI grouping and profile organization
 // ---------------------------------------------------------------------------
@@ -219,6 +260,8 @@ export type SettingsGroupDef = {
   keys: string[];
   /** Only show for this calendar type (undefined = always) */
   calendarType?: CalendarType;
+  /** Only show for this app mode (undefined = always) */
+  appMode?: 'ENROLLED';
 };
 
 /**
@@ -298,12 +341,14 @@ export const SETTINGS_GROUPS: readonly SettingsGroupDef[] = [
       'sound.timerAlarmTimeout',
       'timer.',
     ],
+    appMode: 'ENROLLED',
   },
   {
     id: 'lockScreen',
     labelKey: 'Settings.LockScreen',
     icon: 'Lock',
     keys: ['lockScreen.'],
+    appMode: 'ENROLLED',
   },
   {
     id: 'touch',
@@ -613,10 +658,11 @@ function matchesGroup(key: string, group: SettingsGroupDef): boolean {
 export function groupSettingsForDevice(
   allSettings: ParsedSettingEntry[],
   calendarType: CalendarType,
+  appMode?: 'ENROLLED',
 ): { id: SettingsGroupId; labelKey: string; icon: string; settings: ParsedSettingEntry[] }[] {
-  // Filter excluded
+  // Filter excluded and hidden settings
   const settings = allSettings.filter(
-    (s) => !EXCLUDED_DEVICE_SETTINGS.has(s.key),
+    (s) => !EXCLUDED_DEVICE_SETTINGS.has(s.key) && s.uiType !== 'HIDDEN',
   );
 
   // Calendar type filtering for event form keys
@@ -645,6 +691,11 @@ export function groupSettingsForDevice(
       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),
     );
@@ -683,6 +734,12 @@ export type SettingDef<T = unknown> = {
   default: T;
   /** Whether this setting should be synced to the server. Default true. */
   sync: boolean;
+  /** UI component type for rendering this setting */
+  uiType: SettingUiType;
+  /** Available options for SELECT-type settings */
+  options?: readonly SettingOption<T>[];
+  /** Slider configuration for SLIDER-type settings */
+  sliderConfig?: SliderConfig;
 };
 
 // ---------------------------------------------------------------------------
@@ -705,6 +762,39 @@ export const DEFAULT_REGISTRY_CONFIG: RegistryConfig = {
   defaultLocale: 'nb',
 };
 
+// ---------------------------------------------------------------------------
+// Shared option arrays (reused across multiple settings)
+// ---------------------------------------------------------------------------
+
+const ALARM_SOUND_OPTIONS: readonly SettingOption<AlarmSound>[] = [
+  { 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: readonly SettingOption<AlarmTimeout>[] = [
+  { 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: readonly SettingOption<CalendarDayViewCellZoom>[] = [
+  { 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: SliderConfig = { min: 0, max: 23, step: 1 };
+
 // ---------------------------------------------------------------------------
 // Helper
 // ---------------------------------------------------------------------------
@@ -713,9 +803,27 @@ function def<T>(
   category: SettingsCategory,
   type: SettingsDataType,
   defaultValue: T,
-  sync = true,
+  uiType: SettingUiType,
+  extra?: {
+    sync?: boolean;
+    options?: readonly SettingOption<T>[];
+    sliderConfig?: SliderConfig;
+  },
 ): SettingDef<T> {
-  return { category, type, default: defaultValue, sync };
+  const result: SettingDef<T> = {
+    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;
 }
 
 // ---------------------------------------------------------------------------
@@ -731,9 +839,33 @@ function buildEntries(config: RegistryConfig) {
       '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<ClockType>(
+      'appearance',
+      'string',
+      'digital',
+      'CUSTOM_CLOCK_TYPE',
+      {
+        options: [
+          { value: 'digital', labelKey: 'Settings.Option.ClockType.Digital' },
+          { value: 'analog', labelKey: 'Settings.Option.ClockType.Analog' },
+        ],
+      },
+    ),
+    'appearance.enableDayColors': def<boolean>(
+      'appearance',
+      'boolean',
+      false,
+      'TOGGLE',
     ),
-    'appearance.clockType': def<ClockType>('appearance', 'string', 'digital'),
-    'appearance.enableDayColors': def<boolean>('appearance', 'boolean', false),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Calendar view
@@ -742,152 +874,346 @@ function buildEntries(config: RegistryConfig) {
       '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<CalendarViewMode>(
+      '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.view': def<CalendarViewMode>('calendarView', 'string', 'day'),
     'calendarView.dayViewZoom': def<CalendarDayViewCellZoom>(
       'calendarView',
       'number',
       60,
+      'SELECT',
+      { options: DAY_VIEW_ZOOM_OPTIONS },
     ),
     'calendarView.weekViewZoom': def<CalendarDayViewCellZoom>(
       'calendarView',
       'number',
       60,
+      'SELECT',
+      { options: DAY_VIEW_ZOOM_OPTIONS },
+    ),
+    'calendarView.splitView': def<boolean>(
+      'calendarView',
+      'boolean',
+      false,
+      'TOGGLE',
     ),
-    'calendarView.splitView': def<boolean>('calendarView', 'boolean', false),
     'calendarView.showCalendarNames': def<boolean>(
       'calendarView',
       'boolean',
       true,
+      'TOGGLE',
+    ),
+    'calendarView.calendarColumns': def<unknown[]>(
+      'calendarView',
+      'json',
+      [],
+      'CUSTOM_SPLIT_VIEW_CONFIG',
     ),
-    'calendarView.calendarColumns': def<unknown[]>('calendarView', 'json', []),
     'calendarView.autoReturnToTodayEnabled': def<boolean>(
       'calendarView',
       'boolean',
       config.isEnrolled,
+      'TOGGLE',
     ),
     'calendarView.autoReturnToTodayTimeoutSeconds': def<number>(
       'calendarView',
       'number',
       300,
+      'SLIDER',
+      { sliderConfig: { min: 30, max: 600, step: 30 } },
     ),
     'calendarView.showWeatherOnEvents': def<boolean>(
       'calendarView',
       'boolean',
       false,
+      'TOGGLE',
     ),
     'calendarView.showWeatherOnTimeline': def<boolean>(
       'calendarView',
       'boolean',
       false,
+      'TOGGLE',
     ),
     'calendarView.weatherLocation': def<WeatherLocation | null>(
       'calendarView',
       'json',
       null,
+      'CUSTOM_WEATHER_LOCATION',
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Event form field visibility (time-based)
     // ═══════════════════════════════════════════════════════════════════════
-    'eventForm.recurrence': def<boolean>('eventForm', 'boolean', true),
-    'eventForm.reminders': def<boolean>('eventForm', 'boolean', true),
-    'eventForm.emailReminders': def<boolean>('eventForm', 'boolean', false),
-    'eventForm.location': def<boolean>('eventForm', 'boolean', true),
-    'eventForm.travelTime': def<boolean>('eventForm', 'boolean', false),
-    'eventForm.description': def<boolean>('eventForm', 'boolean', true),
-    'eventForm.checklist': def<boolean>('eventForm', 'boolean', true),
-    'eventForm.images': def<boolean>('eventForm', 'boolean', false),
-    'eventForm.audioClips': def<boolean>('eventForm', 'boolean', false),
+    'eventForm.recurrence': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.reminders': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.emailReminders': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
+    'eventForm.location': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.travelTime': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
+    'eventForm.description': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.checklist': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.images': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
+    'eventForm.audioClips': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
     'eventForm.notificationReceivers': def<boolean>(
       'eventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'eventForm.visibility': def<boolean>('eventForm', 'boolean', false),
+    'eventForm.visibility': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Sound & alerts
     // ═══════════════════════════════════════════════════════════════════════
-    'sound.timerVolume': def<number>('sound', 'number', 0.5),
-    'sound.reminderVolume': def<number>('sound', 'number', 0.5),
-    'sound.mediaVolume': def<number>('sound', 'number', 0.5),
-    'sound.alarmSound': def<AlarmSound>('sound', 'string', 'alarm1'),
-    'sound.reminderAlarmSound': def<AlarmSound>('sound', 'string', 'alarm1'),
-    'sound.timerAlarmSound': def<AlarmSound>('sound', 'string', 'alarm1'),
-    'sound.timerAlarmTimeout': def<AlarmTimeout>('sound', 'number', 3),
-    'sound.reminderAlarmTimeout': def<AlarmTimeout>('sound', 'number', 3),
-    'sound.allowCustomReminderSounds': def<boolean>('sound', 'boolean', false),
-    'sound.ttsEnabled': def<boolean>('sound', 'boolean', config.isEnrolled),
-    'sound.ttsRate': def<number>('sound', 'number', 1.0),
+    'sound.timerVolume': def<number>('sound', 'number', 0.5, 'VOLUME_SLIDER'),
+    'sound.reminderVolume': def<number>('sound', 'number', 0.5, 'VOLUME_SLIDER'),
+    'sound.mediaVolume': def<number>('sound', 'number', 0.5, 'VOLUME_SLIDER'),
+    'sound.alarmSound': def<AlarmSound>(
+      'sound',
+      'string',
+      'alarm1',
+      'SELECT',
+      { options: ALARM_SOUND_OPTIONS },
+    ),
+    'sound.reminderAlarmSound': def<AlarmSound>(
+      'sound',
+      'string',
+      'alarm1',
+      'SELECT',
+      { options: ALARM_SOUND_OPTIONS },
+    ),
+    'sound.timerAlarmSound': def<AlarmSound>(
+      'sound',
+      'string',
+      'alarm1',
+      'SELECT',
+      { options: ALARM_SOUND_OPTIONS },
+    ),
+    'sound.timerAlarmTimeout': def<AlarmTimeout>(
+      'sound',
+      'number',
+      3,
+      'SELECT',
+      { options: ALARM_TIMEOUT_OPTIONS },
+    ),
+    'sound.reminderAlarmTimeout': def<AlarmTimeout>(
+      'sound',
+      'number',
+      3,
+      'SELECT',
+      { options: ALARM_TIMEOUT_OPTIONS },
+    ),
+    'sound.allowCustomReminderSounds': def<boolean>(
+      'sound',
+      'boolean',
+      false,
+      'TOGGLE',
+    ),
+    'sound.ttsEnabled': def<boolean>(
+      'sound',
+      'boolean',
+      config.isEnrolled,
+      'TOGGLE',
+    ),
+    'sound.ttsRate': def<number>(
+      'sound',
+      'number',
+      1.0,
+      'SLIDER',
+      { sliderConfig: { min: 0.5, max: 2, step: 0.1 } },
+    ),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Timer
     // ═══════════════════════════════════════════════════════════════════════
-    'timer.showTimeRemaining': def<boolean>('timer', 'boolean', true),
-    'timer.showEndTime': def<boolean>('timer', 'boolean', true),
-    'timer.showRestartButton': def<boolean>('timer', 'boolean', true),
-    'timer.showPauseButton': def<boolean>('timer', 'boolean', true),
+    'timer.showTimeRemaining': def<boolean>('timer', 'boolean', true, 'TOGGLE'),
+    'timer.showEndTime': def<boolean>('timer', 'boolean', true, 'TOGGLE'),
+    'timer.showRestartButton': def<boolean>('timer', 'boolean', true, 'TOGGLE'),
+    'timer.showPauseButton': def<boolean>('timer', 'boolean', true, 'TOGGLE'),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Lock screen
     // ═══════════════════════════════════════════════════════════════════════
-    'lockScreen.pin': def<string>('lockScreen', 'string', ''),
+    'lockScreen.pin': def<string>('lockScreen', 'string', '', 'PIN_INPUT'),
     'lockScreen.inactivityLockEnabled': def<boolean>(
       'lockScreen',
       'boolean',
       false,
+      'TOGGLE',
     ),
     'lockScreen.inactivityTimeoutMinutes': def<InactivityTimeoutMinutes>(
       '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<LockScreenClockDisplay>(
       '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<boolean>(
+      'lockScreen',
+      'boolean',
+      true,
+      'TOGGLE',
+    ),
+    'lockScreen.showHourNumbers': def<boolean>(
+      'lockScreen',
+      'boolean',
+      true,
+      'TOGGLE',
     ),
-    'lockScreen.showDate': def<boolean>('lockScreen', 'boolean', true),
-    'lockScreen.showHourNumbers': def<boolean>('lockScreen', 'boolean', true),
     'lockScreen.imageMode': def<LockScreenImageMode>(
       '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<string | null>(
       'lockScreen',
       'json',
       null,
+      'CUSTOM_IMAGE',
     ),
     'lockScreen.photoFrameImages': def<LockScreenImage[]>(
       'lockScreen',
       'json',
       [],
+      'CUSTOM_IMAGE_ARRAY',
     ),
     'lockScreen.photoFrameIntervalSeconds': def<PhotoFrameIntervalSeconds>(
       '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<boolean>('touch', 'boolean', false),
-    'touch.enableDragDrop': def<boolean>('touch', 'boolean', false),
+    'touch.enableTapToCreate': def<boolean>('touch', 'boolean', false, 'TOGGLE'),
+    'touch.enableDragDrop': def<boolean>('touch', 'boolean', false, 'TOGGLE'),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Device (not synced unless noted)
     // ═══════════════════════════════════════════════════════════════════════
-    'device.id': def<string>('device', 'string', '', false),
-    'device.timePickerMode': def<TimePickerMode>('device', 'string', 'dials'),
-    'device.devMenuEnabled': def<boolean>('device', 'boolean', false, false),
+    'device.id': def<string>('device', 'string', '', 'HIDDEN', { sync: false }),
+    'device.timePickerMode': def<TimePickerMode>(
+      'device',
+      'string',
+      'dials',
+      'SELECT',
+      {
+        options: [
+          { value: 'dials', labelKey: 'Settings.Option.TimePickerMode.Dials' },
+          {
+            value: 'keypad',
+            labelKey: 'Settings.Option.TimePickerMode.Keypad',
+          },
+        ],
+      },
+    ),
+    'device.devMenuEnabled': def<boolean>(
+      'device',
+      'boolean',
+      false,
+      'HIDDEN',
+      { sync: false },
+    ),
     'device.authWarningDismissTtlDays': def<number>(
       'device',
       'number',
       3,
-      false,
+      'HIDDEN',
+      { sync: false },
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
@@ -897,27 +1223,42 @@ function buildEntries(config: RegistryConfig) {
       '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<boolean>('notification', 'boolean', false),
+    'notification.enabled': def<boolean>(
+      'notification',
+      'boolean',
+      false,
+      'TOGGLE',
+    ),
     'notification.notifyAllCalendars': def<boolean>(
       'notification',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'notification.enabledCalendarIds': def<string[]>(
       'notification',
       'json',
       [],
+      'CUSTOM_CALENDAR_IDS',
     ),
     'notification.hasBeenPrompted': def<boolean>(
       'notification',
       'boolean',
       false,
-      false,
+      'HIDDEN',
+      { sync: false },
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
@@ -928,141 +1269,173 @@ function buildEntries(config: RegistryConfig) {
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.header.showClock': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.header.showCurrentYearInDate': def<boolean>(
       'chronological',
       'boolean',
       false,
+      'TOGGLE',
     ),
     'chronological.header.showTimeOfDay': def<boolean>(
       'chronological',
       'boolean',
       false,
+      'TOGGLE',
     ),
     // Footer
     'chronological.footer.showMenuButton': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showViewSwitcherDay': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showViewSwitcherWeek': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showViewSwitcherMonth': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showTimerButton': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showNewEventButton': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.footer.showSettingsButton': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Timer features
     'chronological.timer.showNewCountdown': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.timer.showFromTemplate': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.timer.showEditTemplate': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.timer.showDeleteTemplate': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.timer.showAddTemplate': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Menu
     'chronological.menu.showSettingsButton': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Quick settings
     'chronological.quickSettings.showTimerVolume': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.quickSettings.showReminderVolume': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.quickSettings.showMediaVolume': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.quickSettings.showBrightness': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronological.quickSettings.showLockScreen': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Time-of-day periods
     'chronological.timeOfDay.morningStart': def<number>(
       'chronological',
       'number',
       6,
+      'SLIDER',
+      { sliderConfig: TIME_OF_DAY_SLIDER },
     ),
     'chronological.timeOfDay.forenoonStart': def<number>(
       'chronological',
       'number',
       9,
+      'SLIDER',
+      { sliderConfig: TIME_OF_DAY_SLIDER },
     ),
     'chronological.timeOfDay.afternoonStart': def<number>(
       'chronological',
       'number',
       12,
+      'SLIDER',
+      { sliderConfig: TIME_OF_DAY_SLIDER },
     ),
     'chronological.timeOfDay.eveningStart': def<number>(
       'chronological',
       'number',
       18,
+      'SLIDER',
+      { sliderConfig: TIME_OF_DAY_SLIDER },
     ),
     'chronological.timeOfDay.nightStart': def<number>(
       'chronological',
       'number',
       0,
+      'SLIDER',
+      { sliderConfig: TIME_OF_DAY_SLIDER },
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
@@ -1073,80 +1446,115 @@ function buildEntries(config: RegistryConfig) {
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.recurrence': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.acknowledge': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.checklist': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.extraImages': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.reminders': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.field.audioClips': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Fixed fields
     'chronologicalEventForm.fixedField.allDay': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.fixedField.endTime': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     'chronologicalEventForm.fixedField.visibility': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
     // Suggest end time
     'chronologicalEventForm.suggestEndTime.enabled': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       false,
+      'TOGGLE',
     ),
     'chronologicalEventForm.suggestEndTime.value': def<number>(
       'chronologicalEventForm',
       'number',
       30,
+      'SLIDER',
+      { sliderConfig: { min: 5, max: 480, step: 5 } },
     ),
     'chronologicalEventForm.suggestEndTime.unit': def<SuggestEndTimeUnit>(
       'chronologicalEventForm',
       'string',
       'minutes',
+      'SELECT',
+      {
+        options: [
+          {
+            value: 'minutes',
+            labelKey: 'Settings.Option.SuggestEndTimeUnit.Minutes',
+          },
+          {
+            value: 'hours',
+            labelKey: 'Settings.Option.SuggestEndTimeUnit.Hours',
+          },
+        ],
+      },
     ),
     // Default visibility
     'chronologicalEventForm.defaultVisibility': def<EventVisibility>(
       '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<number[]>(
       'chronologicalEventForm',
       'json',
       [5, 15, 30, 60, 120, 1440],
+      'CUSTOM_REMINDER_PRESETS',
     ),
     'chronologicalEventForm.reminderPresets.allDay': def<AllDayPreset[]>(
       'chronologicalEventForm',
@@ -1156,6 +1564,7 @@ function buildEntries(config: RegistryConfig) {
         { daysBefore: 1, time: '18:00' },
         { daysBefore: 2, time: '09:00' },
       ],
+      'CUSTOM_REMINDER_PRESETS',
     ),
   } as const satisfies Record<string, SettingDef>;
 }
@@ -1316,6 +1725,12 @@ export type ParsedSettingEntry = {
   descriptionKey?: string;
   /** The setting value */
   value: unknown;
+  /** UI component type for rendering this setting */
+  uiType: SettingUiType;
+  /** Available options for SELECT-type settings */
+  options?: readonly SettingOption[];
+  /** Slider configuration for SLIDER-type settings */
+  sliderConfig?: SliderConfig;
 };
 
 export type ParsedSettingsGroup = {
@@ -1374,6 +1789,9 @@ export function parseSettingsSnapshot(
     }
 
     const labelDef = SETTINGS_LABELS[key];
+    const entryDef = key in registry.entries
+      ? registry.entries[key as SettingKey]
+      : undefined;
     groups.get(category)!.push({
       key,
       name,
@@ -1381,6 +1799,9 @@ export function parseSettingsSnapshot(
       labelKey: labelDef?.labelKey,
       descriptionKey: labelDef?.descriptionKey,
       value,
+      uiType: entryDef?.uiType ?? 'TEXT_INPUT',
+      ...(entryDef?.options && { options: entryDef.options as readonly SettingOption[] }),
+      ...(entryDef?.sliderConfig && { sliderConfig: entryDef.sliderConfig }),
     });
   }