first commit

.gitignore

@@ -3,12 +3,8 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.*
+.pnp.js
-.yarn/*
+.yarn/install-state.gz
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/versions
 
 # testing
 /coverage
@@ -28,11 +24,9 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
-.pnpm-debug.log*
 
-# env files (can opt-in for committing if needed)
+# local env files
-.env*
+.env*.local
-!.env.example
 
 # vercel
 .vercel
@@ -48,3 +42,4 @@ next-env.d.ts
 .wrangler
 .dev.vars*
 !.dev.vars.example
+!.env.example

docs/PRD.md

@@ -0,0 +1,445 @@
+# ✧ GRIMMTATTOO — SPANISH REVIVAL WEBSITE  
+### *Product Requirements Document (PRD)*  
+### aesthetic: warm terracotta, olive, stucco, brass • type: fraunces + crimson text + inter • vibe: spanish revival meets vintage tattoo studio
+
+---
+
+# ✧ 1. OVERVIEW
+
+GrimmTattoo is a personal + professional digital home for Amari.  
+Its purpose: *a cozy, architectural, highly personalized creative space* where she can display flash, organize inspiration, manage behind-the-scenes workflow, and enjoy a corner of the internet that feels like HER.
+
+This PRD outlines:
+
+- core features  
+- aesthetic + brand rules  
+- detailed user flows  
+- feature-level requirements  
+- component breakdown  
+- Dev/infra notes for OpenNext + Cloudflare + Tailwind + your workflow (tmux, nvim, codex)  
+- stretch goals  
+
+Everything honors the Spanish Revival design language chosen in your inspiration board.
+
+---
+
+# ✧ 2. CORE FEATURES (APPROVED)
+
+### 1. **Virtual Scrapbook** (drag-and-drop collage canvas)  
+### 2. **Flash Vault** (interactive gallery of flash art)  
+### 3. **Music Corner** (playlists + audio embeds)  
+### 4. **Digital Pantry** (recipes, meal prep, inventory, spinner wheel)  
+### 5. **Cat Universe** (profiles, memorial, galleries)  
+### 6. **Secret Love Letter Tab** (hidden URL)  
+### 7. **Global Spanish Revival UI + component system**
+
+---
+
+# ✧ 3. BRAND & AESTHETIC SYSTEM
+
+## ✧ 3.1 COLOR PALETTE (locked)
+
+**Primary**  
+- terracotta — `#C46A4A`  
+- olive verde — `#7D8E6A`  
+- stucco cream — `#F6EFE4`  
+- coffee brown — `#4A3628`  
+
+**Neutrals**  
+- old iron black — `#1A1A1A`  
+- brass — `#B08A57`
+
+**Highlights**  
+- adobe red — `#9A3E2F`  
+- dusty sage — `#C3D0BA`  
+- parchment — `#FDF8F1`
+
+### ✧ 3.1.1 TailwindCSS Tokens
+Use custom theme extension:
+
+```js
+theme: {
+  extend: {
+    colors: {
+      terracotta: '#C46A4A',
+      olive: '#7D8E6A',
+      stucco: '#F6EFE4',
+      coffee: '#4A3628',
+      iron: '#1A1A1A',
+      brass: '#B08A57',
+      adobe: '#9A3E2F',
+      sage: '#C3D0BA',
+      parchment: '#FDF8F1'
+    },
+    fontFamily: {
+      display: ['Fraunces', 'serif'],
+      body: ['Crimson Text', 'serif'],
+      ui: ['Inter', 'sans-serif']
+    }
+  }
+}
+
+
+⸻
+
+✧ 3.2 TYPOGRAPHY SYSTEM
+
+Display Serif (H1–H3)
+
+Fraunces — bold or semibold
+Use for: titles, headers, flash names, scrapbook section titles
+
+Body Serif (P, long text)
+
+Crimson Text
+Use for: descriptive text, blog-like entries, stories
+
+UI Sans (buttons/inputs/nav)
+
+Inter
+Use for: forms, labels, utility elements, pagination
+
+⸻
+
+✧ 3.3 UI SHAPES / MOTIFS
+	•	rounded-but-structured rectangles
+	•	arched headers + image frames (spanish windows)
+	•	thin brass borders
+	•	lightly textured parchment backgrounds
+	•	terracotta drop-shadows (warm soft shadows)
+
+⸻
+
+✧ 4. FEATURE REQUIREMENTS + USER FLOWS
+
+⸻
+
+✧ 4.1 VIRTUAL SCRAPBOOK (CORE FEATURE)
+
+✧ Purpose
+
+A drag-and-drop collage builder where Amari can pin inspo, frames, stickers, notes, and color swatches. Auto-saves.
+
+✧ User Flow
+
+1. user opens /scrapbook
+	•	sees a parchment background canvas
+	•	sidebar on left with assets
+	•	toolbar on right with manipulation tools (rotate, scale, duplicate, delete, layer order)
+
+2. user adds elements
+
+Sidebar Element Categories:
+	•	Uploads (user images)
+	•	Stickers (roses, webs, frames, tape strips, sparkles)
+	•	Paper textures
+	•	Color swatches
+	•	Text notes (handwritten + serif)
+
+User drags element onto canvas → element appears with bounding box + rotation handle.
+
+3. editing
+
+Toolbar actions:
+	•	rotate
+	•	scale
+	•	flip horizontal
+	•	duplicate
+	•	delete
+	•	send to front/back
+	•	lock element
+
+4. text editing
+
+Double-click text box → inline text editor
+Font options: handwritten (Caveat) or serif (Crimson)
+
+5. auto-save
+
+LocalStorage (no login)
+OR user account storage (future)
+
+Autosave events triggered on element add/remove/move.
+
+6. export
+
+Button: “Save Snapshot”
+Outputs: PNG, JPG
+Optional: “Print layout” (8.5x11 with safe margins)
+
+✧ Requirements Summary
+	•	drag & drop via HTML5 or library like Konva.js / React-DnD
+	•	autosave state as JSON
+	•	rendering to canvas for export
+	•	mobile view: restricted editing, mostly viewer-only
+
+⸻
+
+✧ 4.2 FLASH VAULT
+
+✧ Purpose
+
+Showcase all flash artwork in luxurious framed displays with microinteractions.
+
+✧ User Flow
+
+1. user enters /flash
+
+Sees grid of vintage frames (iron + brass).
+
+Hover → frame “wiggles” slightly.
+Click → opens detail modal/page.
+
+2. detail page includes:
+	•	large image
+	•	name (Fraunces, terracotta)
+	•	story (Crimson body text)
+	•	tags (traditional, color, repeatable)
+	•	size + price
+	•	“Book This” button (olive background, brass border) linking to GlossGenius
+	•	related flash suggestions
+
+3. admin flow (future enhancement)
+
+Add new flash via admin panel:
+	•	upload image
+	•	write story
+	•	set tags
+	•	set pricing
+	•	toggle availability
+
+⸻
+
+✧ 4.3 MUSIC CORNER
+
+✧ Purpose
+
+A space for playlists, audio uploads, and musical inspirations.
+
+✧ User Flow
+
+1. user visits /music
+
+Sees cards styled like old album covers.
+
+2. playlist cards
+
+Each tile includes:
+	•	album cover frame
+	•	title
+	•	embedded Spotify player
+	•	optional text: “music that inspired this flash collection”
+
+3. personal audio
+
+Optional: file uploader for short bass riffs.
+Audio player styled with brass accents + terracotta buttons.
+
+⸻
+
+✧ 4.4 DIGITAL PANTRY
+
+✧ Purpose
+
+Store recipes, meal prep rotations, pantry inventory, grocery lists.
+
+✧ User Flow
+
+1. user enters /pantry
+
+Tabs:
+	•	recipes
+	•	meal prep
+	•	grocery lists
+	•	pantry inventory
+	•	meal spinner
+
+2. recipes
+
+Click card → see ingredients, instructions, photos.
+
+3. meal prep
+
+Create weekly plan.
+
+4. grocery list
+
+Editable checklist stored in LocalStorage.
+
+5. inventory
+
+Editable list w/ categories like:
+	•	grains
+	•	proteins
+	•	spices
+	•	snacks
+
+6. spinner wheel
+
+Random meal generator (use canvas or SVG rotating wheel).
+
+⸻
+
+✧ 4.5 CAT UNIVERSE
+
+✧ Purpose
+
+A dedicated area for her cats, including a memorial.
+
+✧ User Flow
+
+1. home page for /cats
+
+Shows portrait cards:
+	•	miso soup
+	•	honey-boy
+	•	coffee june-bean
+	•	mochi (memorial)
+
+2. individual cat pages
+
+Include:
+	•	photo gallery
+	•	middle names
+	•	personality traits
+	•	birth/adoption date
+	•	fun facts
+	•	favorite toys
+	•	a “mood today” slider
+
+3. mochi memorial
+
+Soft animation:
+	•	faint falling sparkles
+	•	soft music option
+	•	letter-writing box (saved locally)
+
+⸻
+
+✧ 4.6 SECRET LOVE LETTER TAB
+
+✧ Purpose
+
+A hidden URL containing a surprise page for Amari.
+
+Proposed URL
+
+/blue-room or /casa-azul
+
+Features
+	•	handwritten-style note (Caveat font)
+	•	slideshow of personal photos
+	•	audio file (voice memo)
+	•	fade-in animations
+	•	password optional
+	•	invisible-from-nav
+
+⸻
+
+✧ 5. GLOBAL COMPONENT LIBRARY (UI KIT)
+
+✧ Buttons
+	•	olive filled with brass border
+	•	terracotta filled with cream text
+	•	brass outline buttons for secondary CTA
+
+✧ Cards
+	•	parchment or stucco backgrounds
+	•	brass thin borders
+	•	subtle terracotta shadow
+
+✧ Navigation
+	•	horizontal bar
+	•	terracotta background
+	•	cream text in Fraunces
+	•	hover → olive or brass underline
+
+✧ Footer
+	•	stucco background
+	•	iron text
+	•	ghosts of spanish patterns (low opacity tiles)
+
+✧ Modals
+	•	parchment with brass framing
+	•	close button in iron
+
+✧ Inputs
+	•	cream background
+	•	coffee brown border
+	•	inter ui font
+
+⸻
+
+✧ 6. INFORMATION ARCHITECTURE
+
+Main Nav
+	•	Home
+	•	Flash Vault
+	•	Scrapbook
+	•	Music
+	•	Pantry
+	•	Cats
+	•	Contact (optional)
+
+Hidden
+	•	/blue-room
+
+⸻
+
+✧ 7. DEVELOPMENT NOTES
+
+Framework
+
+OpenNext + Cloudflare Pages
+	•	build static or hybrid pages
+	•	scrapbook: client-side heavy
+
+File storage
+	•	localStorage for scrapbook & pantry
+	•	cloud uploads optional later
+
+Version Control
+	•	push to self-hosted Gitea
+	•	main branch protected
+	•	dev branches per feature
+
+Workflow
+	•	use tmux pane 1 for server, pane 2 for editor
+	•	use codex for scaffold generation
+	•	tailwind jit enabled
+	•	use components library folder: /components/ui
+	•	use /data folder for static JSON like recipes or flash metadata
+
+⸻
+
+✧ 8. STRETCH FEATURES
+	•	user accounts for saved scrapbook notebooks
+	•	admin panel for uploading flash
+	•	light/dark mode (spanish revival dusk version)
+	•	interactive courtyard home page
+	•	animated arched transitions
+	•	global search
+	•	client booking portal
+
+⸻
+
+✧ 9. SUCCESS METRICS
+	•	scrapbook loads under 150ms
+	•	flash vault navigation under 80ms
+	•	no layout shifts (CLS < 0.1)
+	•	lighthouse performance > 90
+	•	accessible color contrast for text
+	•	stable mobile experience
+
+⸻
+
+✧ 10. FINAL MOOD SUMMARY
+
+The entire site should feel like:
+
+a vintage spanish villa, sun-warmed, filled with plants, arches, terracotta tiles, brass lanterns, and nostalgia — but with modern tattoo artist functionality built underneath.
+
+Elegance + warmth + creative freedom.
+
+
+

package.json

@@ -21,13 +21,13 @@
 	"devDependencies": {
 		"@eslint/eslintrc": "^3",
 		"@tailwindcss/postcss": "^4",
-		"@types/node": "^20",
+		"@types/node": "^20.19.25",
 		"@types/react": "^19",
 		"@types/react-dom": "^19",
 		"eslint": "^9",
 		"eslint-config-next": "15.4.6",
 		"tailwindcss": "^4",
 		"typescript": "^5",
-		"wrangler": "^4.45.4"
+		"wrangler": "^4.48.0"
 	}
 }

public/_headers

@@ -1,4 +1,3 @@
 # https://developers.cloudflare.com/workers/static-assets/headers
-# https://opennext.js.org/cloudflare/caching#static-assets-caching
 /_next/static/*
   Cache-Control: public,max-age=31536000,immutable

tsconfig.json

@@ -21,7 +21,12 @@
 		"paths": {
 			"@/*": ["./src/*"]
 		},
-		"types": ["./cloudflare-env.d.ts", "node"]
+		"types": [
+			"./cloudflare-env.d.ts",
+			"./cloudflare-env.d.ts",
+			"node",
+			"node"
+		]
 	},
 	"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
 	"exclude": ["node_modules"]

wrangler.jsonc

@@ -4,10 +4,13 @@
  */
 {
 	"$schema": "node_modules/wrangler/config-schema.json",
-	"name": "next",
+	"name": "todo",
 	"main": ".open-next/worker.js",
-	"compatibility_date": "2025-11-06",
+	"compatibility_date": "2025-03-01",
-	"compatibility_flags": ["nodejs_compat", "global_fetch_strictly_public"],
+	"compatibility_flags": [
+		"nodejs_compat",
+		"global_fetch_strictly_public"
+	],
 	"assets": {
 		"binding": "ASSETS",
 		"directory": ".open-next/assets"
@@ -15,4 +18,34 @@
 	"observability": {
 		"enabled": true
 	}
+	/**
+	 * Smart Placement
+	 * Docs: https://developers.cloudflare.com/workers/configuration/smart-placement/#smart-placement
+	 */
+	// "placement": { "mode": "smart" }
+	/**
+	 * Bindings
+	 * Bindings allow your Worker to interact with resources on the Cloudflare Developer Platform, including
+	 * databases, object storage, AI inference, real-time communication and more.
+	 * https://developers.cloudflare.com/workers/runtime-apis/bindings/
+	 */
+	/**
+	 * Environment Variables
+	 * https://developers.cloudflare.com/workers/wrangler/configuration/#environment-variables
+	 */
+	// "vars": { "MY_VARIABLE": "production_value" }
+	/**
+	 * Note: Use secrets to store sensitive data.
+	 * https://developers.cloudflare.com/workers/configuration/secrets/
+	 */
+	/**
+	 * Static Assets
+	 * https://developers.cloudflare.com/workers/static-assets/binding/
+	 */
+	// "assets": { "directory": "./public/", "binding": "ASSETS" }
+	/**
+	 * Service Bindings (communicate between multiple Workers)
+	 * https://developers.cloudflare.com/workers/wrangler/configuration/#service-bindings
+	 */
+	// "services": [{ "binding": "MY_SERVICE", "service": "my-service" }]
 }