create-foldkit-app 0.27.3 → 0.28.0

package/dist/templates/examples/map/src/mapHost.ts

@@ -0,0 +1,23 @@
+import { Function, Option } from 'effect'
+import type { Map as MapInstance } from 'maplibre-gl'
+
+const mapsByHostId = new Map<string, MapInstance>()
+
+/** Stash a live Map instance against an id so Subscriptions and Commands
+ *  can reach it without putting the (mutable, unfreezable) instance in the
+ *  Model. Cleanup is paired in `OnMount`'s cleanup. */
+export const setMap = (hostId: string, instance: MapInstance): void => {
+  mapsByHostId.set(hostId, instance)
+}
+
+export const getMap = (hostId: string): Option.Option<MapInstance> =>
+  Option.fromNullishOr(mapsByHostId.get(hostId))
+
+export const removeMap = (hostId: string): void =>
+  Option.match(getMap(hostId), {
+    onNone: Function.constVoid,
+    onSome: map => {
+      map.remove()
+      mapsByHostId.delete(hostId)
+    },
+  })

package/dist/templates/examples/map/src/scene.test.ts

@@ -0,0 +1,136 @@
+import { Option } from 'effect'
+import {
+  Command,
+  Mount,
+  click,
+  expect,
+  given,
+  label,
+  role,
+  scene,
+  text,
+  type,
+} from 'foldkit/scene'
+import { describe, test } from 'vitest'
+
+import {
+  FlyTo,
+  Geolocate,
+  GeolocateFailed,
+  LockBodyScroll,
+  Message,
+  MountMap,
+  UnlockBodyScroll,
+  update,
+  view,
+} from './main'
+import { initialModel, mountedModel } from './main.fixtures'
+
+const acknowledgeMapMount = Mount.resolve(
+  MountMap,
+  Message.SucceededMountMap({ hostId: 'test-map-host' }),
+)
+const acknowledgeBodyLock = Command.resolve(
+  LockBodyScroll,
+  Message.CompletedLockBodyScroll(),
+)
+const acknowledgeBodyUnlock = Command.resolve(
+  UnlockBodyScroll,
+  Message.CompletedUnlockBodyScroll(),
+)
+
+describe('view', () => {
+  test('initial view lists every featured location in the sidebar', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      expect(role('button', { name: /Eiffel Tower/ })).toExist(),
+      expect(role('button', { name: /Sydney Opera House/ })).toExist(),
+      expect(role('button', { name: 'Find my location' })).toExist(),
+      acknowledgeMapMount,
+    )
+  })
+
+  test('typing in the filter input filters the visible locations', () => {
+    scene(
+      { update, view },
+      given(initialModel),
+      acknowledgeMapMount,
+      type(label('Filter locations'), 'Paris'),
+      expect(role('button', { name: /Eiffel Tower/ })).toExist(),
+      expect(role('button', { name: /Sydney Opera House/ })).toBeAbsent(),
+    )
+  })
+
+  test('clicking a sidebar location selects it and dispatches FlyTo', () => {
+    scene(
+      { update, view },
+      given(mountedModel),
+      acknowledgeMapMount,
+      click(role('button', { name: /Eiffel Tower/ })),
+      Command.expectHas(FlyTo),
+      Command.resolve(FlyTo, Message.SucceededFlyTo()),
+    )
+  })
+
+  test('clicking find-me shows the locating overlay', () => {
+    scene(
+      { update, view },
+      given(mountedModel),
+      acknowledgeMapMount,
+      click(role('button', { name: 'Find my location' })),
+      expect(role('button', { name: 'Locating…' })).toExist(),
+      acknowledgeBodyLock,
+      Command.resolve(
+        Geolocate,
+        Message.FailedGeolocate({ reason: 'Test cleanup' }),
+      ),
+    )
+  })
+
+  test('the failed-geolocation overlay shows a Dismiss button that returns to idle', () => {
+    scene(
+      { update, view },
+      given({
+        ...mountedModel,
+        geolocateState: GeolocateFailed({ reason: 'Permission denied' }),
+      }),
+      acknowledgeMapMount,
+      expect(role('button', { name: 'Dismiss' })).toExist(),
+      click(role('button', { name: 'Dismiss' })),
+      acknowledgeBodyUnlock,
+      expect(role('button', { name: 'Dismiss' })).toBeAbsent(),
+    )
+  })
+
+  test('a failed map mount renders the error banner', () => {
+    scene(
+      { update, view },
+      given({
+        ...initialModel,
+        maybeMapError: Option.some('Network timeout'),
+      }),
+      expect(label('Map failed to load')).toExist(),
+      expect(text('Network timeout')).toExist(),
+      acknowledgeMapMount,
+    )
+  })
+
+  test('the bounds badge shows after the map reports its first move', () => {
+    scene(
+      { update, view },
+      given({
+        ...mountedModel,
+        maybeBounds: Option.some({
+          west: -180,
+          south: -85,
+          east: 180,
+          north: 85,
+        }),
+      }),
+      expect(text('N 85.00')).toExist(),
+      expect(text('S -85.00')).toExist(),
+      acknowledgeMapMount,
+    )
+  })
+})

