peachsim 0.1.675 → 0.1.677

package/src/menu.ts

@@ -29,6 +29,25 @@ export const SOOTSIM_AMBIENT_GLOW_LABELS: Record<SootSimAmbientGlowLevel, string
   full: 'Full',
 }
 
+// the stage behind the device: system follows the mac's appearance (white in
+// light mode, black in dark), or one pinned color. one value per host, like
+// the glow level above.
+export type SootSimStageBackground = 'system' | 'light' | 'dark' | 'gray'
+export const SOOTSIM_STAGE_BACKGROUNDS = ['system', 'light', 'dark', 'gray'] as const
+
+export function isSootSimStageBackground(
+  value: unknown,
+): value is SootSimStageBackground {
+  return value === 'system' || value === 'light' || value === 'dark' || value === 'gray'
+}
+
+export const SOOTSIM_STAGE_BACKGROUND_LABELS: Record<SootSimStageBackground, string> = {
+  system: 'System',
+  light: 'Light',
+  dark: 'Dark',
+  gray: 'Gray',
+}
+
 // render resolution: how many pixels peach renders per iphone point. one
 // setting with three states, carried by every host exactly like the ambient
 // glow level above: the menus, the persisted setting, the ?renderResolution=
@@ -86,6 +105,8 @@ export interface SootSimMenuState {
   showRail: boolean
   solidWindow: boolean
   ambientGlow: SootSimAmbientGlowLevel
+  stageBackground: SootSimStageBackground
+  stageChecker: boolean
   renderResolution: SootSimRenderResolution
   // presentation: the real rendering, or the clean structural wireframe
   wireframe: boolean
@@ -134,6 +155,7 @@ export type MenuItemDef = SootSimMenuItemDef
 export type MenuDef = SootSimMenuDef
 export type MenuState = SootSimMenuState
 export type AmbientGlowLevel = SootSimAmbientGlowLevel
+export type StageBackground = SootSimStageBackground
 export type RenderResolution = SootSimRenderResolution
 export type ShortcutPlatform = SootSimMenuPlatform
 export type MenuShortcutEntry = SootSimMenuShortcutEntry
@@ -550,6 +572,32 @@ function windowMenu(state: SootSimMenuState): SootSimMenuDef {
           actionPayload: level,
         })),
       },
+      {
+        // browser only, with the glow: the stage, its dropped wallpaper and
+        // the glow all live around the device in the browser shell. the
+        // wallpaper actions run in the shell, which owns the image.
+        label: 'Background',
+        hiddenIn: 'electron',
+        items: [
+          ...SOOTSIM_STAGE_BACKGROUNDS.map((background) => ({
+            label: SOOTSIM_STAGE_BACKGROUND_LABELS[background],
+            type: 'radio' as const,
+            checked: state.stageBackground === background,
+            action: 'set-stage-background',
+            actionPayload: background,
+          })),
+          { type: 'separator' as const },
+          {
+            label: 'Checker',
+            type: 'checkbox' as const,
+            checked: state.stageChecker,
+            action: 'toggle-stage-checker',
+          },
+          { type: 'separator' as const },
+          { label: 'Choose Wallpaper…', action: 'choose-wallpaper' },
+          { label: 'Clear Wallpaper', action: 'clear-wallpaper' },
+        ],
+      },
       {
         // every host: the level only changes backing-store sizes, so the
         // device-shaped electron window shows it the same as the browser.