@focus8/settings-registry 0.6.0 → 0.8.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';
 };
 
 /**
@@ -242,7 +285,7 @@ export const SETTINGS_GROUPS: readonly SettingsGroupDef[] = [
     id: 'calendarType',
     labelKey: 'Settings.CalendarType',
     icon: 'ArrowLeftRight',
-    keys: ['calendarView.type', 'calendarView.view'],
+    keys: ['calendarView.type'],
   },
   {
     id: 'calendarView',
@@ -251,9 +294,9 @@ export const SETTINGS_GROUPS: readonly SettingsGroupDef[] = [
     keys: [
       'calendarView.showCalendarNames',
       'calendarView.splitView',
-      'calendarView.calendarColumns',
       'calendarView.dayViewZoom',
       'calendarView.weekViewZoom',
+      'calendarView.calendarColumns',
     ],
   },
   {
@@ -267,9 +310,9 @@ export const SETTINGS_GROUPS: readonly SettingsGroupDef[] = [
     labelKey: 'Settings.DateWeather',
     icon: 'CloudSun',
     keys: [
-      'calendarView.showWeatherOnEvents',
       'calendarView.showWeatherOnTimeline',
       'calendarView.weatherLocation',
+      'calendarView.showWeatherOnEvents',
     ],
   },
   {
@@ -279,13 +322,13 @@ export const SETTINGS_GROUPS: readonly SettingsGroupDef[] = [
     keys: [
       'sound.reminderVolume',
       'sound.mediaVolume',
-      'sound.alarmSound',
       'sound.reminderAlarmSound',
       'sound.reminderAlarmTimeout',
       'sound.allowCustomReminderSounds',
+      'notification.',
       'sound.ttsEnabled',
       'sound.ttsRate',
-      'notification.',
+      'sound.alarmSound',
     ],
   },
   {
@@ -293,17 +336,20 @@ export const SETTINGS_GROUPS: readonly SettingsGroupDef[] = [
     labelKey: 'Settings.TimerTitle',
     icon: 'Timer',
     keys: [
-      'sound.timerVolume',
+      'chronological.timer.',
+      'timer.',
       'sound.timerAlarmSound',
       'sound.timerAlarmTimeout',
-      'timer.',
+      'sound.timerVolume',
     ],
+    appMode: 'ENROLLED',
   },
   {
     id: 'lockScreen',
     labelKey: 'Settings.LockScreen',
     icon: 'Lock',
     keys: ['lockScreen.'],
+    appMode: 'ENROLLED',
   },
   {
     id: 'touch',
@@ -344,6 +390,9 @@ export const EXCLUDED_DEVICE_SETTINGS: ReadonlySet<string> = new Set([
   'device.id',
   'device.devMenuEnabled',
   'device.authWarningDismissTtlDays',
+  'notification.enabled',
+  'notification.notifyAllCalendars',
+  'notification.enabledCalendarIds',
   'notification.hasBeenPrompted',
 ]);
 
@@ -602,6 +651,33 @@ function matchesGroup(key: string, group: SettingsGroupDef): boolean {
   );
 }
 
+/** Return the index of the first matching key pattern in the group, for sorting. */
+function groupKeyIndex(key: string, keys: readonly string[]): number {
+  for (let i = 0; i < keys.length; i++) {
+    const matcher = keys[i];
+    if (key === matcher || (matcher.endsWith('.') && key.startsWith(matcher))) {
+      return i;
+    }
+  }
+  return keys.length;
+}
+
+/**
+ * Lazy-initialized map from setting key → declaration index in buildEntries.
+ * Used as a tiebreaker when multiple keys share the same prefix group index.
+ */
+let _registryKeyOrder: Map<string, number> | undefined;
+function registryKeyOrder(): Map<string, number> {
+  if (!_registryKeyOrder) {
+    _registryKeyOrder = new Map();
+    const keys = Object.keys(buildEntries(DEFAULT_REGISTRY_CONFIG));
+    for (let i = 0; i < keys.length; i++) {
+      _registryKeyOrder.set(keys[i], i);
+    }
+  }
+  return _registryKeyOrder;
+}
+
 /**
  * Group parsed setting entries into user-facing groups matching the mobile
  * app's settings menu structure.
@@ -613,10 +689,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
@@ -628,6 +705,14 @@ export function groupSettingsForDevice(
     if (!isChronological && s.key.startsWith('chronologicalEventForm.')) {
       return false;
     }
+    // Per-setting calendar type restriction
+    if (s.calendarType && s.calendarType !== calendarType) {
+      return false;
+    }
+    // Per-setting app mode restriction
+    if (s.appMode && s.appMode !== appMode) {
+      return false;
+    }
     return true;
   });
 
@@ -645,6 +730,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),
     );
@@ -652,6 +742,18 @@ export function groupSettingsForDevice(
       continue;
     }
 
+    // Sort matched settings by the order defined in group.keys,
+    // with registry declaration order as tiebreaker for prefix matches
+    const order = registryKeyOrder();
+    matched.sort((a, b) => {
+      const aIdx = groupKeyIndex(a.key, group.keys);
+      const bIdx = groupKeyIndex(b.key, group.keys);
+      if (aIdx !== bIdx) {
+        return aIdx - bIdx;
+      }
+      return (order.get(a.key) ?? Infinity) - (order.get(b.key) ?? Infinity);
+    });
+
     for (const s of matched) {
       claimed.add(s.key);
     }
@@ -683,6 +785,16 @@ 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;
+  /** Only show this setting for enrolled/kiosk devices (undefined = always) */
+  appMode?: 'ENROLLED';
+  /** Only show this setting for a specific calendar type (undefined = always) */
+  calendarType?: CalendarType;
 };
 
 // ---------------------------------------------------------------------------