package/dist/templates/examples/map/src/story.test.ts

@@ -0,0 +1,190 @@
+import { Option } from 'effect'
+import { Command, given, message, model, story } from 'foldkit/story'
+import { expect, test } from 'vitest'
+
+import {
+  FlyTo,
+  Geolocate,
+  GeolocateFailed,
+  GeolocateLocating,
+  LockBodyScroll,
+  Message,
+  UnlockBodyScroll,
+  update,
+} from './main'
+import { eiffelTower, initialModel, mountedModel } from './main.fixtures'
+
+test('mounting the map records the host id in the Model', () => {
+  story(
+    update,
+    given(initialModel),
+    message(Message.SucceededMountMap({ hostId: 'map-host-1' })),
+    model(model => {
+      expect(model.maybeMapHostId).toStrictEqual(Option.some('map-host-1'))
+    }),
+  )
+})
+
+test('movement events update the Model bounds', () => {
+  story(
+    update,
+    given(mountedModel),
+    message(
+      Message.MovedMap({
+        bounds: { west: -180, south: -85, east: 180, north: 85 },
+      }),
+    ),
+    model(model => {
+      expect(model.maybeBounds).toStrictEqual(
+        Option.some({ west: -180, south: -85, east: 180, north: 85 }),
+      )
+    }),
+  )
+})
+
+test('clicking a marker selects the corresponding location', () => {
+  story(
+    update,
+    given(mountedModel),
+    message(Message.ClickedMarker({ locationId: eiffelTower.id })),
+    model(model => {
+      expect(model.maybeSelectedLocationId).toStrictEqual(
+        Option.some(eiffelTower.id),
+      )
+    }),
+  )
+})
+
+test('clicking a sidebar location selects it and emits a fly Command', () => {
+  story(
+    update,
+    given(mountedModel),
+    message(Message.ClickedLocation({ locationId: eiffelTower.id })),
+    model(model => {
+      expect(model.maybeSelectedLocationId).toStrictEqual(
+        Option.some(eiffelTower.id),
+      )
+    }),
+    Command.expectHas(FlyTo),
+    Command.resolve(FlyTo, Message.SucceededFlyTo()),
+  )
+})
+
+test('clicking a sidebar location before the map mounts still emits FlyTo', () => {
+  story(
+    update,
+    given(initialModel),
+    message(Message.ClickedLocation({ locationId: eiffelTower.id })),
+    model(model => {
+      expect(model.maybeSelectedLocationId).toStrictEqual(
+        Option.some(eiffelTower.id),
+      )
+      expect(model.maybeMapHostId).toStrictEqual(Option.none())
+    }),
+    Command.expectHas(FlyTo),
+    Command.resolve(FlyTo, Message.SucceededFlyTo()),
+  )
+})
+
+test('a failed map mount surfaces the reason in the Model', () => {
+  story(
+    update,
+    given(initialModel),
+    message(Message.FailedMountMap({ reason: 'Network timeout' })),
+    model(model => {
+      expect(model.maybeMapError).toStrictEqual(Option.some('Network timeout'))
+    }),
+  )
+})
+
+test('clicking a sidebar location with an unknown id is a no-op', () => {
+  story(
+    update,
+    given(mountedModel),
+    message(Message.ClickedLocation({ locationId: 'does-not-exist' })),
+    model(model => {
+      expect(model.maybeSelectedLocationId).toStrictEqual(Option.none())
+    }),
+    Command.expectNone(),
+  )
+})
+
+test('typing in the filter input updates the query', () => {
+  story(
+    update,
+    given(initialModel),
+    message(Message.UpdatedSearchQuery({ value: 'Paris' })),
+    model(model => {
+      expect(model.searchQuery).toBe('Paris')
+    }),
+  )
+})
+
+test('clicking find-me transitions to the locating state and emits Geolocate', () => {
+  story(
+    update,
+    given(initialModel),
+    message(Message.ClickedFindMe()),
+    model(model => {
+      expect(model.geolocateState._tag).toBe('GeolocateLocating')
+    }),
+    Command.expectHas(LockBodyScroll, Geolocate),
+    Command.resolve(LockBodyScroll, Message.CompletedLockBodyScroll()),
+    Command.resolve(
+      Geolocate,
+      Message.FailedGeolocate({ reason: 'Test cleanup' }),
+    ),
+  )
+})
+
+test('a successful geolocation result clears the locating state and flies the map', () => {
+  story(
+    update,
+    given({
+      ...mountedModel,
+      geolocateState: GeolocateLocating(),
+    }),
+    message(Message.SucceededGeolocate({ lng: 2.35, lat: 48.85 })),
+    model(model => {
+      expect(model.geolocateState._tag).toBe('GeolocateIdle')
+      expect(model.maybeUserLocation).toStrictEqual(
+        Option.some({ lng: 2.35, lat: 48.85 }),
+      )
+    }),
+    Command.expectHas(UnlockBodyScroll, FlyTo),
+    Command.resolve(UnlockBodyScroll, Message.CompletedUnlockBodyScroll()),
+    Command.resolve(FlyTo, Message.SucceededFlyTo()),
+  )
+})
+
+test('a failed geolocation result surfaces the reason in the geolocate state', () => {
+  story(
+    update,
+    given({
+      ...initialModel,
+      geolocateState: GeolocateLocating(),
+    }),
+    message(Message.FailedGeolocate({ reason: 'Permission denied' })),
+    model(model => {
+      expect(model.geolocateState._tag).toBe('GeolocateFailed')
+      if (model.geolocateState._tag === 'GeolocateFailed') {
+        expect(model.geolocateState.reason).toBe('Permission denied')
+      }
+    }),
+  )
+})
+
+test('dismissing the geolocate overlay returns to idle', () => {
+  story(
+    update,
+    given({
+      ...initialModel,
+      geolocateState: GeolocateFailed({ reason: 'Timed out' }),
+    }),
+    message(Message.DismissedGeolocate()),
+    model(model => {
+      expect(model.geolocateState._tag).toBe('GeolocateIdle')
+    }),
+    Command.resolve(UnlockBodyScroll, Message.CompletedUnlockBodyScroll()),
+  )
+})

