// screens.jsx — the 8 iOS screens for the Core flow row. // // Each screen returns the inner content of an iPhone frame (status bar // included as a small block). The host wraps it in IOSDevice via the // design canvas. const { useState } = React; // ─── shared chrome ────────────────────────────────────────── function IPhoneShell({ children, dark = false, time = '9:41' }) { const fg = dark ? '#fff' : '#1a1a1a'; return (
{/* status bar */}
{time} {/* dynamic island */}
{children}
{/* home indicator */}
); } function NavChip({ children, dark, style }) { return (
{children}
); } // ─── 1. UPLOAD / LAUNCH ───────────────────────────────────── function UploadScreen() { const [mode, setMode] = useState('single'); return ( {/* top nav */}
▦ ⚙
{/* hero */}
Turn a photo
into a color
A photo, a color, a day.
{/* CTA */}
＋ Choose a photo
{/* mode tabs */}
{MODES.map(m => (
setMode(m.id)} style={{ flex: 1, padding: '8px 0', borderRadius: 10, textAlign: 'center', fontSize: 12, fontWeight: 600, background: mode === m.id ? '#1a1a1a' : 'transparent', color: mode === m.id ? '#fafaf7' : CW.inkSoft, border: mode === m.id ? 'none' : `1px solid ${CW.hairline}`, }}>{m.icon} {m.label}
))}
{/* recent grid */}
Recent SEE ALL
{RECENT_GRID.slice(0, 12).map((p, i) => (
))}
); } // ─── 2. EDITOR ──────────────────────────────────────────────── function EditorScreen({ photo = PHOTOS[0], color, font, caption, variant = 'classic', activeTool = 'layout' }) { color = color || photo.palette[0]; font = font || FONTS[1]; caption = caption || 'tulip season'; return ( {/* nav pill */}
‹ Color Walk Export
{/* preview 3:4 */}
{/* tool shelf */}
{EDITOR_TOOLS.map(t => (
{t.glyph} {t.label}
))}
); } // ─── 3. COLOR SHEET ──────────────────────────────────────── function ColorSheetScreen({ photo = PHOTOS[2] }) { return ( {/* dimmed editor behind */}
{/* sheet */}
Color From your photo
{photo.palette.map((c, i) => (
{c.toUpperCase().slice(1)}
))}
Mood palettes
{MOOD_PALETTES.slice(0, 4).map(p => (
{p.colors.map((c, i) => (
))}
{p.name}
))}
); } // helper — bare editor body without shell, used as backdrop in sheets function EditorScreenInner({ photo, color, variant, caption }) { color = color || photo.palette[0]; return (
); } // ─── 4. FONT SHEET ───────────────────────────────────────── function FontSheetScreen({ photo = PHOTOS[1] }) { return (
Font
{FONTS.slice(0, 7).map((f, i) => (
{f.sample}
{f.name}
))}
); } // ─── 5. LAYOUT SHEET ─────────────────────────────────────── function LayoutSheetScreen({ photo = PHOTOS[0] }) { return (
Layout
{LAYOUTS.map((l, i) => (
{l.name}
))}
); } // ─── 6. TEXT EDIT ────────────────────────────────────────── function TextEditScreen({ photo = PHOTOS[2] }) { const chips = EXIF_CHIPS(photo); return (
Text 3 / 80
a long sunset
Suggested · from photo
{chips.map((c, i) => (
{c.label}
))}
); } // ─── 7. EXPORT ───────────────────────────────────────────── function ExportScreen({ photo = PHOTOS[2] }) { return (
× Share ⤓
{EXPORT_FORMATS.map((f, i) => (
{f.label}
))}
Share to
{SHARE_TARGETS.map(t => (
{t.label.slice(0, 2)}
{t.label}
))}
); } // ─── 8. GALLERY ──────────────────────────────────────────── function GalleryScreen() { // 2-col masonry of sample cards in a mix of layouts const items = [ { photo: PHOTOS[0], variant: 'classic', h: 220, caption: 'tulip season' }, { photo: PHOTOS[2], variant: 'gradient', h: 260, caption: 'a long sunset' }, { photo: PHOTOS[1], variant: 'magazine', h: 200, caption: '柳色' }, { photo: PHOTOS[3], variant: 'polaroid', h: 270, caption: 'slow morning' }, { photo: PHOTOS[4], variant: 'window', h: 200, caption: 'big sur' }, { photo: PHOTOS[5], variant: 'palette', h: 240, caption: '哲学の道' }, { photo: PHOTOS[2], variant: 'tape', h: 220, caption: 'joshua tree' }, { photo: PHOTOS[4], variant: 'film', h: 260, caption: 'highway 1' }, ]; const colA = items.filter((_, i) => i % 2 === 0); const colB = items.filter((_, i) => i % 2 === 1); return (
‹ Library ⌕
32 days
32 days · 32 colors
{[colA, colB].map((col, ci) => (
{col.map((it, i) => (
))}
))}
); } Object.assign(window, { IPhoneShell, NavChip, UploadScreen, EditorScreen, EditorScreenInner, ColorSheetScreen, FontSheetScreen, LayoutSheetScreen, TextEditScreen, ExportScreen, GalleryScreen, });