@@ -705,6 +817,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.1hour' },
+];
+
+const TIME_OF_DAY_SLIDER: SliderConfig = { min: 0, max: 23, step: 1 };
+
 // ---------------------------------------------------------------------------
 // Helper
 // ---------------------------------------------------------------------------
@@ -713,9 +858,35 @@ function def<T>(
   category: SettingsCategory,
   type: SettingsDataType,
   defaultValue: T,
-  sync = true,
+  uiType: SettingUiType,
+  extra?: {
+    sync?: boolean;
+    options?: readonly SettingOption<T>[];
+    sliderConfig?: SliderConfig;
+    appMode?: 'ENROLLED';
+    calendarType?: CalendarType;
+  },
 ): 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;
+  }
+  if (extra?.appMode) {
+    result.appMode = extra.appMode;
+  }
+  if (extra?.calendarType) {
+    result.calendarType = extra.calendarType;
+  }
+  return result;
 }
 
 // ---------------------------------------------------------------------------
@@ -731,9 +902,35 @@ 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' },
+        ],
+        appMode: 'ENROLLED',
+      },
+    ),
+    'appearance.enableDayColors': def<boolean>(
+      'appearance',
+      'boolean',
+      false,
+      'TOGGLE',
+      { calendarType: 'chronological' },
     ),
