Selectable caption font, bundled offline

apps/web/package.json

@@ -10,6 +10,10 @@
     "lint": "oxlint"
   },
   "dependencies": {
+    "@fontsource/caveat": "^5.2.8",
+    "@fontsource/kalam": "^5.2.8",
+    "@fontsource/patrick-hand": "^5.2.8",
+    "@fontsource/shadows-into-light": "^5.2.8",
     "@radix-ui/react-slot": "^1.3.0",
     "@tanstack/react-router": "^1.170.16",
     "class-variance-authority": "^0.7.1",

apps/web/src/components/caption-font-control.tsx

@@ -0,0 +1,34 @@
+import { CAPTION_FONTS } from '@/lib/fonts'
+import { useSettingsStore } from '@/stores/settings-store'
+
+export function CaptionFontControl() {
+  const captionFontId = useSettingsStore((state) => state.captionFontId)
+  const setCaptionFont = useSettingsStore((state) => state.setCaptionFont)
+
+  return (
+    <div className="flex items-center gap-2">
+      <label
+        htmlFor="caption-font"
+        className="text-muted-foreground text-xs font-medium whitespace-nowrap"
+      >
+        Font
+      </label>
+      <select
+        id="caption-font"
+        value={captionFontId}
+        onChange={(event) => setCaptionFont(event.target.value)}
+        className="border-input bg-background rounded-md border px-2 py-1 text-sm"
+      >
+        {CAPTION_FONTS.map((font) => (
+          <option
+            key={font.id}
+            value={font.id}
+            style={{ fontFamily: font.stack }}
+          >
+            {font.label}
+          </option>
+        ))}
+      </select>
+    </div>
+  )
+}

apps/web/src/components/photo-grid.tsx

@@ -1,5 +1,6 @@
 import { X } from 'lucide-react'
 
+import { CaptionFontControl } from '@/components/caption-font-control'
 import { FrameControls } from '@/components/frame-controls'
 import { Polaroid } from '@/components/polaroid'
 import { Button } from '@/components/ui/button'
@@ -18,7 +19,8 @@ export function PhotoGrid() {
         <h2 className="text-sm font-medium">
           {photos.length} {photos.length === 1 ? 'photo' : 'photos'}
         </h2>
-        <div className="flex items-center gap-4">
+        <div className="flex flex-wrap items-center gap-3">
+          <CaptionFontControl />
           <FrameControls />
           <Button variant="ghost" size="sm" onClick={clear}>
             Clear all

apps/web/src/components/polaroid.tsx

@@ -2,13 +2,16 @@ import { useState } from 'react'
 import { ImageOff } from 'lucide-react'
 
 import { cn } from '@/lib/utils'
+import { captionFontStack } from '@/lib/fonts'
 import { type Photo } from '@/lib/photos'
 import { usePhotoStore } from '@/stores/photo-store'
 import { useSettingsStore } from '@/stores/settings-store'
 
 export function Polaroid({ photo }: { photo: Photo }) {
   const setCaption = usePhotoStore((state) => state.setCaption)
   const framePadding = useSettingsStore((state) => state.framePadding)
+  const captionFontId = useSettingsStore((state) => state.captionFontId)
+  const fontFamily = captionFontStack(captionFontId)
   const [failed, setFailed] = useState(false)
 
   return (
@@ -43,11 +46,13 @@ export function Polaroid({ photo }: { photo: Photo }) {
           value={photo.captionTop}
           onChange={(value) => setCaption(photo.id, 'captionTop', value)}
           placeholder="Add a caption"
+          fontFamily={fontFamily}
           className="text-lg leading-tight"
         />
         <CaptionInput
           value={photo.captionBottom}
           onChange={(value) => setCaption(photo.id, 'captionBottom', value)}
+          fontFamily={fontFamily}
           className="text-sm text-neutral-500"
         />
       </div>
@@ -60,11 +65,13 @@ function CaptionInput({
   onChange,
   placeholder,
   className,
+  fontFamily,
 }: {
   value: string
   onChange: (value: string) => void
   placeholder?: string
   className?: string
+  fontFamily: string
 }) {
   return (
     <input
@@ -73,8 +80,9 @@ function CaptionInput({
       onChange={(event) => onChange(event.target.value)}
       placeholder={placeholder}
       aria-label="Polaroid caption"
+      style={{ fontFamily }}
       className={cn(
-        'font-handwriting w-full border-0 bg-transparent text-center text-neutral-800 placeholder:text-neutral-300 focus:outline-none',
+        'w-full border-0 bg-transparent text-center text-neutral-800 placeholder:text-neutral-300 focus:outline-none',
         className,
       )}
     />

apps/web/src/fontsource.d.ts

@@ -0,0 +1,3 @@
+// @fontsource packages ship CSS with no type declarations; declare them so
+// side-effect imports satisfy `noUncheckedSideEffectImports`.
+declare module '@fontsource/*'

apps/web/src/lib/fonts.ts

@@ -0,0 +1,25 @@
+export interface CaptionFont {
+  id: string
+  label: string
+  /** CSS font-family stack applied to caption text. */
+  stack: string
+}
+
+export const CAPTION_FONTS: CaptionFont[] = [
+  { id: 'caveat', label: 'Caveat', stack: '"Caveat", cursive' },
+  { id: 'patrick-hand', label: 'Patrick Hand', stack: '"Patrick Hand", cursive' },
+  {
+    id: 'shadows-into-light',
+    label: 'Shadows Into Light',
+    stack: '"Shadows Into Light", cursive',
+  },
+  { id: 'kalam', label: 'Kalam', stack: '"Kalam", cursive' },
+]
+
+export const DEFAULT_CAPTION_FONT_ID = CAPTION_FONTS[0].id
+
+export function captionFontStack(id: string): string {
+  return (
+    CAPTION_FONTS.find((font) => font.id === id)?.stack ?? CAPTION_FONTS[0].stack
+  )
+}

apps/web/src/main.tsx

@@ -4,6 +4,10 @@ import { RouterProvider, createRouter } from '@tanstack/react-router'
 
 import { routeTree } from './routeTree.gen'
 import './styles.css'
+import '@fontsource/caveat'
+import '@fontsource/patrick-hand'
+import '@fontsource/shadows-into-light'
+import '@fontsource/kalam'
 
 const router = createRouter({ routeTree })
 

apps/web/src/stores/settings-store.ts

@@ -1,15 +1,21 @@
 import { create } from 'zustand'
 
+import { DEFAULT_CAPTION_FONT_ID } from '@/lib/fonts'
+
 export const MIN_FRAME_PADDING = 6
 export const MAX_FRAME_PADDING = 28
 
 interface SettingsState {
   /** White polaroid border width in px (sides/top); the bottom is thicker. */
   framePadding: number
   setFramePadding: (px: number) => void
+  captionFontId: string
+  setCaptionFont: (id: string) => void
 }
 
 export const useSettingsStore = create<SettingsState>((set) => ({
   framePadding: 14,
   setFramePadding: (px) => set({ framePadding: px }),
+  captionFontId: DEFAULT_CAPTION_FONT_ID,
+  setCaptionFont: (id) => set({ captionFontId: id }),
 }))

apps/web/src/styles.css

@@ -42,7 +42,6 @@
 }
 
 @theme inline {
-  --font-handwriting: "Caveat", "Segoe Print", "Bradley Hand", cursive;
   --radius-sm: calc(var(--radius) - 4px);
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);