package/dist/templates/examples/map/src/styles.css

@@ -0,0 +1,2 @@
+@import 'tailwindcss';
+@import 'maplibre-gl/dist/maplibre-gl.css';

package/dist/templates/examples/map/src/vitest-setup.ts

@@ -0,0 +1,3 @@
+import { setup } from 'foldkit/test/vitest'
+
+setup()

package/dist/templates/examples/pixel-art/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "pixel-art-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "bench": "vitest run --config vitest.bench.config.ts"
+  },
+  "dependencies": {
+    "@effect/platform-browser": "4.0.0-rc.109",
+    "@foldkit/ui": "workspace:*",
+    "@tailwindcss/vite": "^4.3.1",
+    "clsx": "^2.1.1",
+    "effect": "4.0.0-rc.109",
+    "foldkit": "workspace:*",
+    "tailwindcss": "^4.3.1"
+  },
+  "devDependencies": {
+    "@foldkit/devtools": "workspace:*",
+    "@foldkit/vite-plugin": "workspace:*",
+    "@trivago/prettier-plugin-sort-imports": "^6.0.2",
+    "happy-dom": "^20.10.4",
+    "prettier": "^3.8.4",
+    "typescript": "^6.0.3",
+    "vite": "^8.0.16",
+    "vitest": "^4.1.9"
+  }
+}

package/dist/templates/examples/pixel-art/src/command.ts

