Frame Presets

Overview

Frame Presets allow vendors to save and reuse frame customization settings. Once a vendor configures frame settings (header/footer text, border thickness, colors, background), they can save it as a named preset for quick access later.

Data Model

interface FramePreset {
  id: string;           // Generated ID (e.g., "framepreset_xxxxx")
  name: string;         // User-defined name
  frameSettings: FrameSettings;
  createdAt: string;    // ISO timestamp
  updatedAt: string;    // ISO timestamp
}

interface FrameSettings {
  header: { text: string; font: string; color: string };
  footer: { text: string; font: string; color: string };
  border: { thickness: number; color: string };
  background: string;    // HEX color or gradient
}

Storage

Presets are stored in IndexedDB (via dualStore) with key: photobooth-frame-presets

API Functions

Function	Parameters	Returns	Description
listFramePresets()	none	Promise<FramePreset[]>	List all presets, sorted by updatedAt
saveFramePreset(name, frameSettings)	name: string, settings: FrameSettings	Promise<FramePreset>	Create or update preset
deleteFramePreset(id)	id: string	Promise<void>	Delete preset by ID

Usage Flow

1. Create: Vendor customizes frame in /customization page
2. Save: Vendor clicks "Save as Preset", enters name
3. List: Available presets shown in dropdown
4. Load: Selecting a preset applies its settings
5. Delete: Vendor can delete unwanted presets

Code Reference

• Library: apps/web/lib/frame-presets.ts
• Types: apps/web/features/customization/types.ts
• Schemas: apps/web/features/customization/schemas.ts

Key Implementation Details

• Preset names are normalized (trimmed, lowercase) for duplicate detection
• Saving with existing name updates that preset instead of creating duplicate
• List is sorted by updatedAt descending (most recent first)
• Invalid entries are filtered out during load