-    'appearance.clockType': def<ClockType>('appearance', 'string', 'digital'),
-    'appearance.enableDayColors': def<boolean>('appearance', 'boolean', false),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Calendar view
@@ -742,152 +939,348 @@ 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, calendarType: 'time-based' },
     ),
     'calendarView.weekViewZoom': def<CalendarDayViewCellZoom>(
       'calendarView',
       'number',
       60,
+      'SELECT',
+      { options: DAY_VIEW_ZOOM_OPTIONS, calendarType: 'time-based' },
+    ),
+    '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.location': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.travelTime': def<boolean>('eventForm', 'boolean', false, 'TOGGLE'),
+    'eventForm.reminders': def<boolean>('eventForm', 'boolean', true, 'TOGGLE'),
+    'eventForm.emailReminders': 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', { appMode: 'ENROLLED' }),
+    'sound.mediaVolume': def<number>('sound', 'number', 0.5, 'VOLUME_SLIDER', { appMode: 'ENROLLED' }),
+    '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',
+      { appMode: 'ENROLLED' },
+    ),
+    'sound.ttsRate': def<number>(
+      'sound',
+      'number',
+      1.0,
+      'SLIDER',
+      { sliderConfig: { min: 0.5, max: 2, step: 0.1 }, appMode: 'ENROLLED' },
+    ),
 
     // ═══════════════════════════════════════════════════════════════════════
     // 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.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.pin': def<string>('lockScreen', 'string', '', 'PIN_INPUT'),
     '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.showHourNumbers': def<boolean>(
+      'lockScreen',
+      'boolean',
+      true,
+      'TOGGLE',
+    ),
+    'lockScreen.showDate': 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,
-    ),
-    'lockScreen.photoFrameImages': def<LockScreenImage[]>(
-      'lockScreen',
-      'json',
-      [],
+      'CUSTOM_IMAGE',
     ),
     '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' },
+        ],
+      },
+    ),
+
+    'lockScreen.photoFrameImages': def<LockScreenImage[]>(
+      'lockScreen',
+      'json',
+      [],
+      'CUSTOM_IMAGE_ARRAY',
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
     // 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 +1290,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,225 +1336,292 @@ function buildEntries(config: RegistryConfig) {
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronological.header.showClock': def<boolean>(
+    'chronological.header.showCurrentYearInDate': def<boolean>(
       'chronological',
       'boolean',
-      true,
+      false,
+      'TOGGLE',
     ),
-    'chronological.header.showCurrentYearInDate': def<boolean>(
+    'chronological.header.showClock': def<boolean>(
       'chronological',
       'boolean',
-      false,
+      true,
+      '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.timer.showAddTemplate': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronological.timer.showDeleteTemplate': def<boolean>(
+    'chronological.timer.showEditTemplate': def<boolean>(
       'chronological',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronological.timer.showAddTemplate': def<boolean>(
+    'chronological.timer.showDeleteTemplate': 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 },
     ),
 
     // ═══════════════════════════════════════════════════════════════════════
     // Chronological event form
     // ═══════════════════════════════════════════════════════════════════════
-    // Toggleable fields
-    'chronologicalEventForm.field.description': def<boolean>(
+    // Fixed fields
+    'chronologicalEventForm.fixedField.allDay': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronologicalEventForm.field.recurrence': def<boolean>(
+    'chronologicalEventForm.fixedField.endTime': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronologicalEventForm.field.acknowledge': def<boolean>(
+    'chronologicalEventForm.fixedField.visibility': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronologicalEventForm.field.checklist': def<boolean>(
+    // Toggleable fields
+    'chronologicalEventForm.field.acknowledge': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronologicalEventForm.field.extraImages': def<boolean>(
+    'chronologicalEventForm.field.description': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronologicalEventForm.field.reminders': def<boolean>(
+    'chronologicalEventForm.field.recurrence': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronologicalEventForm.field.audioClips': def<boolean>(
+    'chronologicalEventForm.field.checklist': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    // Fixed fields
-    'chronologicalEventForm.fixedField.allDay': def<boolean>(
+    'chronologicalEventForm.field.extraImages': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronologicalEventForm.fixedField.endTime': def<boolean>(
+    'chronologicalEventForm.field.reminders': def<boolean>(
       'chronologicalEventForm',
       'boolean',
       true,
+      'TOGGLE',
     ),
-    'chronologicalEventForm.fixedField.visibility': def<boolean>(
+    'chronologicalEventForm.field.audioClips': 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 +1631,7 @@ function buildEntries(config: RegistryConfig) {
         { daysBefore: 1, time: '18:00' },
         { daysBefore: 2, time: '09:00' },
       ],
+      'CUSTOM_REMINDER_PRESETS',
     ),
   } as const satisfies Record<string, SettingDef>;
 }
@@ -1232,8 +1708,21 @@ export class SettingsRegistry {
       case 'number':
         return String(value ?? 0);
       case 'boolean':
+        if (typeof value === 'string') {
+          return value === 'true' ? 'true' : 'false';
+        }
         return value ? 'true' : 'false';
       case 'json':
+        // If already a serialized JSON string, return as-is to avoid
+        // double-wrapping (e.g. JSON.stringify("[]") → "\"[]\"")
+        if (typeof value === 'string') {
+          try {
+            JSON.parse(value);
+            return value;
+          } catch {
+            return JSON.stringify(value);
+          }
+        }
         return JSON.stringify(value);
     }
   }
@@ -1257,7 +1746,17 @@ export class SettingsRegistry {
         return (raw === 'true') as SettingValue<K>;
       case 'json':
         try {
-          return JSON.parse(raw) as SettingValue<K>;
+          let result: unknown = JSON.parse(raw);
+          // Unwrap multiply-escaped JSON strings caused by repeated
+          // double-serialization (each push/pull cycle added a layer)
+          while (typeof result === 'string') {
+            try {
+              result = JSON.parse(result);
+            } catch {
+              break;
+            }
+          }
+          return result as SettingValue<K>;
         } catch {
           return this.getDefault(key);
         }
@@ -1316,6 +1815,16 @@ 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;
+  /** Only show this setting for enrolled/kiosk devices (undefined = always) */
+  appMode?: 'ENROLLED';
+  /** Only show this setting for a specific calendar type (undefined = always) */
+  calendarType?: CalendarType;
 };
 
 export type ParsedSettingsGroup = {
@@ -1374,6 +1883,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 +1893,11 @@ 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 }),
+      ...(entryDef?.appMode && { appMode: entryDef.appMode }),
+      ...(entryDef?.calendarType && { calendarType: entryDef.calendarType }),
     });
   }
 