@@ -0,0 +1,87 @@
+import { Array, Effect, Predicate, Schema as S } from 'effect'
+import { KeyValueStore } from 'effect/unstable/persistence'
+import { Command } from 'foldkit'
+
+import { BrowserKeyValueStore } from '@effect/platform-browser'
+
+import { CANVAS_SIZE_PX, EXPORT_SCALE, STORAGE_KEY } from './constant'
+import { Message } from './message'
+import type { Model, SavedCanvas } from './model'
+import { Grid, PaletteIndex } from './model'
+import { SavedCanvasJsonString } from './model'
+import { PALETTE_THEMES, resolveColor } from './palette'
+
+export const SaveCanvas = Command.define('SaveCanvas', {
+  args: {
+    grid: Grid,
+    gridSize: S.Number,
+    paletteThemeIndex: S.Number,
+    selectedColorIndex: PaletteIndex,
+  },
+  messages: [Message.CompletedSaveCanvas],
+  execute: ({ grid, gridSize, paletteThemeIndex, selectedColorIndex }) =>
+    Effect.gen(function* () {
+      const store = yield* KeyValueStore.KeyValueStore
+      const data: SavedCanvas = {
+        grid,
+        gridSize,
+        paletteThemeIndex,
+        selectedColorIndex,
+      }
+      yield* store.set(STORAGE_KEY, S.encodeSync(SavedCanvasJsonString)(data))
+      return Message.CompletedSaveCanvas()
+    }).pipe(
+      Effect.catch(() => Effect.succeed(Message.CompletedSaveCanvas())),
+      Effect.provide(BrowserKeyValueStore.layerLocalStorage),
+    ),
+})
+
+export const saveCanvas = (model: Model) =>
+  SaveCanvas({
+    grid: model.grid,
+    gridSize: model.gridSize,
+    paletteThemeIndex: model.paletteThemeIndex,
+    selectedColorIndex: model.selectedColorIndex,
+  })
+
+export const ExportPng = Command.define('ExportPng', {
+  args: { grid: Grid, gridSize: S.Number, paletteThemeIndex: S.Number },
+  messages: [Message.SucceededExportPng, Message.FailedExportPng],
+  execute: ({ grid, gridSize, paletteThemeIndex }) =>
+    Effect.gen(function* () {
+      const theme = PALETTE_THEMES[paletteThemeIndex] ?? PALETTE_THEMES[0]
+      const scale =
+        Math.max(1, Math.floor(CANVAS_SIZE_PX / gridSize)) * EXPORT_SCALE
+      const canvas = document.createElement('canvas')
+      canvas.width = gridSize * scale
+      canvas.height = gridSize * scale
+      const context = canvas.getContext('2d')
+
+      if (Predicate.isNull(context)) {
+        return yield* Effect.fail(
+          Message.FailedExportPng({ error: 'Canvas 2D context not available' }),
+        )
+      }
+
+      Array.forEach(grid, (row, y) => {
+        Array.forEach(row, (cell, x) => {
+          context.fillStyle = resolveColor(cell, theme)
+          context.fillRect(x * scale, y * scale, scale, scale)
+        })
+      })
+
+      const link = document.createElement('a')
+      link.download = 'pixel-art.png'
+      link.href = canvas.toDataURL('image/png')
+      link.click()
+
+      return Message.SucceededExportPng()
+    }).pipe(
+      Effect.catchTag('FailedExportPng', error => Effect.succeed(error)),
+      Effect.catch(() =>
+        Effect.succeed(
+          Message.FailedExportPng({ error: 'Failed to export image' }),
+        ),
+      ),
+    ),
+})

package/dist/templates/examples/pixel-art/src/comparison.bench.test.ts

