diff --git a/web/src/dinners/api.ts b/web/src/dinners/api.ts
new file mode 100644
index 0000000..657d1de
--- /dev/null
+++ b/web/src/dinners/api.ts
@@ -0,0 +1,335 @@
+import { useIsMutating, useMutation, useQuery, useQueryClient, type QueryClient } from '@tanstack/react-query'
+import { useApi } from '../api/index.ts'
+import { isRecord } from '../api/errors.ts'
+
+export const DINNERS_PATH = '/api/v1/dinners'
+export const REGULARS_PATH = `${DINNERS_PATH}?status=regular`
+
+// GROUNDING_POLL_MS is how often the Regulars are read again while any of
+// them is still finding its recipe.
+export const GROUNDING_POLL_MS = 3000
+
+// Methods and Difficulties are the values the dinners API allows.
+export const METHODS = ['stovetop', 'oven', 'crockpot', 'grill', 'other'] as const
+export const DIFFICULTIES = ['easy', 'medium', 'hard'] as const
+const GROUNDING_STATUSES = ['pending', 'grounded', 'failed', 'manual'] as const
+
+export type Method = (typeof METHODS)[number]
+export type Difficulty = (typeof DIFFICULTIES)[number]
+export type GroundingStatus = (typeof GROUNDING_STATUSES)[number]
+
+// Regular is the part of a dinner the Regulars screens read. photo_id is
+// the stored photo's id, from photo_url. pending is true while an
+// optimistic add waits for the server; its id is not the server's.
+export type Regular = {
+ id: string
+ name: string
+ method: Method | null
+ minutes_total: number | null
+ difficulty: Difficulty | null
+ is_favorite: boolean
+ photo_id: string | undefined
+ grounding_status: GroundingStatus
+ pending?: true
+}
+
+// NewRegular is a POST /api/v1/dinners body: the household's name for the
+// dinner, with the recipe link to ground it in when one was pasted. A
+// dinner is never named from its link, which may carry private details.
+export type NewRegular = { name: string; recipe_url?: string }
+
+// RegularPatch is a PATCH /api/v1/dinners/{id} body; every field is optional.
+export type RegularPatch = Partial<{ name: string; method: Method; minutes_total: number; difficulty: Difficulty }>
+
+// ManualRecipe is a recipe the household types in; the server needs its
+// minutes and method.
+export type ManualRecipe = { ingredients: string[]; steps: string[]; minutes: number; method: Method }
+
+// RecipeFix is a POST /api/v1/dinners/{id}/ground body: exactly one way to
+// ground the dinner.
+export type RecipeFix = { candidate_id: string } | { recipe_url: string } | { manual: ManualRecipe }
+
+// RecipeCandidate is one recipe page a dinner could be grounded in.
+export type RecipeCandidate = {
+ candidate_id: string
+ title: string
+ site_name: string
+ photo_id: string | undefined
+ minutes: number | null
+}
+
+// CachedRegular is a Regular as the cache holds it. removing is true while
+// an optimistic removal waits for the server: the entry keeps its place, so
+// a refused removal returns exactly there whatever else changed meanwhile.
+type CachedRegular = Regular & { removing?: true }
+
+function shown(list: CachedRegular[]): Regular[] {
+ return list.filter((regular) => !regular.removing)
+}
+
+function restored(regular: CachedRegular): CachedRegular {
+ const copy = { ...regular }
+ delete copy.removing
+ return copy
+}
+
+// REGULARS_KEY prefixes every Regulars query, so a change refreshes them all
+// (the settings home's count included).
+export const REGULARS_KEY = ['dinners', 'regular'] as const
+const REGULARS_LIST_KEY = [...REGULARS_KEY, 'list'] as const
+const REGULARS_MUTATION_KEY = ['dinners', 'regular', 'change'] as const
+
+function oneOf(where: string, field: string, values: readonly T[], value: unknown): T {
+ if (typeof value !== 'string' || !(values as readonly string[]).includes(value)) {
+ throw new Error(`${where}: ${field} ${JSON.stringify(value)} is not one of ${values.join(', ')}`)
+ }
+ return value as T
+}
+
+function nullable(value: unknown, parse: (value: unknown) => T): T | null {
+ return value === null ? null : parse(value)
+}
+
+function wholeNumber(where: string, field: string, value: unknown): number {
+ if (typeof value !== 'number' || !Number.isInteger(value)) throw new Error(`${where}: ${field} is not a whole number`)
+ return value
+}
+
+const PHOTO_URL = /^\/media\/photos\/([^/]+)-400\.jpg$/
+
+// photoId reads the photo id out of a photo_url, which the server always
+// sends as /media/photos/{id}-400.jpg or null.
+function photoId(where: string, value: unknown): string | undefined {
+ if (value === null) return undefined
+ const match = typeof value === 'string' ? PHOTO_URL.exec(value) : null
+ if (!match?.[1]) throw new Error(`${where}: photo_url ${JSON.stringify(value)} is not a stored photo`)
+ return decodeURIComponent(match[1])
+}
+
+function parseDinner(where: string, body: unknown): Regular {
+ if (!isRecord(body) || typeof body.id !== 'string' || typeof body.name !== 'string') {
+ throw new Error(`${where}: response is not a dinner`)
+ }
+ if (typeof body.is_favorite !== 'boolean') throw new Error(`${where}: is_favorite is not a boolean`)
+ return {
+ id: body.id,
+ name: body.name,
+ method: nullable(body.method, (v) => oneOf(where, 'method', METHODS, v)),
+ minutes_total: nullable(body.minutes_total, (v) => wholeNumber(where, 'minutes_total', v)),
+ difficulty: nullable(body.difficulty, (v) => oneOf(where, 'difficulty', DIFFICULTIES, v)),
+ is_favorite: body.is_favorite,
+ photo_id: photoId(where, body.photo_url),
+ grounding_status: oneOf(where, 'grounding_status', GROUNDING_STATUSES, body.grounding_status),
+ }
+}
+
+function parseCandidate(where: string, body: unknown): RecipeCandidate {
+ if (
+ !isRecord(body) ||
+ typeof body.candidate_id !== 'string' ||
+ typeof body.title !== 'string' ||
+ typeof body.site_name !== 'string'
+ ) {
+ throw new Error(`${where}: response is not a recipe candidate`)
+ }
+ return {
+ candidate_id: body.candidate_id,
+ title: body.title,
+ site_name: body.site_name,
+ photo_id: photoId(where, body.photo_url),
+ minutes: nullable(body.minutes, (v) => wholeNumber(where, 'minutes', v)),
+ }
+}
+
+function dinnerPath(id: string): string {
+ return `${DINNERS_PATH}/${encodeURIComponent(id)}`
+}
+
+// useRegulars is the household's Regulars, in the server's order. While any
+// of them is still finding its recipe it is read again every
+// GROUNDING_POLL_MS, except while any change is in flight (whose settling
+// reads it again anyway), so a poll never overwrites a change being saved.
+// Watching the changes in flight re-renders the hook as each one starts and
+// settles, which pauses and resumes the poll.
+export function useRegulars() {
+ const { apiFetch } = useApi()
+ const changing = useIsMutating({ mutationKey: REGULARS_MUTATION_KEY }) > 0
+ return useQuery({
+ queryKey: REGULARS_LIST_KEY,
+ queryFn: async () => {
+ const where = `GET ${REGULARS_PATH}`
+ const body = await apiFetch(REGULARS_PATH)
+ if (!isRecord(body) || !Array.isArray(body.dinners)) throw new Error(`${where}: response has no dinners list`)
+ return body.dinners.map((dinner): CachedRegular => parseDinner(where, dinner))
+ },
+ select: shown,
+ refetchInterval: (query) => {
+ const list = query.state.data
+ if (list === undefined || changing) return false
+ return list.some((regular) => regular.grounding_status === 'pending') ? GROUNDING_POLL_MS : false
+ },
+ })
+}
+
+// changeOptimistically stops Regulars reads in flight, so they cannot
+// overwrite the optimistic list, then applies change to it.
+async function changeOptimistically(queryClient: QueryClient, change: (list: CachedRegular[]) => CachedRegular[]) {
+ await queryClient.cancelQueries({ queryKey: REGULARS_LIST_KEY })
+ setRegulars(queryClient, change)
+}
+
+function setRegulars(queryClient: QueryClient, change: (list: CachedRegular[]) => CachedRegular[]) {
+ queryClient.setQueryData(REGULARS_LIST_KEY, (list) => change(list ?? []))
+}
+
+// replace puts the server's answer for a dinner in its place in the list.
+function replace(queryClient: QueryClient, dinner: Regular) {
+ setRegulars(queryClient, (list) => list.map((regular) => (regular.id === dinner.id ? dinner : regular)))
+}
+
+// settle refetches the Regulars once the last change in flight is done, so
+// an earlier change's refetch never drops a later change's optimistic entry.
+function settle(queryClient: QueryClient) {
+ if (queryClient.isMutating({ mutationKey: REGULARS_MUTATION_KEY }) === 1) {
+ void queryClient.invalidateQueries({ queryKey: REGULARS_KEY })
+ }
+}
+
+let pendingIds = 0
+
+// useAddRegular adds a Regular by name, with or without a recipe link (POST
+// /api/v1/dinners). It shows in the list at once under its name and is
+// taken out again if the server refuses it.
+export function useAddRegular() {
+ const { apiFetch } = useApi()
+ const queryClient = useQueryClient()
+ return useMutation({
+ mutationKey: REGULARS_MUTATION_KEY,
+ mutationFn: async (add: NewRegular) =>
+ parseDinner(`POST ${DINNERS_PATH}`, await apiFetch(DINNERS_PATH, { method: 'POST', body: add })),
+ onMutate: async (add) => {
+ const id = `pending-${++pendingIds}`
+ const optimistic: CachedRegular = {
+ id,
+ name: add.name,
+ method: null,
+ minutes_total: null,
+ difficulty: null,
+ is_favorite: false,
+ photo_id: undefined,
+ grounding_status: 'pending',
+ pending: true,
+ }
+ await changeOptimistically(queryClient, (list) => [...list, optimistic])
+ return { id }
+ },
+ onSuccess: (dinner, _add, context) => {
+ setRegulars(queryClient, (list) => list.map((regular) => (regular.id === context.id ? dinner : regular)))
+ },
+ onError: (_error, _add, context) => {
+ if (context === undefined) return
+ setRegulars(queryClient, (list) => list.filter((regular) => regular.id !== context.id))
+ },
+ onSettled: () => settle(queryClient),
+ })
+}
+
+// useRemoveRegular archives a Regular (DELETE /api/v1/dinners/{id}). It
+// leaves the list at once and is put back in its place if the server
+// refuses.
+export function useRemoveRegular() {
+ const { apiFetch } = useApi()
+ const queryClient = useQueryClient()
+ return useMutation({
+ mutationKey: REGULARS_MUTATION_KEY,
+ mutationFn: async (regular: Regular) => {
+ await apiFetch(dinnerPath(regular.id), { method: 'DELETE' })
+ },
+ onMutate: async (regular) => {
+ await changeOptimistically(queryClient, (list) =>
+ list.map((r): CachedRegular => (r.id === regular.id ? { ...r, removing: true } : r)),
+ )
+ },
+ onSuccess: (_data, regular) => {
+ setRegulars(queryClient, (list) => list.filter((r) => r.id !== regular.id))
+ },
+ onError: (_error, regular) => {
+ setRegulars(queryClient, (list) => list.map((r) => (r.id === regular.id ? restored(r) : r)))
+ },
+ onSettled: () => settle(queryClient),
+ })
+}
+
+// useEditRegular saves changes to a Regular (PATCH /api/v1/dinners/{id})
+// and shows the server's answer once it is saved.
+export function useEditRegular() {
+ const { apiFetch } = useApi()
+ const queryClient = useQueryClient()
+ return useMutation({
+ mutationKey: REGULARS_MUTATION_KEY,
+ mutationFn: async ({ id, patch }: { id: string; patch: RegularPatch }) =>
+ parseDinner(`PATCH ${DINNERS_PATH}/{id}`, await apiFetch(dinnerPath(id), { method: 'PATCH', body: patch })),
+ onSuccess: (dinner) => replace(queryClient, dinner),
+ onSettled: () => settle(queryClient),
+ })
+}
+
+// useToggleFavorite toggles a Regular's favorite heart (POST
+// /api/v1/dinners/{id}/favorite). The heart changes at once and changes
+// back if the server refuses.
+export function useToggleFavorite() {
+ const { apiFetch } = useApi()
+ const queryClient = useQueryClient()
+ const set = (id: string, is_favorite: boolean) =>
+ setRegulars(queryClient, (list) => list.map((r) => (r.id === id ? { ...r, is_favorite } : r)))
+ return useMutation({
+ mutationKey: REGULARS_MUTATION_KEY,
+ mutationFn: async (regular: Regular) =>
+ parseDinner(
+ `POST ${DINNERS_PATH}/{id}/favorite`,
+ await apiFetch(`${dinnerPath(regular.id)}/favorite`, { method: 'POST' }),
+ ),
+ onMutate: async (regular) => {
+ await changeOptimistically(queryClient, (list) =>
+ list.map((r) => (r.id === regular.id ? { ...r, is_favorite: !regular.is_favorite } : r)),
+ )
+ },
+ onSuccess: (dinner) => replace(queryClient, dinner),
+ onError: (_error, regular) => set(regular.id, regular.is_favorite),
+ onSettled: () => settle(queryClient),
+ })
+}
+
+// useGroundRegular fixes a Regular's recipe (POST /api/v1/dinners/{id}/ground)
+// with a candidate, a pasted link or a recipe typed in. A candidate or link
+// is read in the request, which can take up to a minute and a half.
+export function useGroundRegular() {
+ const { apiFetch } = useApi()
+ const queryClient = useQueryClient()
+ return useMutation({
+ mutationKey: REGULARS_MUTATION_KEY,
+ mutationFn: async ({ id, fix }: { id: string; fix: RecipeFix }) =>
+ parseDinner(
+ `POST ${DINNERS_PATH}/{id}/ground`,
+ await apiFetch(`${dinnerPath(id)}/ground`, { method: 'POST', body: fix }),
+ ),
+ onSuccess: (dinner) => replace(queryClient, dinner),
+ onSettled: () => settle(queryClient),
+ })
+}
+
+// useRecipeCandidates is up to three recipe pages the dinner could be
+// grounded in, best first (GET /api/v1/dinners/{id}/recipe-candidates).
+export function useRecipeCandidates(id: string) {
+ const { apiFetch } = useApi()
+ return useQuery({
+ queryKey: ['dinners', 'candidates', id],
+ queryFn: async () => {
+ const path = `${dinnerPath(id)}/recipe-candidates`
+ const where = `GET ${DINNERS_PATH}/{id}/recipe-candidates`
+ const body = await apiFetch(path)
+ if (!isRecord(body) || !Array.isArray(body.candidates)) throw new Error(`${where}: response has no candidates list`)
+ return body.candidates.map((candidate) => parseCandidate(where, candidate))
+ },
+ })
+}
diff --git a/web/src/dinners/letterFolds.json b/web/src/dinners/letterFolds.json
new file mode 100644
index 0000000..5be5eaf
--- /dev/null
+++ b/web/src/dinners/letterFolds.json
@@ -0,0 +1,1167 @@
+{
+ "\u00c0": "a",
+ "\u00c1": "a",
+ "\u00c2": "a",
+ "\u00c3": "a",
+ "\u00c4": "a",
+ "\u00c5": "a",
+ "\u00c6": "ae",
+ "\u00c7": "c",
+ "\u00c8": "e",
+ "\u00c9": "e",
+ "\u00ca": "e",
+ "\u00cb": "e",
+ "\u00cc": "i",
+ "\u00cd": "i",
+ "\u00ce": "i",
+ "\u00cf": "i",
+ "\u00d0": "d",
+ "\u00d1": "n",
+ "\u00d2": "o",
+ "\u00d3": "o",
+ "\u00d4": "o",
+ "\u00d5": "o",
+ "\u00d6": "o",
+ "\u00d8": "o",
+ "\u00d9": "u",
+ "\u00da": "u",
+ "\u00db": "u",
+ "\u00dc": "u",
+ "\u00dd": "y",
+ "\u00de": "th",
+ "\u00df": "ss",
+ "\u00e0": "a",
+ "\u00e1": "a",
+ "\u00e2": "a",
+ "\u00e3": "a",
+ "\u00e4": "a",
+ "\u00e5": "a",
+ "\u00e6": "ae",
+ "\u00e7": "c",
+ "\u00e8": "e",
+ "\u00e9": "e",
+ "\u00ea": "e",
+ "\u00eb": "e",
+ "\u00ec": "i",
+ "\u00ed": "i",
+ "\u00ee": "i",
+ "\u00ef": "i",
+ "\u00f0": "d",
+ "\u00f1": "n",
+ "\u00f2": "o",
+ "\u00f3": "o",
+ "\u00f4": "o",
+ "\u00f5": "o",
+ "\u00f6": "o",
+ "\u00f8": "o",
+ "\u00f9": "u",
+ "\u00fa": "u",
+ "\u00fb": "u",
+ "\u00fc": "u",
+ "\u00fd": "y",
+ "\u00fe": "th",
+ "\u00ff": "y",
+ "\u0100": "a",
+ "\u0101": "a",
+ "\u0102": "a",
+ "\u0103": "a",
+ "\u0104": "a",
+ "\u0105": "a",
+ "\u0106": "c",
+ "\u0107": "c",
+ "\u0108": "c",
+ "\u0109": "c",
+ "\u010a": "c",
+ "\u010b": "c",
+ "\u010c": "c",
+ "\u010d": "c",
+ "\u010e": "d",
+ "\u010f": "d",
+ "\u0110": "d",
+ "\u0111": "d",
+ "\u0112": "e",
+ "\u0113": "e",
+ "\u0114": "e",
+ "\u0115": "e",
+ "\u0116": "e",
+ "\u0117": "e",
+ "\u0118": "e",
+ "\u0119": "e",
+ "\u011a": "e",
+ "\u011b": "e",
+ "\u011c": "g",
+ "\u011d": "g",
+ "\u011e": "g",
+ "\u011f": "g",
+ "\u0120": "g",
+ "\u0121": "g",
+ "\u0122": "g",
+ "\u0123": "g",
+ "\u0124": "h",
+ "\u0125": "h",
+ "\u0126": "h",
+ "\u0127": "h",
+ "\u0128": "i",
+ "\u0129": "i",
+ "\u012a": "i",
+ "\u012b": "i",
+ "\u012c": "i",
+ "\u012d": "i",
+ "\u012e": "i",
+ "\u012f": "i",
+ "\u0130": "i",
+ "\u0131": "i",
+ "\u0132": "ij",
+ "\u0133": "ij",
+ "\u0134": "j",
+ "\u0135": "j",
+ "\u0136": "k",
+ "\u0137": "k",
+ "\u0139": "l",
+ "\u013a": "l",
+ "\u013b": "l",
+ "\u013c": "l",
+ "\u013d": "l",
+ "\u013e": "l",
+ "\u013f": "l",
+ "\u0140": "l",
+ "\u0141": "l",
+ "\u0142": "l",
+ "\u0143": "n",
+ "\u0144": "n",
+ "\u0145": "n",
+ "\u0146": "n",
+ "\u0147": "n",
+ "\u0148": "n",
+ "\u0149": "n",
+ "\u014c": "o",
+ "\u014d": "o",
+ "\u014e": "o",
+ "\u014f": "o",
+ "\u0150": "o",
+ "\u0151": "o",
+ "\u0152": "oe",
+ "\u0153": "oe",
+ "\u0154": "r",
+ "\u0155": "r",
+ "\u0156": "r",
+ "\u0157": "r",
+ "\u0158": "r",
+ "\u0159": "r",
+ "\u015a": "s",
+ "\u015b": "s",
+ "\u015c": "s",
+ "\u015d": "s",
+ "\u015e": "s",
+ "\u015f": "s",
+ "\u0160": "s",
+ "\u0161": "s",
+ "\u0162": "t",
+ "\u0163": "t",
+ "\u0164": "t",
+ "\u0165": "t",
+ "\u0166": "t",
+ "\u0167": "t",
+ "\u0168": "u",
+ "\u0169": "u",
+ "\u016a": "u",
+ "\u016b": "u",
+ "\u016c": "u",
+ "\u016d": "u",
+ "\u016e": "u",
+ "\u016f": "u",
+ "\u0170": "u",
+ "\u0171": "u",
+ "\u0172": "u",
+ "\u0173": "u",
+ "\u0174": "w",
+ "\u0175": "w",
+ "\u0176": "y",
+ "\u0177": "y",
+ "\u0178": "y",
+ "\u0179": "z",
+ "\u017a": "z",
+ "\u017b": "z",
+ "\u017c": "z",
+ "\u017d": "z",
+ "\u017e": "z",
+ "\u0180": "b",
+ "\u0181": "b",
+ "\u0182": "b",
+ "\u0183": "b",
+ "\u0187": "c",
+ "\u0188": "c",
+ "\u018a": "d",
+ "\u018b": "d",
+ "\u018c": "d",
+ "\u0191": "f",
+ "\u0192": "f",
+ "\u0193": "g",
+ "\u0197": "i",
+ "\u0198": "k",
+ "\u0199": "k",
+ "\u019a": "l",
+ "\u019d": "n",
+ "\u019e": "n",
+ "\u019f": "o",
+ "\u01a0": "o",
+ "\u01a1": "o",
+ "\u01a4": "p",
+ "\u01a5": "p",
+ "\u01ab": "t",
+ "\u01ac": "t",
+ "\u01ad": "t",
+ "\u01ae": "t",
+ "\u01af": "u",
+ "\u01b0": "u",
+ "\u01b2": "v",
+ "\u01b3": "y",
+ "\u01b4": "y",
+ "\u01b5": "z",
+ "\u01b6": "z",
+ "\u01c5": "d",
+ "\u01c8": "l",
+ "\u01cb": "n",
+ "\u01cd": "a",
+ "\u01ce": "a",
+ "\u01cf": "i",
+ "\u01d0": "i",
+ "\u01d1": "o",
+ "\u01d2": "o",
+ "\u01d3": "u",
+ "\u01d4": "u",
+ "\u01d5": "u",
+ "\u01d6": "u",
+ "\u01d7": "u",
+ "\u01d8": "u",
+ "\u01d9": "u",
+ "\u01da": "u",
+ "\u01db": "u",
+ "\u01dc": "u",
+ "\u01de": "a",
+ "\u01df": "a",
+ "\u01e0": "a",
+ "\u01e1": "a",
+ "\u01e2": "ae",
+ "\u01e3": "ae",
+ "\u01e4": "g",
+ "\u01e5": "g",
+ "\u01e6": "g",
+ "\u01e7": "g",
+ "\u01e8": "k",
+ "\u01e9": "k",
+ "\u01ea": "o",
+ "\u01eb": "o",
+ "\u01ec": "o",
+ "\u01ed": "o",
+ "\u01ee": "\u0292",
+ "\u01ef": "\u0292",
+ "\u01f0": "j",
+ "\u01f2": "d",
+ "\u01f4": "g",
+ "\u01f5": "g",
+ "\u01f8": "n",
+ "\u01f9": "n",
+ "\u01fa": "a",
+ "\u01fb": "a",
+ "\u01fc": "ae",
+ "\u01fd": "ae",
+ "\u01fe": "o",
+ "\u01ff": "o",
+ "\u0200": "a",
+ "\u0201": "a",
+ "\u0202": "a",
+ "\u0203": "a",
+ "\u0204": "e",
+ "\u0205": "e",
+ "\u0206": "e",
+ "\u0207": "e",
+ "\u0208": "i",
+ "\u0209": "i",
+ "\u020a": "i",
+ "\u020b": "i",
+ "\u020c": "o",
+ "\u020d": "o",
+ "\u020e": "o",
+ "\u020f": "o",
+ "\u0210": "r",
+ "\u0211": "r",
+ "\u0212": "r",
+ "\u0213": "r",
+ "\u0214": "u",
+ "\u0215": "u",
+ "\u0216": "u",
+ "\u0217": "u",
+ "\u0218": "s",
+ "\u0219": "s",
+ "\u021a": "t",
+ "\u021b": "t",
+ "\u021e": "h",
+ "\u021f": "h",
+ "\u0220": "n",
+ "\u0221": "d",
+ "\u0224": "z",
+ "\u0225": "z",
+ "\u0226": "a",
+ "\u0227": "a",
+ "\u0228": "e",
+ "\u0229": "e",
+ "\u022a": "o",
+ "\u022b": "o",
+ "\u022c": "o",
+ "\u022d": "o",
+ "\u022e": "o",
+ "\u022f": "o",
+ "\u0230": "o",
+ "\u0231": "o",
+ "\u0232": "y",
+ "\u0233": "y",
+ "\u0234": "l",
+ "\u0235": "n",
+ "\u0236": "t",
+ "\u023a": "a",
+ "\u023b": "c",
+ "\u023c": "c",
+ "\u023d": "l",
+ "\u023e": "t",
+ "\u023f": "s",
+ "\u0240": "z",
+ "\u0243": "b",
+ "\u0246": "e",
+ "\u0247": "e",
+ "\u0248": "j",
+ "\u0249": "j",
+ "\u024b": "q",
+ "\u024c": "r",
+ "\u024d": "r",
+ "\u024e": "y",
+ "\u024f": "y",
+ "\u0253": "b",
+ "\u0255": "c",
+ "\u0256": "d",
+ "\u0257": "d",
+ "\u0260": "g",
+ "\u0266": "h",
+ "\u0268": "i",
+ "\u026b": "l",
+ "\u026c": "l",
+ "\u026d": "l",
+ "\u0271": "m",
+ "\u0272": "n",
+ "\u0273": "n",
+ "\u027c": "r",
+ "\u027d": "r",
+ "\u027e": "r",
+ "\u0282": "s",
+ "\u0288": "t",
+ "\u028b": "v",
+ "\u0290": "z",
+ "\u0291": "z",
+ "\u029d": "j",
+ "\u02a0": "q",
+ "\u0386": "\u03b1",
+ "\u0388": "\u03b5",
+ "\u0389": "\u03b7",
+ "\u038a": "\u03b9",
+ "\u038c": "\u03bf",
+ "\u038e": "\u03c5",
+ "\u038f": "\u03c9",
+ "\u0390": "\u03b9",
+ "\u03aa": "\u03b9",
+ "\u03ab": "\u03c5",
+ "\u03ac": "\u03b1",
+ "\u03ad": "\u03b5",
+ "\u03ae": "\u03b7",
+ "\u03af": "\u03b9",
+ "\u03b0": "\u03c5",
+ "\u03ca": "\u03b9",
+ "\u03cb": "\u03c5",
+ "\u03cc": "\u03bf",
+ "\u03cd": "\u03c5",
+ "\u03ce": "\u03c9",
+ "\u03d3": "\u03d2",
+ "\u03d4": "\u03d2",
+ "\u0400": "\u0435",
+ "\u0401": "\u0435",
+ "\u0403": "\u0433",
+ "\u0407": "\u0456",
+ "\u040c": "\u043a",
+ "\u040d": "\u0438",
+ "\u040e": "\u0443",
+ "\u0419": "\u0438",
+ "\u0439": "\u0438",
+ "\u0450": "\u0435",
+ "\u0451": "\u0435",
+ "\u0453": "\u0433",
+ "\u0457": "\u0456",
+ "\u045c": "\u043a",
+ "\u045d": "\u0438",
+ "\u045e": "\u0443",
+ "\u0476": "\u0475",
+ "\u0477": "\u0475",
+ "\u04c1": "\u0436",
+ "\u04c2": "\u0436",
+ "\u04d0": "\u0430",
+ "\u04d1": "\u0430",
+ "\u04d2": "\u0430",
+ "\u04d3": "\u0430",
+ "\u04d6": "\u0435",
+ "\u04d7": "\u0435",
+ "\u04da": "\u04d9",
+ "\u04db": "\u04d9",
+ "\u04dc": "\u0436",
+ "\u04dd": "\u0436",
+ "\u04de": "\u0437",
+ "\u04df": "\u0437",
+ "\u04e2": "\u0438",
+ "\u04e3": "\u0438",
+ "\u04e4": "\u0438",
+ "\u04e5": "\u0438",
+ "\u04e6": "\u043e",
+ "\u04e7": "\u043e",
+ "\u04ea": "\u04e9",
+ "\u04eb": "\u04e9",
+ "\u04ec": "\u044d",
+ "\u04ed": "\u044d",
+ "\u04ee": "\u0443",
+ "\u04ef": "\u0443",
+ "\u04f0": "\u0443",
+ "\u04f1": "\u0443",
+ "\u04f2": "\u0443",
+ "\u04f3": "\u0443",
+ "\u04f4": "\u0447",
+ "\u04f5": "\u0447",
+ "\u04f8": "\u044b",
+ "\u04f9": "\u044b",
+ "\u0622": "\u0627",
+ "\u0623": "\u0627",
+ "\u0624": "\u0648",
+ "\u0625": "\u0627",
+ "\u0626": "\u064a",
+ "\u06c0": "\u06d5",
+ "\u06c2": "\u06c1",
+ "\u06d3": "\u06d2",
+ "\u0929": "\u0928",
+ "\u0931": "\u0930",
+ "\u0934": "\u0933",
+ "\u0958": "\u0915",
+ "\u0959": "\u0916",
+ "\u095a": "\u0917",
+ "\u095b": "\u091c",
+ "\u095c": "\u0921",
+ "\u095d": "\u0922",
+ "\u095e": "\u092b",
+ "\u095f": "\u092f",
+ "\u09dc": "\u09a1",
+ "\u09dd": "\u09a2",
+ "\u09df": "\u09af",
+ "\u0a33": "\u0a32",
+ "\u0a36": "\u0a38",
+ "\u0a59": "\u0a16",
+ "\u0a5a": "\u0a17",
+ "\u0a5b": "\u0a1c",
+ "\u0a5e": "\u0a2b",
+ "\u0b5c": "\u0b21",
+ "\u0b5d": "\u0b22",
+ "\u0f43": "\u0f42",
+ "\u0f4d": "\u0f4c",
+ "\u0f52": "\u0f51",
+ "\u0f57": "\u0f56",
+ "\u0f5c": "\u0f5b",
+ "\u0f69": "\u0f40",
+ "\u1026": "\u1025",
+ "\u1d6c": "b",
+ "\u1d6d": "d",
+ "\u1d6e": "f",
+ "\u1d6f": "m",
+ "\u1d70": "n",
+ "\u1d71": "p",
+ "\u1d72": "r",
+ "\u1d73": "r",
+ "\u1d74": "s",
+ "\u1d75": "t",
+ "\u1d76": "z",
+ "\u1d7d": "p",
+ "\u1d80": "b",
+ "\u1d81": "d",
+ "\u1d82": "f",
+ "\u1d83": "g",
+ "\u1d84": "k",
+ "\u1d85": "l",
+ "\u1d86": "m",
+ "\u1d87": "n",
+ "\u1d88": "p",
+ "\u1d89": "r",
+ "\u1d8a": "s",
+ "\u1d8c": "v",
+ "\u1d8d": "x",
+ "\u1d8e": "z",
+ "\u1d8f": "a",
+ "\u1d91": "d",
+ "\u1d92": "e",
+ "\u1d96": "i",
+ "\u1d99": "u",
+ "\u1e00": "a",
+ "\u1e01": "a",
+ "\u1e02": "b",
+ "\u1e03": "b",
+ "\u1e04": "b",
+ "\u1e05": "b",
+ "\u1e06": "b",
+ "\u1e07": "b",
+ "\u1e08": "c",
+ "\u1e09": "c",
+ "\u1e0a": "d",
+ "\u1e0b": "d",
+ "\u1e0c": "d",
+ "\u1e0d": "d",
+ "\u1e0e": "d",
+ "\u1e0f": "d",
+ "\u1e10": "d",
+ "\u1e11": "d",
+ "\u1e12": "d",
+ "\u1e13": "d",
+ "\u1e14": "e",
+ "\u1e15": "e",
+ "\u1e16": "e",
+ "\u1e17": "e",
+ "\u1e18": "e",
+ "\u1e19": "e",
+ "\u1e1a": "e",
+ "\u1e1b": "e",
+ "\u1e1c": "e",
+ "\u1e1d": "e",
+ "\u1e1e": "f",
+ "\u1e1f": "f",
+ "\u1e20": "g",
+ "\u1e21": "g",
+ "\u1e22": "h",
+ "\u1e23": "h",
+ "\u1e24": "h",
+ "\u1e25": "h",
+ "\u1e26": "h",
+ "\u1e27": "h",
+ "\u1e28": "h",
+ "\u1e29": "h",
+ "\u1e2a": "h",
+ "\u1e2b": "h",
+ "\u1e2c": "i",
+ "\u1e2d": "i",
+ "\u1e2e": "i",
+ "\u1e2f": "i",
+ "\u1e30": "k",
+ "\u1e31": "k",
+ "\u1e32": "k",
+ "\u1e33": "k",
+ "\u1e34": "k",
+ "\u1e35": "k",
+ "\u1e36": "l",
+ "\u1e37": "l",
+ "\u1e38": "l",
+ "\u1e39": "l",
+ "\u1e3a": "l",
+ "\u1e3b": "l",
+ "\u1e3c": "l",
+ "\u1e3d": "l",
+ "\u1e3e": "m",
+ "\u1e3f": "m",
+ "\u1e40": "m",
+ "\u1e41": "m",
+ "\u1e42": "m",
+ "\u1e43": "m",
+ "\u1e44": "n",
+ "\u1e45": "n",
+ "\u1e46": "n",
+ "\u1e47": "n",
+ "\u1e48": "n",
+ "\u1e49": "n",
+ "\u1e4a": "n",
+ "\u1e4b": "n",
+ "\u1e4c": "o",
+ "\u1e4d": "o",
+ "\u1e4e": "o",
+ "\u1e4f": "o",
+ "\u1e50": "o",
+ "\u1e51": "o",
+ "\u1e52": "o",
+ "\u1e53": "o",
+ "\u1e54": "p",
+ "\u1e55": "p",
+ "\u1e56": "p",
+ "\u1e57": "p",
+ "\u1e58": "r",
+ "\u1e59": "r",
+ "\u1e5a": "r",
+ "\u1e5b": "r",
+ "\u1e5c": "r",
+ "\u1e5d": "r",
+ "\u1e5e": "r",
+ "\u1e5f": "r",
+ "\u1e60": "s",
+ "\u1e61": "s",
+ "\u1e62": "s",
+ "\u1e63": "s",
+ "\u1e64": "s",
+ "\u1e65": "s",
+ "\u1e66": "s",
+ "\u1e67": "s",
+ "\u1e68": "s",
+ "\u1e69": "s",
+ "\u1e6a": "t",
+ "\u1e6b": "t",
+ "\u1e6c": "t",
+ "\u1e6d": "t",
+ "\u1e6e": "t",
+ "\u1e6f": "t",
+ "\u1e70": "t",
+ "\u1e71": "t",
+ "\u1e72": "u",
+ "\u1e73": "u",
+ "\u1e74": "u",
+ "\u1e75": "u",
+ "\u1e76": "u",
+ "\u1e77": "u",
+ "\u1e78": "u",
+ "\u1e79": "u",
+ "\u1e7a": "u",
+ "\u1e7b": "u",
+ "\u1e7c": "v",
+ "\u1e7d": "v",
+ "\u1e7e": "v",
+ "\u1e7f": "v",
+ "\u1e80": "w",
+ "\u1e81": "w",
+ "\u1e82": "w",
+ "\u1e83": "w",
+ "\u1e84": "w",
+ "\u1e85": "w",
+ "\u1e86": "w",
+ "\u1e87": "w",
+ "\u1e88": "w",
+ "\u1e89": "w",
+ "\u1e8a": "x",
+ "\u1e8b": "x",
+ "\u1e8c": "x",
+ "\u1e8d": "x",
+ "\u1e8e": "y",
+ "\u1e8f": "y",
+ "\u1e90": "z",
+ "\u1e91": "z",
+ "\u1e92": "z",
+ "\u1e93": "z",
+ "\u1e94": "z",
+ "\u1e95": "z",
+ "\u1e96": "h",
+ "\u1e97": "t",
+ "\u1e98": "w",
+ "\u1e99": "y",
+ "\u1e9a": "a",
+ "\u1e9b": "\u017f",
+ "\u1e9e": "ss",
+ "\u1ea0": "a",
+ "\u1ea1": "a",
+ "\u1ea2": "a",
+ "\u1ea3": "a",
+ "\u1ea4": "a",
+ "\u1ea5": "a",
+ "\u1ea6": "a",
+ "\u1ea7": "a",
+ "\u1ea8": "a",
+ "\u1ea9": "a",
+ "\u1eaa": "a",
+ "\u1eab": "a",
+ "\u1eac": "a",
+ "\u1ead": "a",
+ "\u1eae": "a",
+ "\u1eaf": "a",
+ "\u1eb0": "a",
+ "\u1eb1": "a",
+ "\u1eb2": "a",
+ "\u1eb3": "a",
+ "\u1eb4": "a",
+ "\u1eb5": "a",
+ "\u1eb6": "a",
+ "\u1eb7": "a",
+ "\u1eb8": "e",
+ "\u1eb9": "e",
+ "\u1eba": "e",
+ "\u1ebb": "e",
+ "\u1ebc": "e",
+ "\u1ebd": "e",
+ "\u1ebe": "e",
+ "\u1ebf": "e",
+ "\u1ec0": "e",
+ "\u1ec1": "e",
+ "\u1ec2": "e",
+ "\u1ec3": "e",
+ "\u1ec4": "e",
+ "\u1ec5": "e",
+ "\u1ec6": "e",
+ "\u1ec7": "e",
+ "\u1ec8": "i",
+ "\u1ec9": "i",
+ "\u1eca": "i",
+ "\u1ecb": "i",
+ "\u1ecc": "o",
+ "\u1ecd": "o",
+ "\u1ece": "o",
+ "\u1ecf": "o",
+ "\u1ed0": "o",
+ "\u1ed1": "o",
+ "\u1ed2": "o",
+ "\u1ed3": "o",
+ "\u1ed4": "o",
+ "\u1ed5": "o",
+ "\u1ed6": "o",
+ "\u1ed7": "o",
+ "\u1ed8": "o",
+ "\u1ed9": "o",
+ "\u1eda": "o",
+ "\u1edb": "o",
+ "\u1edc": "o",
+ "\u1edd": "o",
+ "\u1ede": "o",
+ "\u1edf": "o",
+ "\u1ee0": "o",
+ "\u1ee1": "o",
+ "\u1ee2": "o",
+ "\u1ee3": "o",
+ "\u1ee4": "u",
+ "\u1ee5": "u",
+ "\u1ee6": "u",
+ "\u1ee7": "u",
+ "\u1ee8": "u",
+ "\u1ee9": "u",
+ "\u1eea": "u",
+ "\u1eeb": "u",
+ "\u1eec": "u",
+ "\u1eed": "u",
+ "\u1eee": "u",
+ "\u1eef": "u",
+ "\u1ef0": "u",
+ "\u1ef1": "u",
+ "\u1ef2": "y",
+ "\u1ef3": "y",
+ "\u1ef4": "y",
+ "\u1ef5": "y",
+ "\u1ef6": "y",
+ "\u1ef7": "y",
+ "\u1ef8": "y",
+ "\u1ef9": "y",
+ "\u1efe": "y",
+ "\u1eff": "y",
+ "\u1f00": "\u03b1",
+ "\u1f01": "\u03b1",
+ "\u1f02": "\u03b1",
+ "\u1f03": "\u03b1",
+ "\u1f04": "\u03b1",
+ "\u1f05": "\u03b1",
+ "\u1f06": "\u03b1",
+ "\u1f07": "\u03b1",
+ "\u1f08": "\u03b1",
+ "\u1f09": "\u03b1",
+ "\u1f0a": "\u03b1",
+ "\u1f0b": "\u03b1",
+ "\u1f0c": "\u03b1",
+ "\u1f0d": "\u03b1",
+ "\u1f0e": "\u03b1",
+ "\u1f0f": "\u03b1",
+ "\u1f10": "\u03b5",
+ "\u1f11": "\u03b5",
+ "\u1f12": "\u03b5",
+ "\u1f13": "\u03b5",
+ "\u1f14": "\u03b5",
+ "\u1f15": "\u03b5",
+ "\u1f18": "\u03b5",
+ "\u1f19": "\u03b5",
+ "\u1f1a": "\u03b5",
+ "\u1f1b": "\u03b5",
+ "\u1f1c": "\u03b5",
+ "\u1f1d": "\u03b5",
+ "\u1f20": "\u03b7",
+ "\u1f21": "\u03b7",
+ "\u1f22": "\u03b7",
+ "\u1f23": "\u03b7",
+ "\u1f24": "\u03b7",
+ "\u1f25": "\u03b7",
+ "\u1f26": "\u03b7",
+ "\u1f27": "\u03b7",
+ "\u1f28": "\u03b7",
+ "\u1f29": "\u03b7",
+ "\u1f2a": "\u03b7",
+ "\u1f2b": "\u03b7",
+ "\u1f2c": "\u03b7",
+ "\u1f2d": "\u03b7",
+ "\u1f2e": "\u03b7",
+ "\u1f2f": "\u03b7",
+ "\u1f30": "\u03b9",
+ "\u1f31": "\u03b9",
+ "\u1f32": "\u03b9",
+ "\u1f33": "\u03b9",
+ "\u1f34": "\u03b9",
+ "\u1f35": "\u03b9",
+ "\u1f36": "\u03b9",
+ "\u1f37": "\u03b9",
+ "\u1f38": "\u03b9",
+ "\u1f39": "\u03b9",
+ "\u1f3a": "\u03b9",
+ "\u1f3b": "\u03b9",
+ "\u1f3c": "\u03b9",
+ "\u1f3d": "\u03b9",
+ "\u1f3e": "\u03b9",
+ "\u1f3f": "\u03b9",
+ "\u1f40": "\u03bf",
+ "\u1f41": "\u03bf",
+ "\u1f42": "\u03bf",
+ "\u1f43": "\u03bf",
+ "\u1f44": "\u03bf",
+ "\u1f45": "\u03bf",
+ "\u1f48": "\u03bf",
+ "\u1f49": "\u03bf",
+ "\u1f4a": "\u03bf",
+ "\u1f4b": "\u03bf",
+ "\u1f4c": "\u03bf",
+ "\u1f4d": "\u03bf",
+ "\u1f50": "\u03c5",
+ "\u1f51": "\u03c5",
+ "\u1f52": "\u03c5",
+ "\u1f53": "\u03c5",
+ "\u1f54": "\u03c5",
+ "\u1f55": "\u03c5",
+ "\u1f56": "\u03c5",
+ "\u1f57": "\u03c5",
+ "\u1f59": "\u03c5",
+ "\u1f5b": "\u03c5",
+ "\u1f5d": "\u03c5",
+ "\u1f5f": "\u03c5",
+ "\u1f60": "\u03c9",
+ "\u1f61": "\u03c9",
+ "\u1f62": "\u03c9",
+ "\u1f63": "\u03c9",
+ "\u1f64": "\u03c9",
+ "\u1f65": "\u03c9",
+ "\u1f66": "\u03c9",
+ "\u1f67": "\u03c9",
+ "\u1f68": "\u03c9",
+ "\u1f69": "\u03c9",
+ "\u1f6a": "\u03c9",
+ "\u1f6b": "\u03c9",
+ "\u1f6c": "\u03c9",
+ "\u1f6d": "\u03c9",
+ "\u1f6e": "\u03c9",
+ "\u1f6f": "\u03c9",
+ "\u1f70": "\u03b1",
+ "\u1f71": "\u03b1",
+ "\u1f72": "\u03b5",
+ "\u1f73": "\u03b5",
+ "\u1f74": "\u03b7",
+ "\u1f75": "\u03b7",
+ "\u1f76": "\u03b9",
+ "\u1f77": "\u03b9",
+ "\u1f78": "\u03bf",
+ "\u1f79": "\u03bf",
+ "\u1f7a": "\u03c5",
+ "\u1f7b": "\u03c5",
+ "\u1f7c": "\u03c9",
+ "\u1f7d": "\u03c9",
+ "\u1f80": "\u03b1",
+ "\u1f81": "\u03b1",
+ "\u1f82": "\u03b1",
+ "\u1f83": "\u03b1",
+ "\u1f84": "\u03b1",
+ "\u1f85": "\u03b1",
+ "\u1f86": "\u03b1",
+ "\u1f87": "\u03b1",
+ "\u1f88": "\u03b1",
+ "\u1f89": "\u03b1",
+ "\u1f8a": "\u03b1",
+ "\u1f8b": "\u03b1",
+ "\u1f8c": "\u03b1",
+ "\u1f8d": "\u03b1",
+ "\u1f8e": "\u03b1",
+ "\u1f8f": "\u03b1",
+ "\u1f90": "\u03b7",
+ "\u1f91": "\u03b7",
+ "\u1f92": "\u03b7",
+ "\u1f93": "\u03b7",
+ "\u1f94": "\u03b7",
+ "\u1f95": "\u03b7",
+ "\u1f96": "\u03b7",
+ "\u1f97": "\u03b7",
+ "\u1f98": "\u03b7",
+ "\u1f99": "\u03b7",
+ "\u1f9a": "\u03b7",
+ "\u1f9b": "\u03b7",
+ "\u1f9c": "\u03b7",
+ "\u1f9d": "\u03b7",
+ "\u1f9e": "\u03b7",
+ "\u1f9f": "\u03b7",
+ "\u1fa0": "\u03c9",
+ "\u1fa1": "\u03c9",
+ "\u1fa2": "\u03c9",
+ "\u1fa3": "\u03c9",
+ "\u1fa4": "\u03c9",
+ "\u1fa5": "\u03c9",
+ "\u1fa6": "\u03c9",
+ "\u1fa7": "\u03c9",
+ "\u1fa8": "\u03c9",
+ "\u1fa9": "\u03c9",
+ "\u1faa": "\u03c9",
+ "\u1fab": "\u03c9",
+ "\u1fac": "\u03c9",
+ "\u1fad": "\u03c9",
+ "\u1fae": "\u03c9",
+ "\u1faf": "\u03c9",
+ "\u1fb0": "\u03b1",
+ "\u1fb1": "\u03b1",
+ "\u1fb2": "\u03b1",
+ "\u1fb3": "\u03b1",
+ "\u1fb4": "\u03b1",
+ "\u1fb6": "\u03b1",
+ "\u1fb7": "\u03b1",
+ "\u1fb8": "\u03b1",
+ "\u1fb9": "\u03b1",
+ "\u1fba": "\u03b1",
+ "\u1fbb": "\u03b1",
+ "\u1fbc": "\u03b1",
+ "\u1fc2": "\u03b7",
+ "\u1fc3": "\u03b7",
+ "\u1fc4": "\u03b7",
+ "\u1fc6": "\u03b7",
+ "\u1fc7": "\u03b7",
+ "\u1fc8": "\u03b5",
+ "\u1fc9": "\u03b5",
+ "\u1fca": "\u03b7",
+ "\u1fcb": "\u03b7",
+ "\u1fcc": "\u03b7",
+ "\u1fd0": "\u03b9",
+ "\u1fd1": "\u03b9",
+ "\u1fd2": "\u03b9",
+ "\u1fd3": "\u03b9",
+ "\u1fd6": "\u03b9",
+ "\u1fd7": "\u03b9",
+ "\u1fd8": "\u03b9",
+ "\u1fd9": "\u03b9",
+ "\u1fda": "\u03b9",
+ "\u1fdb": "\u03b9",
+ "\u1fe0": "\u03c5",
+ "\u1fe1": "\u03c5",
+ "\u1fe2": "\u03c5",
+ "\u1fe3": "\u03c5",
+ "\u1fe4": "\u03c1",
+ "\u1fe5": "\u03c1",
+ "\u1fe6": "\u03c5",
+ "\u1fe7": "\u03c5",
+ "\u1fe8": "\u03c5",
+ "\u1fe9": "\u03c5",
+ "\u1fea": "\u03c5",
+ "\u1feb": "\u03c5",
+ "\u1fec": "\u03c1",
+ "\u1ff2": "\u03c9",
+ "\u1ff3": "\u03c9",
+ "\u1ff4": "\u03c9",
+ "\u1ff6": "\u03c9",
+ "\u1ff7": "\u03c9",
+ "\u1ff8": "\u03bf",
+ "\u1ff9": "\u03bf",
+ "\u1ffa": "\u03c9",
+ "\u1ffb": "\u03c9",
+ "\u1ffc": "\u03c9",
+ "\u212b": "a",
+ "\u2c60": "l",
+ "\u2c61": "l",
+ "\u2c62": "l",
+ "\u2c63": "p",
+ "\u2c64": "r",
+ "\u2c65": "a",
+ "\u2c66": "t",
+ "\u2c67": "h",
+ "\u2c68": "h",
+ "\u2c69": "k",
+ "\u2c6a": "k",
+ "\u2c6b": "z",
+ "\u2c6c": "z",
+ "\u2c6e": "m",
+ "\u2c71": "v",
+ "\u2c72": "w",
+ "\u2c73": "w",
+ "\u2c74": "v",
+ "\u2c78": "e",
+ "\u2c7a": "o",
+ "\u2c7e": "s",
+ "\u2c7f": "z",
+ "\u304c": "\u304b",
+ "\u304e": "\u304d",
+ "\u3050": "\u304f",
+ "\u3052": "\u3051",
+ "\u3054": "\u3053",
+ "\u3056": "\u3055",
+ "\u3058": "\u3057",
+ "\u305a": "\u3059",
+ "\u305c": "\u305b",
+ "\u305e": "\u305d",
+ "\u3060": "\u305f",
+ "\u3062": "\u3061",
+ "\u3065": "\u3064",
+ "\u3067": "\u3066",
+ "\u3069": "\u3068",
+ "\u3070": "\u306f",
+ "\u3071": "\u306f",
+ "\u3073": "\u3072",
+ "\u3074": "\u3072",
+ "\u3076": "\u3075",
+ "\u3077": "\u3075",
+ "\u3079": "\u3078",
+ "\u307a": "\u3078",
+ "\u307c": "\u307b",
+ "\u307d": "\u307b",
+ "\u3094": "\u3046",
+ "\u309e": "\u309d",
+ "\u30ac": "\u30ab",
+ "\u30ae": "\u30ad",
+ "\u30b0": "\u30af",
+ "\u30b2": "\u30b1",
+ "\u30b4": "\u30b3",
+ "\u30b6": "\u30b5",
+ "\u30b8": "\u30b7",
+ "\u30ba": "\u30b9",
+ "\u30bc": "\u30bb",
+ "\u30be": "\u30bd",
+ "\u30c0": "\u30bf",
+ "\u30c2": "\u30c1",
+ "\u30c5": "\u30c4",
+ "\u30c7": "\u30c6",
+ "\u30c9": "\u30c8",
+ "\u30d0": "\u30cf",
+ "\u30d1": "\u30cf",
+ "\u30d3": "\u30d2",
+ "\u30d4": "\u30d2",
+ "\u30d6": "\u30d5",
+ "\u30d7": "\u30d5",
+ "\u30d9": "\u30d8",
+ "\u30da": "\u30d8",
+ "\u30dc": "\u30db",
+ "\u30dd": "\u30db",
+ "\u30f4": "\u30a6",
+ "\u30f7": "\u30ef",
+ "\u30f8": "\u30f0",
+ "\u30f9": "\u30f1",
+ "\u30fa": "\u30f2",
+ "\u30fe": "\u30fd",
+ "\ua740": "k",
+ "\ua741": "k",
+ "\ua742": "k",
+ "\ua743": "k",
+ "\ua744": "k",
+ "\ua745": "k",
+ "\ua748": "l",
+ "\ua749": "l",
+ "\ua74a": "o",
+ "\ua74b": "o",
+ "\ua74c": "o",
+ "\ua74d": "o",
+ "\ua750": "p",
+ "\ua751": "p",
+ "\ua752": "p",
+ "\ua753": "p",
+ "\ua754": "p",
+ "\ua755": "p",
+ "\ua756": "q",
+ "\ua757": "q",
+ "\ua758": "q",
+ "\ua759": "q",
+ "\ua75e": "v",
+ "\ua75f": "v",
+ "\ua78e": "l",
+ "\ua790": "n",
+ "\ua791": "n",
+ "\ua792": "c",
+ "\ua793": "c",
+ "\ua794": "c",
+ "\ua795": "h",
+ "\ua796": "b",
+ "\ua797": "b",
+ "\ua798": "f",
+ "\ua799": "f",
+ "\ua7a0": "g",
+ "\ua7a1": "g",
+ "\ua7a2": "k",
+ "\ua7a3": "k",
+ "\ua7a4": "n",
+ "\ua7a5": "n",
+ "\ua7a6": "r",
+ "\ua7a7": "r",
+ "\ua7a8": "s",
+ "\ua7a9": "s",
+ "\ua7aa": "h",
+ "\ua7ad": "l",
+ "\ua7b2": "j",
+ "\ua7b8": "u",
+ "\ua7b9": "u",
+ "\ua7c4": "c",
+ "\ua7c5": "s",
+ "\ua7c6": "z",
+ "\ua7c7": "d",
+ "\ua7c8": "d",
+ "\ua7c9": "s",
+ "\ua7ca": "s",
+ "\uab34": "e",
+ "\uab37": "l",
+ "\uab38": "l",
+ "\uab39": "l",
+ "\uab3a": "m",
+ "\uab3b": "n",
+ "\uab49": "r",
+ "\uab4e": "u",
+ "\uab52": "u",
+ "\uab56": "x",
+ "\uab57": "x",
+ "\uab58": "x",
+ "\uab59": "x",
+ "\uab5a": "y",
+ "\ufb1d": "\u05d9",
+ "\ufb1f": "\u05f2",
+ "\ufb2a": "\u05e9",
+ "\ufb2b": "\u05e9",
+ "\ufb2c": "\u05e9",
+ "\ufb2d": "\u05e9",
+ "\ufb2e": "\u05d0",
+ "\ufb2f": "\u05d0",
+ "\ufb30": "\u05d0",
+ "\ufb31": "\u05d1",
+ "\ufb32": "\u05d2",
+ "\ufb33": "\u05d3",
+ "\ufb34": "\u05d4",
+ "\ufb35": "\u05d5",
+ "\ufb36": "\u05d6",
+ "\ufb38": "\u05d8",
+ "\ufb39": "\u05d9",
+ "\ufb3a": "\u05da",
+ "\ufb3b": "\u05db",
+ "\ufb3c": "\u05dc",
+ "\ufb3e": "\u05de",
+ "\ufb40": "\u05e0",
+ "\ufb41": "\u05e1",
+ "\ufb43": "\u05e3",
+ "\ufb44": "\u05e4",
+ "\ufb46": "\u05e6",
+ "\ufb47": "\u05e7",
+ "\ufb48": "\u05e8",
+ "\ufb49": "\u05e9",
+ "\ufb4a": "\u05ea",
+ "\ufb4b": "\u05d5",
+ "\ufb4c": "\u05d1",
+ "\ufb4d": "\u05db",
+ "\ufb4e": "\u05e4",
+ "\ud804\udc9a": "\ud804\udc99",
+ "\ud804\udc9c": "\ud804\udc9b",
+ "\ud804\udcab": "\ud804\udca5",
+ "\ud837\udf09": "t",
+ "\ud837\udf11": "l",
+ "\ud837\udf13": "l",
+ "\ud837\udf16": "r",
+ "\ud837\udf1a": "i",
+ "\ud837\udf1b": "o",
+ "\ud837\udf1d": "c",
+ "\ud837\udf1e": "s"
+}
diff --git a/web/src/dinners/names.test.ts b/web/src/dinners/names.test.ts
new file mode 100644
index 0000000..f2677fd
--- /dev/null
+++ b/web/src/dinners/names.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest'
+import cases from '../../../internal/ai/harness/testdata/dedupe_cases.json'
+import { normalizeName, similarNames } from './names.ts'
+
+// The cases internal/ai/harness's tests run against Normalize and Similar.
+describe('dinner names, as the server compares them', () => {
+ it('has cases to run', () => {
+ expect(cases.normalize.length).toBeGreaterThan(0)
+ expect(cases.similar.length).toBeGreaterThan(0)
+ })
+
+ it.each(cases.normalize)('normalizes "$name" to "$want"', ({ name, want }) => {
+ expect(normalizeName(name)).toBe(want)
+ })
+
+ it.each(cases.similar)('"$a" and "$b" similar: $want', ({ a, b, want }) => {
+ expect(similarNames(a, b)).toBe(want)
+ expect(similarNames(b, a)).toBe(want)
+ })
+})
diff --git a/web/src/dinners/names.ts b/web/src/dinners/names.ts
new file mode 100644
index 0000000..52cc50d
--- /dev/null
+++ b/web/src/dinners/names.ts
@@ -0,0 +1,58 @@
+// The PWA's copy of the server's dinner-name rules (internal/ai/harness
+// Normalize and Similar), so a screen can tell beforehand that the dinners
+// API would refuse a name as a duplicate. The server still decides.
+// internal/ai/harness/testdata/dedupe_cases.json is run against both.
+
+import folds from './letterFolds.json'
+
+// SIMILAR_THRESHOLD is harness.SimilarThreshold.
+const SIMILAR_THRESHOLD = 0.85
+
+// fillerWords is harness's fillerWords.
+const fillerWords = new Set(['easy', 'best', 'homemade', 'quick', 'simple', 'the', 'a', 'recipe', 'classic'])
+
+// letterFolds is harness's letterFolds: gen_folds.py writes both tables,
+// and harness's TestLetterFoldsMatchPWA fails when they differ.
+const letterFolds: Record = folds
+
+const combiningMark = /\p{Mn}/u
+const wordChar = /[\p{L}\p{Nd}]/u
+
+// normalizeName is harness.Normalize: lowercased, accents dropped, letters
+// folded, apostrophes removed, other punctuation turned into spaces and
+// filler words dropped. "Easy Chicken Tikka-Masala!" is
+// "chicken tikka masala".
+export function normalizeName(name: string): string {
+ let out = ''
+ // Lowercased letter by letter, as Go's strings.ToLower does, so no
+ // letter is lowered by its context (a final Σ is σ, not ς).
+ for (const letter of name) {
+ for (const ch of letter.toLowerCase()) {
+ if (combiningMark.test(ch) || ch === "'" || ch === '’') continue
+ const fold = letterFolds[ch]
+ if (fold !== undefined) out += fold
+ else if (wordChar.test(ch)) out += ch
+ else out += ' '
+ }
+ }
+ return out
+ .split(' ')
+ .filter((word) => word !== '' && !fillerWords.has(word))
+ .join(' ')
+}
+
+function words(name: string): Set {
+ const normalized = normalizeName(name)
+ return new Set(normalized === '' ? [] : normalized.split(' '))
+}
+
+// similarNames is harness.Similar: whether a and b name the same dinner, by
+// the share of the words of their normalized forms they have in common.
+export function similarNames(a: string, b: string): boolean {
+ const left = words(a)
+ const right = words(b)
+ if (left.size === 0 || right.size === 0) return false
+ let shared = 0
+ for (const word of left) if (right.has(word)) shared++
+ return shared / (left.size + right.size - shared) >= SIMILAR_THRESHOLD
+}
diff --git a/web/src/dinners/useRefusals.ts b/web/src/dinners/useRefusals.ts
new file mode 100644
index 0000000..485e9e3
--- /dev/null
+++ b/web/src/dinners/useRefusals.ts
@@ -0,0 +1,26 @@
+import { useRef, useState } from 'react'
+
+// Refusal is one change the server turned down. key is unique to that
+// attempt, so two attempts of the same change in flight each keep their own
+// refusal. change names what was tried, so trying it again once it has been
+// refused clears the earlier refusal and no other.
+export type Refusal = { key: number; change: string; text: string }
+
+// useRefusals keeps each change's own refusal: the mutation hooks only
+// report their latest change, which would hide a refusal while another
+// change is in flight. track(change, what, answer) clears change's earlier
+// refusal and records "Could not {what}: …" if answer rejects.
+export function useRefusals() {
+ const [refusals, setRefusals] = useState([])
+ const attempts = useRef(0)
+
+ function track(change: string, what: string, answer: Promise) {
+ const key = ++attempts.current
+ setRefusals((all) => all.filter((refusal) => refusal.change !== change))
+ answer.catch((error: Error) => {
+ setRefusals((all) => [...all, { key, change, text: `Could not ${what}: ${error.message}` }])
+ })
+ }
+
+ return { refusals, track }
+}
diff --git a/web/src/onboarding/NotificationsStep.test.tsx b/web/src/onboarding/NotificationsStep.test.tsx
new file mode 100644
index 0000000..e606aa9
--- /dev/null
+++ b/web/src/onboarding/NotificationsStep.test.tsx
@@ -0,0 +1,301 @@
+import { fireEvent, render, screen, within } from '@testing-library/react'
+import { Route, Routes } from 'react-router'
+import { afterEach, beforeEach, describe, expect, it, vi, type Mock } from 'vitest'
+import { createApiClient, createVerifiedSession } from '../api/index.ts'
+import App from '../App.tsx'
+import { AuthBootstrap } from '../AuthBootstrap.tsx'
+import { createNetworkStatus } from '../pwa/networkStatus.ts'
+import { ApiProviders, HOUSEHOLD_SETTINGS } from '../test/ApiProviders.tsx'
+import { declaredStyle } from '../test/cssRules.ts'
+import { InDataRouter } from '../test/dataRouter.tsx'
+import { errorResponse, fakeLocation, jsonResponse, ME } from '../test/fetchStub.ts'
+import { expectMinHitArea } from '../test/hitArea.ts'
+import { mockViewport } from '../test/matchMedia.ts'
+import { NotificationsStep, notificationsUnavailable, type EnableNotifications } from './NotificationsStep.tsx'
+import styles from './Onboarding.module.css'
+
+const IPHONE_SAFARI =
+ 'Mozilla/5.0 (iPhone; CPU iPhone OS 18_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.5 Mobile/15E148 Safari/604.1'
+
+const COMPLETED_AT = '2026-10-06T21:30:00.000Z'
+
+// requestPermission stands in for the browser's Notification API, which
+// jsdom lacks, so a test can prove nothing asks for permission.
+let requestPermission: Mock<() => Promise>
+
+beforeEach(() => {
+ requestPermission = vi.fn<() => Promise>(() => Promise.resolve('granted'))
+ vi.stubGlobal('Notification', { permission: 'default', requestPermission })
+})
+
+afterEach(() => {
+ vi.restoreAllMocks()
+ vi.unstubAllGlobals()
+ Reflect.deleteProperty(navigator, 'maxTouchPoints')
+ Reflect.deleteProperty(navigator, 'standalone')
+ localStorage.clear()
+})
+
+// A PATCH the fake server holds until the test answers it.
+type Held = { body: unknown; answer: (response: Response) => void }
+
+// stubFirstRunServer stands in for the server on first run: signed in,
+// onboarding not finished. Each PATCH of the household settings is held in
+// `held` until the test answers it.
+function stubFirstRunServer() {
+ const held: Held[] = []
+ const fetchMock = vi.fn((input, init) => {
+ const path = String(input)
+ const method = init?.method ?? 'GET'
+ if (method === 'GET' && path === '/api/v1/me') return Promise.resolve(jsonResponse(200, ME))
+ if (method === 'GET' && path === '/api/v1/settings/household') {
+ return Promise.resolve(jsonResponse(200, { ...HOUSEHOLD_SETTINGS, onboarding_completed_at: null }))
+ }
+ if (method === 'PATCH' && path === '/api/v1/settings/household') {
+ return new Promise((resolve) => {
+ held.push({ body: JSON.parse(String(init?.body)), answer: resolve })
+ })
+ }
+ throw new Error(`unexpected fetch: ${method} ${path}`)
+ })
+ vi.stubGlobal('fetch', fetchMock)
+ return { fetchMock, held }
+}
+
+function completed(request: Held) {
+ request.answer(jsonResponse(200, { ...HOUSEHOLD_SETTINGS, onboarding_completed_at: COMPLETED_AT }))
+}
+
+// renderApp renders the whole app at step 3, so the first-run redirect is
+// what decides where finishing lands.
+async function renderApp() {
+ mockViewport(390)
+ const server = stubFirstRunServer()
+ const api = createApiClient(
+ fakeLocation('/onboarding/notifications'),
+ createNetworkStatus(window),
+ createVerifiedSession(localStorage),
+ )
+ render(
+
+ ,
+ )
+ await screen.findByRole('heading', { level: 1, name: 'Stay in the loop' })
+ return server
+}
+
+// renderStep renders step 3 alone with the given enableNotifications, and a
+// Home that says it was reached. AuthBootstrap reads /api/v1/me for the CSRF
+// token every write needs.
+async function renderStep(enableNotifications?: EnableNotifications) {
+ const server = stubFirstRunServer()
+ render(
+
+
+
+
+ Home} />
+ Regulars step} />
+
+
+
+ ,
+ )
+ await screen.findByRole('heading', { level: 1, name: 'Stay in the loop' })
+ return server
+}
+
+function turnOn() {
+ return screen.getByRole('button', { name: 'Turn on notifications' })
+}
+
+function later() {
+ return screen.getByRole('button', { name: 'Maybe later' })
+}
+
+describe('onboarding step 3', () => {
+ it('explains what MealQuest notifies about, with all three progress pills filled', async () => {
+ await renderApp()
+
+ expect(screen.getByText('Step 3 of 3')).toBeInTheDocument()
+ const pills = Array.from(document.getElementsByClassName(styles.pill!))
+ expect(pills.map((pill) => pill.classList.contains(styles.filled!))).toEqual([true, true, true])
+ const topics = within(screen.getByRole('list')).getAllByRole('listitem')
+ expect(topics.map((topic) => topic.textContent)).toEqual([
+ expect.stringMatching(/^Plan ready/),
+ expect.stringMatching(/^Supply run ready/),
+ expect.stringMatching(/^Tonight's dinner/),
+ expect.stringMatching(/^New Side quests/),
+ ])
+ expect(turnOn()).toBeEnabled()
+ expect(later()).toBeEnabled()
+ expect(screen.queryByRole('navigation', { name: 'Primary' })).not.toBeInTheDocument()
+ })
+
+ it('never asks for notification permission on render', async () => {
+ await renderApp()
+ expect(requestPermission).not.toHaveBeenCalled()
+ })
+
+ it('sizes both actions as tap targets and fixes them to the bottom', async () => {
+ await renderApp()
+ expectMinHitArea(turnOn())
+ expectMinHitArea(later())
+ expect(declaredStyle(turnOn()).height).toBe('52px')
+ expect(declaredStyle(later()).height).toBe('52px')
+ expect(declaredStyle(turnOn().parentElement!.parentElement!).position).toBe('fixed')
+ })
+
+ it('shows no install hint outside iOS Safari', async () => {
+ await renderApp()
+ expect(screen.queryByText('Tap Share, then Add to Home Screen to get notifications')).not.toBeInTheDocument()
+ })
+
+ it('shows the install hint in an iOS Safari tab', async () => {
+ vi.spyOn(navigator, 'userAgent', 'get').mockReturnValue(IPHONE_SAFARI)
+ Object.defineProperty(navigator, 'maxTouchPoints', { configurable: true, value: 5 })
+ Object.defineProperty(navigator, 'standalone', { configurable: true, value: false })
+ vi.stubGlobal('matchMedia', (query: string) => ({ matches: false, media: query }) as MediaQueryList)
+ await renderStep()
+ expect(screen.getByRole('note')).toHaveTextContent('Tap Share, then Add to Home Screen to get notifications')
+ })
+
+ it('"Maybe later" finishes onboarding and goes Home, ending the first-run redirect', async () => {
+ const server = await renderApp()
+ fireEvent.click(later())
+
+ await vi.waitFor(() => expect(server.held).toHaveLength(1))
+ expect(server.held[0]!.body).toEqual({ onboarding_completed: true })
+ expect(turnOn()).toBeDisabled()
+ expect(later()).toBeDisabled()
+ completed(server.held[0]!)
+
+ expect(await screen.findByRole('heading', { level: 1, name: 'Home' })).toBeInTheDocument()
+ expect(screen.getByRole('navigation', { name: 'Primary' })).toBeInTheDocument()
+ expect(requestPermission).not.toHaveBeenCalled()
+ })
+
+ it('"Turn on notifications" finishes onboarding and goes Home while notifications are unavailable', async () => {
+ const server = await renderApp()
+ fireEvent.click(turnOn())
+
+ await vi.waitFor(() => expect(server.held).toHaveLength(1))
+ expect(server.held[0]!.body).toEqual({ onboarding_completed: true })
+ completed(server.held[0]!)
+
+ expect(await screen.findByRole('heading', { level: 1, name: 'Home' })).toBeInTheDocument()
+ expect(screen.getByRole('navigation', { name: 'Primary' })).toBeInTheDocument()
+ expect(requestPermission).not.toHaveBeenCalled()
+ })
+
+ it('"Turn on notifications" asks the injected enableNotifications first, then finishes', async () => {
+ let answer: (result: 'enabled') => void = () => {}
+ const enable = vi.fn(
+ () =>
+ new Promise((resolve) => {
+ answer = resolve
+ }),
+ )
+ const server = await renderStep(enable)
+ expect(enable).not.toHaveBeenCalled()
+
+ fireEvent.click(turnOn())
+ expect(enable).toHaveBeenCalledOnce()
+ expect(turnOn()).toBeDisabled()
+ expect(later()).toBeDisabled()
+ // Onboarding is not finished until enableNotifications has answered.
+ await Promise.resolve()
+ expect(server.held).toHaveLength(0)
+
+ answer('enabled')
+ await vi.waitFor(() => expect(server.held).toHaveLength(1))
+ expect(server.held[0]!.body).toEqual({ onboarding_completed: true })
+ completed(server.held[0]!)
+ expect(await screen.findByRole('heading', { level: 1, name: 'Home' })).toBeInTheDocument()
+ })
+
+ it('"Maybe later" does not ask the injected enableNotifications', async () => {
+ const enable = vi.fn(() => Promise.resolve('enabled'))
+ const server = await renderStep(enable)
+ fireEvent.click(later())
+
+ await vi.waitFor(() => expect(server.held).toHaveLength(1))
+ completed(server.held[0]!)
+ expect(await screen.findByRole('heading', { level: 1, name: 'Home' })).toBeInTheDocument()
+ expect(enable).not.toHaveBeenCalled()
+ })
+
+ it('says why and stays when enableNotifications fails', async () => {
+ const server = await renderStep(() => Promise.reject(new Error('push service down')))
+ fireEvent.click(turnOn())
+
+ expect(await screen.findByRole('alert')).toHaveTextContent('Could not turn on notifications: push service down')
+ expect(server.held).toHaveLength(0)
+ expect(turnOn()).toBeEnabled()
+ expect(screen.getByRole('heading', { level: 1, name: 'Stay in the loop' })).toBeInTheDocument()
+ })
+
+ it('says why and stays when the server refuses to finish onboarding, then finishes on retry', async () => {
+ const server = await renderApp()
+ fireEvent.click(later())
+ await vi.waitFor(() => expect(server.held).toHaveLength(1))
+ server.held[0]!.answer(errorResponse(500, 'internal'))
+
+ expect(await screen.findByRole('alert')).toHaveTextContent('Could not finish setting up: internal message')
+ expect(screen.getByRole('heading', { level: 1, name: 'Stay in the loop' })).toBeInTheDocument()
+ expect(later()).toBeEnabled()
+
+ fireEvent.click(later())
+ expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+ await vi.waitFor(() => expect(server.held).toHaveLength(2))
+ completed(server.held[1]!)
+ expect(await screen.findByRole('heading', { level: 1, name: 'Home' })).toBeInTheDocument()
+ })
+})
+
+describe('onboarding step 3 with too few Regulars', () => {
+ it('says why and offers a way back to add Regulars', async () => {
+ const server = await renderStep()
+ fireEvent.click(later())
+ await vi.waitFor(() => expect(server.held).toHaveLength(1))
+ server.held[0]!.answer(
+ jsonResponse(400, {
+ error: {
+ code: 'invalid_settings',
+ message: 'invalid household settings: onboarding_completed: add at least 3 Regulars first (have 2)',
+ retryable: false,
+ },
+ }),
+ )
+
+ expect(await screen.findByRole('alert')).toHaveTextContent(
+ 'Could not finish setting up: invalid household settings: onboarding_completed: add at least 3 Regulars first (have 2)',
+ )
+ const addRegulars = screen.getByRole('button', { name: 'Add Regulars' })
+ expectMinHitArea(addRegulars)
+ fireEvent.click(addRegulars)
+ expect(await screen.findByRole('heading', { level: 1, name: 'Regulars step' })).toBeInTheDocument()
+ })
+
+ it('offers no way back for any other refusal', async () => {
+ const server = await renderStep()
+ fireEvent.click(later())
+ await vi.waitFor(() => expect(server.held).toHaveLength(1))
+ server.held[0]!.answer(errorResponse(500, 'internal'))
+
+ expect(await screen.findByRole('alert')).toHaveTextContent('Could not finish setting up: internal message')
+ expect(screen.queryByRole('button', { name: 'Add Regulars' })).not.toBeInTheDocument()
+ })
+})
+
+describe('notificationsUnavailable', () => {
+ it('answers "unavailable" without asking for permission', async () => {
+ await expect(notificationsUnavailable()).resolves.toBe('unavailable')
+ expect(requestPermission).not.toHaveBeenCalled()
+ })
+})
diff --git a/web/src/onboarding/NotificationsStep.tsx b/web/src/onboarding/NotificationsStep.tsx
new file mode 100644
index 0000000..f17ddd1
--- /dev/null
+++ b/web/src/onboarding/NotificationsStep.tsx
@@ -0,0 +1,143 @@
+import { useState } from 'react'
+import { CalendarDays, ShoppingBasket, Sparkles, UtensilsCrossed, type LucideIcon } from 'lucide-react'
+import { useNavigate } from 'react-router'
+import { InstallHint } from '../pwa/InstallHint.tsx'
+import { needsMoreRegulars, useCompleteOnboarding } from '../settings/api.ts'
+import { Button } from '../ui/Button.tsx'
+import { Icon } from '../ui/Icon.tsx'
+import { OnboardingStep } from './OnboardingStep.tsx'
+import styles from './Onboarding.module.css'
+
+// NotificationsResult is how asking to turn on notifications ended.
+export type NotificationsResult = 'enabled' | 'denied' | 'unavailable'
+
+export type EnableNotifications = () => Promise
+
+// TODO(Feature 19): Web Push. Until it is wired, notifications cannot be
+// turned on, and nothing asks the browser for permission.
+export function notificationsUnavailable(): Promise {
+ return Promise.resolve('unavailable')
+}
+
+const topics: { icon: LucideIcon; name: string; meaning: string }[] = [
+ {
+ icon: CalendarDays,
+ name: 'Plan ready',
+ meaning: "The week's Draft board is ready for the household to adjust.",
+ },
+ {
+ icon: ShoppingBasket,
+ name: 'Supply run ready',
+ meaning: "The week's shopping list, grouped by dinner, is ready to shop.",
+ },
+ {
+ icon: UtensilsCrossed,
+ name: "Tonight's dinner",
+ meaning: "A reminder before dinner of what's on the plan tonight.",
+ },
+ {
+ icon: Sparkles,
+ name: 'New Side quests',
+ meaning: 'Fresh dinners to Try it or Pass, picked from your Regulars.',
+ },
+]
+
+export type NotificationsStepProps = {
+ // Asks to turn on notifications when the household taps "Turn on
+ // notifications" — never on render.
+ enableNotifications?: EnableNotifications
+}
+
+// NotificationsStep is onboarding step 3: what MealQuest notifies about, the
+// iOS install hint, and finishing onboarding. Either button records that
+// onboarding is finished and goes Home. When the server refuses because the
+// household has fewer than three Regulars, the reason shows with a way back
+// to step 2 to add them.
+export function NotificationsStep({ enableNotifications = notificationsUnavailable }: NotificationsStepProps) {
+ const navigate = useNavigate()
+ const complete = useCompleteOnboarding()
+ const [enabling, setEnabling] = useState(false)
+ const [problem, setProblem] = useState(null)
+ const [fewRegulars, setFewRegulars] = useState(false)
+ const busy = enabling || complete.isPending
+
+ async function finish() {
+ try {
+ await complete.mutateAsync()
+ } catch (error) {
+ setProblem(`Could not finish setting up: ${(error as Error).message}`)
+ setFewRegulars(needsMoreRegulars(error as Error))
+ return
+ }
+ void navigate('/', { replace: true })
+ }
+
+ function clearProblem() {
+ setProblem(null)
+ setFewRegulars(false)
+ }
+
+ async function turnOn() {
+ clearProblem()
+ setEnabling(true)
+ try {
+ await enableNotifications()
+ } catch (error) {
+ setProblem(`Could not turn on notifications: ${(error as Error).message}`)
+ return
+ } finally {
+ setEnabling(false)
+ }
+ await finish()
+ }
+
+ function later() {
+ clearProblem()
+ void finish()
+ }
+
+ return (
+
+
+
+
+ }
+ >
+ MealQuest can let the household know when there's something to look at:
+-
+ {topics.map(({ icon, name, meaning }) => (
+
-
+
+
+ + + {name} + {meaning} +
+
+ ))}
+
+
+ {problem && (
+ + {problem} +
+ )} + {fewRegulars && ( + + )} + + ) +} diff --git a/web/src/onboarding/Onboarding.module.css b/web/src/onboarding/Onboarding.module.css new file mode 100644 index 0000000..ef2703c --- /dev/null +++ b/web/src/onboarding/Onboarding.module.css @@ -0,0 +1,254 @@ +/* Onboarding, handoff mock 1h: a full screen outside the app shell with + the step's action fixed to the bottom. */ +.screen { + min-height: 100dvh; + box-sizing: border-box; + /* Room for the fixed 52 px action and its padding. */ + padding: var(--space-6) var(--space-4) calc(52px + 2 * var(--space-6)); + background: var(--color-bg); +} + +.column { + max-width: 560px; + margin: 0 auto; + display: flex; + flex-direction: column; +} + +.progress { + display: flex; + gap: 6px; +} + +.pill { + flex: 1; + height: 6px; + border-radius: var(--radius-pill); + background: var(--color-neutral-300); +} + +.filled { + background: var(--color-accent); +} + +.kicker { + margin: 30px 0 0; + font-family: var(--font-body); + font-size: 14px; + font-weight: 700; + color: var(--color-accent-700); +} + +.title { + margin: 8px 0 0; + font-family: var(--font-heading); + font-size: 30px; + font-weight: 400; + line-height: 1.1; +} + +.helper { + margin: 12px 0 0; + font-family: var(--font-body); + font-size: 15px; + line-height: 1.45; + color: var(--color-neutral-800); +} + +.footer { + position: fixed; + left: 0; + right: 0; + bottom: 0; + padding: var(--space-4) var(--space-4) var(--space-6); + background: var(--color-bg); +} + +.action { + display: flex; + width: 100%; + max-width: 560px; + height: 52px; + margin: 0 auto; + font-size: 17px; +} + +/* Step 3: two stacked actions. */ +.actions { + display: flex; + flex-direction: column; + gap: var(--space-3); +} + +/* Room for the second fixed action and the gap above it. */ +.screen:has(.actions) { + padding-bottom: calc(2 * 52px + var(--space-3) + 2 * var(--space-6)); +} + +/* Step 1: what MealQuest's words mean; step 3: what it notifies about. */ +.terms { + display: flex; + flex-direction: column; + gap: var(--space-4); + margin: var(--space-6) 0 0; + padding: 0; + list-style: none; +} + +.term { + display: flex; + gap: var(--space-3); + align-items: flex-start; + padding: var(--space-4); + border-radius: var(--radius-lg); + background: var(--color-surface); +} + +.termIcon { + flex: none; + display: inline-flex; + align-items: center; + justify-content: center; + width: 40px; + height: 40px; + border-radius: var(--radius-pill); + background: var(--color-accent-200); + color: var(--color-accent); +} + +.termText { + margin: 0; + font-family: var(--font-body); + font-size: 15px; + line-height: 1.4; +} + +.termName { + display: block; + font-weight: 700; +} + +/* Step 2: the add pill, with the "+" inside it. */ +.add { + position: relative; + margin-top: var(--space-6); +} + +/* Beats the TextInput's own padding whatever order the sheets load in. */ +.add .addInput { + width: 100%; + padding-right: 52px; +} + +/* 44 px hit box around the 36 px grape face, inset 2 px in the 48 px pill. */ +.addButton { + position: absolute; + top: 2px; + right: 4px; + display: inline-flex; + align-items: center; + justify-content: center; + width: 44px; + height: 44px; + padding: 0; + border: 0; + border-radius: var(--radius-pill); + background: transparent; + cursor: pointer; +} + +.addButton:disabled { + cursor: not-allowed; +} + +.addFace { + display: inline-flex; + align-items: center; + justify-content: center; + width: 36px; + height: 36px; + border-radius: var(--radius-pill); + background: var(--color-accent); + color: var(--on-accent); + transition: transform 100ms var(--ease-out-soft); +} + +.addButton:disabled .addFace { + opacity: 0.45; +} + +.addButton:active:not(:disabled) .addFace { + transform: scale(0.97); +} + +.groupLabel { + margin: var(--space-6) 0 0; + font-family: var(--font-body); + font-size: 14px; + font-weight: 700; + color: var(--color-neutral-700); +} + +.chips { + display: flex; + flex-wrap: wrap; + gap: 8px; + margin: 10px 0 0; + padding: 0; + list-style: none; +} + +.pending { + opacity: 0.6; +} + +.pick { + display: inline-flex; + align-items: center; + gap: 6px; + min-width: 44px; + min-height: 44px; + padding: 0 16px; + border: 1.5px dashed var(--color-neutral-400); + border-radius: var(--radius-pill); + background: transparent; + color: var(--color-text); + font-family: var(--font-body); + font-size: 15px; + cursor: pointer; +} + +.pick:active { + background: var(--color-neutral-200); +} + +.problem { + margin: var(--space-3) 0 0; + font-family: var(--font-body); + font-size: 14px; + color: var(--color-accent-700); +} + +/* Step 3: back to step 2 when the server wants more Regulars. */ +.recover { + margin-top: var(--space-3); +} + +.status { + margin-top: 10px; +} + +/* Step 3: the iOS install hint, when it shows. */ +.hint { + margin-top: var(--space-4); +} + +.hint:empty { + display: none; +} + +@media (prefers-reduced-motion: reduce) { + .addFace { + transition: none; + } +} diff --git a/web/src/onboarding/OnboardingGate.tsx b/web/src/onboarding/OnboardingGate.tsx new file mode 100644 index 0000000..473b33d --- /dev/null +++ b/web/src/onboarding/OnboardingGate.tsx @@ -0,0 +1,52 @@ +import { useEffect } from 'react' +import { Navigate, Outlet, useLocation } from 'react-router' +import { useApi } from '../api/index.ts' +import { LoadingScreen } from '../AuthBootstrap.tsx' +import { useHouseholdSettings } from '../settings/api.ts' +import { ErrorBanner } from '../ui/ErrorBanner.tsx' +import styles from '../pages/FullScreen.module.css' + +export const ONBOARDING_PATH = '/onboarding' + +function inOnboarding(pathname: string): boolean { + return pathname === ONBOARDING_PATH || pathname.startsWith(`${ONBOARDING_PATH}/`) +} + +// OnboardingGate reads the household settings before any page: while +// onboarding_completed_at is null, every route outside /onboarding +// redirects there. +// +// The service worker never caches the settings, so offline on the saved +// pages (see AuthBootstrap) they cannot be read: the saved pages open as they +// are, since onboarding needs the server anyway, and the settings are read +// again when the browser is back online. +export function OnboardingGate() { + const api = useApi() + const { pathname } = useLocation() + const settings = useHouseholdSettings() + const offline = settings.isError && settings.error instanceof TypeError && api.session.verified() + const { refetch } = settings + + useEffect(() => { + if (!offline) return + return api.network.subscribe(() => { + if (!api.network.offline()) void refetch() + }) + }, [offline, api, refetch]) + + if (settings.data !== undefined) { + if (settings.data.onboarding_completed_at === null && !inOnboarding(pathname)) { + returnMealQuest plans the household's dinners around what you already love to cook.
+-
+ {terms.map(({ icon, name, meaning }) => (
+
-
+
+
+ + + {name} + {meaning} +
+
+ ))}
+
+
+
+ {action && + Step {step} of {ONBOARDING_STEPS} +
+{title}
+ {children} +{action}
}
+ + Add the dinners your household makes on repeat. MealQuest builds suggestions from these. +
+ + {refusals.map((refusal) => ( ++ {refusal.text} +
+ ))} + +Your regulars · {list.length}
+ {regulars.isPending &&
+ void regulars.refetch()}>
+ Your Regulars could not load: {regulars.error.message}
+
+
+ )}
+ {list.length > 0 && (
+ -
+ {list.map((regular: Regular) => (
+
-
+
removeRegular(regular)} + /> +
+ ))}
+
Common picks
+-
+ {picks.map((pick) => (
+
- + + + ))} +
+
+ void navigate('/settings')}>
+
+
+
+ )
+}
+
+// Which sheet is open, for which Regular.
+type Open = { sheet: 'edit' | 'fix'; id: string } | null
+
+function RegularsManager() {
+ const regulars = useRegulars()
+ const add = useAddRegular()
+ const remove = useRemoveRegular()
+ const favorite = useToggleFavorite()
+ const { refusals, track } = useRefusals()
+ const [draft, setDraft] = useState('')
+ const [linkName, setLinkName] = useState('')
+ const [open, setOpen] = useState
+
+ Settings
+Regular dinners
+Changes apply to everyone in the household.
++ {refusal.text} +
+ ))} + + {regulars.isPending &&+ On rotation · {list.length} +
+ {list.length === 0 ? ( +No Regulars yet. Add the dinners your household makes on repeat.
+ ) : ( +-
+ {list.map((regular) => (
+
+
+ + {title} +
+ {children} ++ It leaves your Regulars, so suggestions and plans stop using it. You can add it again later. +
+
+
+
+
+ + We couldn't find a recipe for {regular.name}. Pick a match below, paste a recipe link or type it in. +
++ {ground.isPending && 'Finding recipe… this can take a minute.'} +
+ {ground.isError && ( ++ Not fixed: {ground.error.message} +
+ )} + +No matches were found. Paste a recipe link or type it in.
+ } + return ( +-
+ {candidates.data.map((candidate) => (
+
- + + + ))} +