@@ -1424,6 +1941,51 @@ export function formatSettingValue(value: unknown): string {
   return String(value);
 }
 
+/**
+ * Serialize a settings object (with mixed native types) into a
+ * string-values-only snapshot suitable for pushing to a mobile device.
+ *
+ * Uses the registry's `serialize()` method for known keys so that
+ * booleans become "true"/"false", numbers become digit strings, etc.
+ * Unknown keys are converted with `String(value)`.
+ */
+export function serializeSettingsSnapshot(
+  settings: Record<string, unknown>,
+  registry: SettingsRegistry,
+): Record<string, string> {
+  const result: Record<string, string> = {};
+  for (const [key, value] of Object.entries(settings)) {
+    if (key in registry.entries) {
+      result[key] = registry.serialize(key as SettingKey, value);
+    } else {
+      result[key] = String(value ?? '');
+    }
+  }
+  return result;
+}
+
+/**
+ * Deserialize a settings snapshot (string values from the server/DB) into
+ * native-typed values using the registry.
+ *
+ * This ensures local state always contains native types (boolean, number, etc.)
+ * so that subsequent `serializeSettingsSnapshot` calls produce correct results.
+ */
+export function deserializeSettingsSnapshot(
+  snapshot: Record<string, unknown>,
+  registry: SettingsRegistry = defaultRegistry,
+): Record<string, unknown> {
+  const result: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(snapshot)) {
+    if (typeof value === 'string' && key in registry.entries) {
+      result[key] = registry.deserialize(key as SettingKey, value);
+    } else {
+      result[key] = value;
+    }
+  }
+  return result;
+}
+
 // ---------------------------------------------------------------------------
 // Default registry instance (non-enrolled, system theme, nb locale)
 // ---------------------------------------------------------------------------