@@ -0,0 +1,204 @@
+/**
+ * Side-by-side benchmark: Foldkit update vs React reducer
+ *
+ * Run: pnpm --filter pixel-art-example exec vitest run src/comparison.bench.ts
+ */
+import { Option } from 'effect'
+import { test } from 'vitest'
+
+import { Dialog, Listbox } from '@foldkit/ui'
+
+import { createEmptyGrid as createReactGrid } from '../../../comparisons/pixel-art-react/src/grid'
+import { reducer } from '../../../comparisons/pixel-art-react/src/reducer'
+import type { State } from '../../../comparisons/pixel-art-react/src/types'
+import { createEmptyGrid as createFoldkitGrid } from './grid'
+import { Message } from './message'
+import type { Model } from './model'
+import { update } from './update'
+
+const GRID_SIZE = 16
+const ITERATIONS = 10_000
+const WARMUP = 500
+
+const foldkitModel: Model = {
+  grid: createFoldkitGrid(GRID_SIZE),
+  undoStack: [],
+  redoStack: [],
+  selectedColorIndex: 0,
+  gridSize: GRID_SIZE,
+  tool: 'Brush' as const,
+  mirrorMode: 'None' as const,
+  isDrawing: false,
+  maybeHoveredCell: Option.none(),
+  errorDialog: Dialog.init({ id: 'error-dialog' }),
+  maybeExportError: Option.none(),
+  paletteThemeIndex: 0,
+  gridSizeConfirmDialog: Dialog.init({ id: 'confirm-dialog' }),
+  maybePendingGridSize: Option.none(),
+  themeListbox: Listbox.init({ id: 'themes' }),
+}
+
+const reactState: State = {
+  grid: createReactGrid(GRID_SIZE),
+  undoStack: [],
+  redoStack: [],
+  selectedColorIndex: 0,
+  gridSize: GRID_SIZE,
+  tool: 'Brush',
+  mirrorMode: 'None',
+  isDrawing: false,
+  hoveredCell: null,
+  paletteThemeIndex: 0,
+  exportError: null,
+  isErrorDialogOpen: false,
+  pendingGridSize: null,
+  isGridSizeDialogOpen: false,
+}
+
+const buildFoldkitHistory = (steps: number): Model => {
+  let model = foldkitModel
+  for (let i = 0; i < steps; i++) {
+    const x = i % GRID_SIZE
+    const y = Math.floor(i / GRID_SIZE) % GRID_SIZE
+    ;[model] = update(model, Message.PressedCell({ x, y }))
+    ;[model] = update(model, Message.ReleasedMouse())
+  }
+  return model
+}
+
+const buildReactHistory = (steps: number): State => {
+  let state = reactState
+  for (let i = 0; i < steps; i++) {
+    const x = i % GRID_SIZE
+    const y = Math.floor(i / GRID_SIZE) % GRID_SIZE
+    state = reducer(state, { type: 'PressedCell', x, y })
+    state = reducer(state, { type: 'ReleasedMouse' })
+  }
+  return state
+}
+
+const timeMs = (iterations: number, fn: () => void): number => {
+  for (let i = 0; i < WARMUP; i++) {
+    fn()
+  }
+  const start = performance.now()
+  for (let i = 0; i < iterations; i++) {
+    fn()
+  }
+  return performance.now() - start
+}
+
+const formatUs = (totalMs: number, iterations: number): string => {
+  const us = (totalMs / iterations) * 1000
+  if (us >= 100) {
+    return `${us.toFixed(0)}\u00b5s`
+  }
+  if (us >= 1) {
+    return `${us.toFixed(1)}\u00b5s`
+  }
+  return `${(us * 1000).toFixed(0)}ns`
+}
+
+const pad = (text: string, width: number): string => text.padEnd(width)
+const padR = (text: string, width: number): string => text.padStart(width)
+
+test('benchmark', () => {
+  const foldkitWith20 = buildFoldkitHistory(20)
+  const reactWith20 = buildReactHistory(20)
+
+  const benchmarks: ReadonlyArray<
+    Readonly<{ name: string; foldkit: () => void; react: () => void }>
+  > = [
+    {
+      name: 'Brush stroke',
+      foldkit: () => {
+        const [m] = update(foldkitModel, Message.PressedCell({ x: 5, y: 5 }))
+        update(m, Message.ReleasedMouse())
+      },
+      react: () => {
+        const s = reducer(reactState, { type: 'PressedCell', x: 5, y: 5 })
+        reducer(s, { type: 'ReleasedMouse' })
+      },
+    },
+    {
+      name: 'Brush drag (5 cells)',
+      foldkit: () => {
+        let [m] = update(foldkitModel, Message.PressedCell({ x: 0, y: 0 }))
+        ;[m] = update(m, Message.EnteredCell({ x: 1, y: 0 }))
+        ;[m] = update(m, Message.EnteredCell({ x: 2, y: 0 }))
+        ;[m] = update(m, Message.EnteredCell({ x: 3, y: 0 }))
+        ;[m] = update(m, Message.EnteredCell({ x: 4, y: 0 }))
+        update(m, Message.ReleasedMouse())
+      },
+      react: () => {
+        let s = reducer(reactState, { type: 'PressedCell', x: 0, y: 0 })
+        s = reducer(s, { type: 'EnteredCell', x: 1, y: 0 })
+        s = reducer(s, { type: 'EnteredCell', x: 2, y: 0 })
+        s = reducer(s, { type: 'EnteredCell', x: 3, y: 0 })
+        s = reducer(s, { type: 'EnteredCell', x: 4, y: 0 })
+        reducer(s, { type: 'ReleasedMouse' })
+      },
+    },
+    {
+      name: 'Flood fill (16\u00d716)',
+      foldkit: () => {
+        const m: Model = { ...foldkitModel, tool: 'Fill' as const }
+        update(m, Message.PressedCell({ x: 0, y: 0 }))
+      },
+      react: () => {
+        const s: State = { ...reactState, tool: 'Fill' }
+        reducer(s, { type: 'PressedCell', x: 0, y: 0 })
+      },
+    },
+    {
+      name: 'Single undo (20 entries)',
+      foldkit: () => {
+        update(foldkitWith20, Message.ClickedUndo())
+      },
+      react: () => {
+        reducer(reactWith20, { type: 'ClickedUndo' })
+      },
+    },
+    {
+      name: '5\u00d7 undo + 5\u00d7 redo',
+      foldkit: () => {
+        let m = foldkitWith20
+        for (let i = 0; i < 5; i++) {
+          ;[m] = update(m, Message.ClickedUndo())
+        }
+        for (let i = 0; i < 5; i++) {
+          ;[m] = update(m, Message.ClickedRedo())
+        }
+      },
+      react: () => {
+        let s = reactWith20
+        for (let i = 0; i < 5; i++) {
+          s = reducer(s, { type: 'ClickedUndo' })
+        }
+        for (let i = 0; i < 5; i++) {
+          s = reducer(s, { type: 'ClickedRedo' })
+        }
+      },
+    },
+  ]
+
+  console.log('')
+  console.log(
+    `  Pixel Art Editor \u2014 State Update Benchmark (${ITERATIONS.toLocaleString()} iterations, ${GRID_SIZE}\u00d7${GRID_SIZE} grid)`,
+  )
+  console.log('')
+  console.log(
+    `  ${pad('Operation', 28)} ${padR('Foldkit', 10)} ${padR('React', 10)}`,
+  )
+  console.log(`  ${'─'.repeat(48)}`)
+
+  for (const b of benchmarks) {
+    const foldkitMs = timeMs(ITERATIONS, b.foldkit)
+    const reactMs = timeMs(ITERATIONS, b.react)
+    console.log(
+      `  ${pad(b.name, 28)} ${padR(formatUs(foldkitMs, ITERATIONS), 10)} ${padR(formatUs(reactMs, ITERATIONS), 10)}`,
+    )
+  }
+
+  console.log('')
+})

package/dist/templates/examples/pixel-art/src/constant.ts

@@ -0,0 +1,21 @@
+import {
+  type HexColor,
+  HexColor as HexColorSchema,
+  type PaletteIndex,
+} from './model'
+
+export const DEFAULT_GRID_SIZE = 16
+export const EMPTY_COLOR: HexColor = HexColorSchema.make('#ffffff')
+export const DEFAULT_COLOR_INDEX: PaletteIndex = 0
+export const MAX_HISTORY = 50
+export const VISIBLE_HISTORY_COUNT = 6
+export const THUMBNAIL_CELL_SIZE = 2
+export const CANVAS_SIZE_PX = 512
+export const EXPORT_SCALE = 4
+export const STORAGE_KEY = 'pixel-art-canvas'
+export const DEFAULT_PALETTE_THEME_INDEX = 0
+
+export const GRID_SIZES: ReadonlyArray<number> = [8, 16, 24, 32]
+export const GRID_SIZE_STRINGS: ReadonlyArray<string> = GRID_SIZES.map(size =>
+  size.toString(),
+)