style-prompts.md
# Style Prompts
A library of named visual styles distilled from the best App Store screenshots in the wild. When a user names one of these styles (or pastes one of the prompts), the screenshot deck should adopt the **entire spec** in the matching file — palette, typography, layout rhythm, decorative accents, and copy tone.
Apply a style globally first; let the user override specific slides afterwards.
If a user gives a prompt that does not match a named style, fall back to the General Visual Design Principles in `SKILL.md` and pick the **closest** style here as the starting point.
---
## Deep style spec index (`./style-prompts/`)
**Before you read any deep spec, read [`./style-prompts/_QUALITY_BAR.md`](./style-prompts/_QUALITY_BAR.md).** It defines the universal sizing, illustration-polish, contrast, and auto-reject rules that apply to every style. Each deep spec adds style-specific quantitative rules on top.
**When a user names one of these styles, ALWAYS read the matching deep spec file before generating slides.**
| # | Slug | Deep spec file | Use when… |
|---|------|----------------|-----------|
| 01 | `retro-rubberhose-mascot` | [01-retro-rubberhose-mascot.md](./style-prompts/01-retro-rubberhose-mascot.md) | Cozy walking/habit app with a 1930s cartoon character. Cream + mustard, white-gloved mascot, chunky retro display. Inspired by Cancoco. |
| 02 | `moody-curated-dating` | [02-moody-curated-dating.md](./style-prompts/02-moody-curated-dating.md) | Exclusive members-only dating / dinner clubs. Dim lifestyle photography, white serif headlines with italic emphasis. Inspired by Mate. |
| 03 | `paper-sticker-skeuomorphic` | [03-paper-sticker-skeuomorphic.md](./style-prompts/03-paper-sticker-skeuomorphic.md) | Student organizer, notes, hobby apps. Cork-board bg, paper-cutout UI, marker handwriting, sticker pixel-art. Inspired by Folderly. |
| 04 | `dreamy-pastel-couples` | [04-dreamy-pastel-couples.md](./style-prompts/04-dreamy-pastel-couples.md) | Couples / long-distance / pet-companion apps. Cotton-candy sky gradient, 3D globe, kawaii pets, lilac italic serif emphasis. Inspired by Between. |
| 05 | `hand-drawn-editorial-tasks` | [05-hand-drawn-editorial-tasks.md](./style-prompts/05-hand-drawn-editorial-tasks.md) | Productivity / tasks / notes with designer taste. Navy + cream + coral slides, script accent word, tilted phones, doodle squiggles. Inspired by Superlist. |
| 06 | `glossy-3d-kbeauty-creator` | [06-glossy-3d-kbeauty-creator.md](./style-prompts/06-glossy-3d-kbeauty-creator.md) | K-beauty / creator-economy / influencer-brand collab. Deep purple gradient, glossy chrome 3D numerals, kawaii ghost mascot, yellow hashtag chips. Inspired by Nuri Lounge. |
---
## How to apply a style
When a user invokes a style by name (e.g. "use the Hand-Drawn Editorial style"):
1. Read the matching deep spec file (and `_QUALITY_BAR.md` first).
2. Set the theme palette to the listed hex values.
3. Set the font family for headline + body to the listed stack.
4. Match the listed headline emphasis behavior.
5. Apply the listed layout rhythm (which slide types and in what order).
6. Decide whether the deck should include a cross-screen/cross-canvas moment. For 5+ slide decks, include one tasteful adjacent-screen bridge when the style supports it; keep minimal or photo-led styles subtle.
7. Add the listed decorative accents on at least 60% of slides.
8. Rewrite the copy tone to match the listed voice rules.
If the style and a user-supplied brand color clash, keep the brand color and adjust adjacent palette entries to be analogous.
---
## Combining and overriding
- If the user names a style **and** gives custom brand colors, swap the palette colors closest in lightness to the brand colors but keep the typography and accent rules intact.
- If the user names a style **and** a layout (e.g. "style 05 but with style 04's layout rhythm"), keep the named style's typography + accents, swap only the layout rhythm.
- If two styles are named, pick the first as primary and pull at most one element (typography OR decoration) from the second.
- Cross-screen moments inherit the primary style's rules. In a moody/photo style, continue a photograph, vignette, or notification across the seam; in an editorial style, use a tilted phone, doodle, or sticker trail; in a maximalist style, let chips, mascots, or 3D objects bridge the pair. Never use the cross-screen device as an excuse to break type contrast, phone sizing, or standalone readability.
## Adding new styles
When the user describes a new style not in this list and likes the result, propose appending a new deep spec file in `./style-prompts/` using the next sequential number, following the same field layout as the existing specs (Palette / Typography / Headline emphasis / Layout rhythm / Decorative accents / Copy tone), then add a row to the index table above.
style-prompts/_QUALITY_BAR.md
# Universal Quality Bar (read before any style spec)
These rules apply to **every** style in this folder. They override slide-specific instructions only when violated by them. If your output fails any of these, it is **not done**.
> Canvas reference: every rule below is calibrated to the App Store iPhone canvas **1320 × 2868** (6.9"). For other canvas sizes, scale proportionally by canvas width.
---
## 1. Composition (no dead space, no clipping)
- **Phone must occupy 68–82% of the canvas vertical height** when a phone is present (spec-permitted "no-device" slides exempt). Below 65% means the phone reads as small and the slide reads as empty.
- **Headline + phone together must occupy at least 80% of canvas height**. The remaining 20% is split between top margin (above headline) and bottom margin (below phone). No single empty band > 22% of canvas height.
- **Headlines must auto-fit horizontally**. If a single word's measured width > 88% of canvas width at the chosen font size, you MUST do one of: (a) break the word onto its own line; (b) reduce font size to fit; (c) hyphenate. Letters running off-canvas is an instant fail. Verify with a measurement pass — do not eyeball.
- **Use up to 3 visual layers max per slide**: background → phone/illustration → headline + 1 accent. Above this becomes noise.
- **Never center-vertically a phone with empty bands above AND below**. Anchor the phone to one edge (top bleed, bottom bleed, or flush bottom).
## 2. Cross-screen / cross-canvas moments
The template exports crops from one connected canvas. Use that power sometimes, not constantly:
- **Default frequency:** in a 5+ slide deck, include **one** adjacent-screen cross-canvas moment unless the user's brief is strict, formal, or every screen must stand alone for legal/compliance reasons. In 8-10 slide decks, use at most **two**. In 3-4 slide decks, use it only when the concept obviously benefits.
- **Standalone rule:** every exported PNG must still read as one complete advertisement at thumbnail size. The neighbor may add delight, but it must not be required for comprehension.
- **Good seam-crossers:** oversized non-critical phone edges, screenshot mosaics, background gradients/photos, map routes, doodle paths, waveforms, sticker trails, glow/starfields, mascot limbs, 3D props, notification cards, and soft shadows.
- **Bad seam-crossers:** headline text, app name, legal copy, price, rating, CTA, required store info, faces/eyes, key chart numbers, primary product claim, or UI the headline depends on.
- **Amount:** let 10-30% of a visual cross the seam. Above 40% is allowed only for backgrounds, abstract paths, or deliberate panoramas; otherwise each crop feels like an accident.
- **Style fit:** minimal/photo-led styles should use background/photo continuation or one quiet card crossing the seam. Editorial and maximalist styles can use tilted devices, doodles, stickers, chips, mascots, or 3D objects, but still obey the style's density rules.
- **Seam placement:** put the boundary through negative space, a simple shape, or a shadow/texture transition. Never cut through detailed anatomy, text, or the focal point of a screenshot.
If a cross-screen element makes either individual crop feel broken, remove it or turn it into a contained single-screen element.
## 3. Illustration & SVG quality bar (anti-clipart)
The single biggest failure mode is "Figma-quick-draw" mascots and props that read as clipart. Every illustrated element must clear at least **3 of these 5 polish gates**:
1. **Two or more fill tones** per major shape — a body shape gets a base fill PLUS a 5–15% darker shadow side AND/OR a 5–10% lighter highlight rim. Single-flat-fill shapes are clipart.
2. **A cast shadow on the ground** — an elliptical drop shadow under standing characters/objects at 10–25% black opacity, 60–80% of object width, blurred 6–10px. Floats without shadows look pasted in.
3. **A surface texture** — halftone dots, paper grain, film noise, micro-stipple, or specular streak — whichever the style demands. At least 4% opacity, never zero.
4. **Volume cue** — at minimum an inner-shadow on the shaded side, a specular highlight on the lit side, OR a contour line that thickens on the shadow side. Flat outlined shapes with no volume cue look like icons.
5. **Detail density appropriate to scale** — a mascot rendered at 300px on a 1320px canvas needs visible facial expression (eyes with highlights, mouth with depth, cheeks/blush). The viewer should not be able to count the shapes in 1 second.
A 30-second sanity test: if you cropped the mascot/illustration out and put it next to a piece of art from the style's named inspiration (Cancoco, Mate, Superlist, etc.), would it look like it belongs in the same product, or would it look like a knock-off? If knock-off, re-render.
## 4. Mascot & illustration sizing minimums
When a style features a mascot/character/object, it must be **physically large on the canvas** — viewers see thumbnails:
| Element | Min size on 1320×2868 canvas |
|-------------------------------------------|--------------------------------------|
| Headlining mascot (cover slide) | **≥ 380px** tall (≥ 13% canvas H) |
| Companion / supporting mascots | ≥ 260px tall |
| Mascot inside-phone (within UI) | ≥ 120px tall |
| Hero 3D object (camera/globe/book/etc.) | ≥ 500px in its largest dimension |
| Floating chip / sticker (decorative) | 100–260px depending on role |
| Apple Watch macro (when called for) | ≥ 520px tall |
If the spec gives a specific size, that size wins. Otherwise, use these minimums.
## 5. Typography contrast & legibility
- All headline text must clear **WCAG AA 4.5:1** against the local pixel underneath it. If your headline sits over a gradient or photo, sample the **worst** pixel under the letter shapes — not the average — and verify against that.
- **The "emphasis word" trap.** Accent / italic / colored emphasis words are the most common contrast failure point: they're often a pale tint of the brand color (lilac on cream, mustard on sage, peach on tan) chosen for *style* without measuring contrast. **Every emphasis color must independently clear 4.5:1 against its slide bg.** If it doesn't, swap to a darker variant of the same hue family — never just "hope the user catches it." Examples that historically failed:
- lilac `#B49BE6` on cotton-candy gradient → 2.3:1 → FAIL, must darken to deep violet ~`#5B3FC8`
- mustard `#F2BB46` on sage `#BFD9B6` → 1.7:1 → FAIL, must switch hue to coral `#E45A4A` (~4.1:1) or darken to brown-mustard `#7A4F1B`
- any pale color over a 3-stop pastel gradient → ALWAYS verify against the lightest stop, not the average
- If contrast falls below 4.5:1 anywhere under the headline, you MUST do one of: (a) swap the color to a darker/different hue; (b) add a scrim (linear gradient overlay) under the text; (c) add a text-shadow large enough to lift contrast (2–4px offset, 30–45% alpha — not a "subtle" shadow that disappears in thumbnails); (d) move the headline off the busy area. Never ship low-contrast text and hope.
- **Headline-over-decoration rule**: if a 3D object (globe, mascot, glossy numeral, etc.) sits in the same vertical band as the headline, the headline letters MUST NOT cross the object's silhouette. Either move the object or move the headline — overlap is always a contrast disaster.
- Inside floating chips and stickers, body text must clear **4.5:1**. Tiny labels (< 12px equivalent) must clear **7:1**.
- **Subtitle / body copy on textured bg** (cork mosaic, paper grain, photo, gradient) must be either (a) larger than 36px equivalent at 1320px canvas width AND ≥ 4.5:1, OR (b) sit on a clean rounded scrim card. Small navy text on cork mosaic at 28px = unreadable at thumbnail size.
- Never use pure `#FFFFFF` text on a pure-saturated mid-tone background (e.g., white on `#7BC9F5` cyan) — drop to a near-white tinted with the bg's complement, or add a scrim.
## 6. Headline composition rules
- **Max characters per line, soft cap by canvas width**: `floor(canvasWidth / fontSize × 0.45)` chars. For a 96px Inter Bold headline on 1320px canvas, that's ~13 chars/line including spaces. Going over forces clipping risk.
- **Max 3 lines** for any headline. 2 is better. 1 is allowed only if the line fits comfortably in < 80% canvas width.
- **Hand-break lines for visual rhythm**. Each line should be approximately the same width OR alternate short-long deliberately. Avoid one fat line and one tiny widow line.
- **Trailing punctuation**: follow the style's spec. Default to a single period at end of full sentences; never a question mark in marketing headlines unless the spec allows it; never multiple exclamation marks.
- **Tracking and leading for big display type**: leading should be ≤ 1.05 (lines should kiss), tracking should be slightly negative (`-0.01em` to `-0.03em`). Loose default browser leading at display size always looks amateur.
## 7. Phone treatment
- **Bezel sizing matches the iPhone 15 Pro silhouette**: corner radius scales with phone width. At 920px phone width (≈70% canvas), use a 52–56px outer radius and a 36–42px inner screen radius.
- **Phone screenshot fill**: the user-supplied screenshot must fill the inner screen edge-to-edge with no white margin and no visible status-bar duplication. If the screenshot has a transparent background, that's a bug — flatten it first.
- **Tilt range**: respect the spec. If the spec calls for upright (0°), stay upright. If the spec allows tilt, stay within the stated range; never exceed it.
- **Phone drop shadow tinted with the bg**: pure black shadow on a colored bg looks pasted-in. Tint the shadow with the bg complement at 10–20% opacity. Two-shadow stack always (a long soft shadow + a tight contact shadow).
- **Use the default iPhone bezel.** Every phone-bearing slide MUST render the user's screenshot inside the template's default `Phone` device frame (the iPhone mockup PNG at `public/mockup.png` driven by the `Phone` component in `src/components/editor/device-frames.tsx`). **Do NOT** replace it with a bezelless rounded rectangle, a paper cutout, a cream paper border, or any custom-drawn frame. The bezel is the unifying visual across the whole skill output — strip it and the screenshots lose the iPhone read at thumbnail size. Per-style spec sheets may tint or shadow the area around the bezel, but they must NOT replace the bezel itself.
## 8. Background quality
- **No accidental gradient on flat-color slides** — if the spec says "flat" the bg must be a single hex, no gradient at all. Inverse: if the spec calls for a gradient, the gradient must use at least 3 stops with intentional hue shift, not a 2-stop near-identical-color gradient.
- **Noise / grain texture** at the opacity the spec requires. 0% noise on styles that demand grain (Retro Rubberhose, Hand-Drawn Editorial, Moody Curated Dating) is a fail.
- **Vignette only when the spec calls for it**. Adding a vignette to a Glassy Iridescent slide kills the brightness; omitting it on Moody Curated Dating kills the atmosphere. Follow the spec.
## 9. Decoration density discipline
Per slide:
- **Minimal styles** (Crisp Teal Bezelless Wallet, Editorial Minimal, Moody Curated Dating): **0** floating decorations.
- **Editorial styles** (Hand-Drawn Editorial, Soft Sunset): **2–5** decorations, intentionally placed.
- **Maximalist styles** (Glassy Iridescent Social, Paper Sticker Skeuomorphic, Glossy 3D K-Beauty): **8–14** decorations, scattered with at least one bleeding off-canvas.
Decoration density wrong-side either way (sparse maximalist or dense minimalist) reads as a style misfire.
## 10. Auto-reject checks (run before declaring done)
Before exporting, run through this list. Any "yes" means re-render:
- [ ] Any text running off-canvas or clipped by a slide edge?
- [ ] Any cross-screen element making an individual export incomprehensible, accidentally clipped, or dependent on its neighbor?
- [ ] Any seam cutting through headline text, legal/store info, faces/eyes, key UI, or the primary product claim?
- [ ] Any phone smaller than 65% of canvas height (on a phone-bearing slide)?
- [ ] Any empty band wider than 22% of canvas height?
- [ ] Any mascot/object below the minimum size for its role?
- [ ] Any headline text failing WCAG AA contrast at its hardest point against the bg?
- [ ] Any illustrated element failing 3+ of the 5 polish gates?
- [ ] Any pure-white text on a saturated mid-tone bg without scrim?
- [ ] Any single decoration that visibly snaps to a horizontal/vertical pixel grid in a style that calls for hand-placed rotation?
- [ ] Any image flattened with a transparent or black-rectangle artifact?
- [ ] Any "chrome" / "glass" / "3D" treatment that reduces to a flat color shift with no extrusion + highlight + shadow stack?
The agent's job is not done until all of the above are "no."
## 11. The thumbnail test (mandatory)
Shrink the rendered PNG to **220px wide** (App Store search-result thumbnail). Squint. Answer in one sentence:
1. What style is this?
2. What does the app do?
3. Why should I tap it?
If you cannot answer all three in one sentence, the slide failed the thumbnail test. The most common cause is undersized typography or a phone that becomes a tiny rectangle when scaled.
style-prompts/01-retro-rubberhose-mascot.md
---
name: retro-rubberhose-mascot
description: 1930s rubber-hose cartoon style — cream/mustard palette, white-gloved mascot, thick black ink outlines, vintage chunky display type, App-Store-Today coziness. Inspired by Cancoco.
inspiration: Cancoco, classic Disney/Fleischer cartoons (Steamboat Willie, Felix the Cat, Bimbo), retro tin-can packaging, 1930s American advertising, modern revival illustrators (Hayden Aube, Pedro Correa)
feel: cozy, friendly, nostalgic, "your daily walk has a tiny cartoon buddy"
---
# Retro Rubberhose Mascot
> **READ FIRST:** [`./_QUALITY_BAR.md`](./_QUALITY_BAR.md) — universal quality rules apply to this style.
## Hard quality rules (this style)
- **Phone size on phone-bearing slides** (this includes the HERO — the hero is NOT exempt): phone height = **80–88%** of canvas height (≈ **2300–2520 px** on a 1320×2868 canvas). The phone bottom MUST bleed off the canvas edge by 4–10% of its own height. **Concretely: render the phone at `height = canvas.height * 0.84` and crop the bottom.** On the hero, the mascot row (4 walking variants) peeks from BEHIND the phone — partially hidden behind its lower edge, not in front of an empty cream slab. Phone smaller than 80% canvas height on the hero is a hard fail.
- **Use the default iPhone bezel.** Use the template's stock `Phone` device frame (the iPhone mockup PNG). Do NOT replace it with a cream paper bezel, a hand-drawn outline, or any custom frame. The retro warmth comes from the cream/mustard *backgrounds, mascot, and inside-phone UI stickers* — not from re-skinning the iPhone itself. A 1-2% warm tint behind the phone (drop shadow color, halo glow) is fine.
- **Mascot scale is non-negotiable**: hero/cover mascot **≥ 420px tall** on a 1320×2868 canvas (≈ 14.5% canvas height). Companion mascots ≥ 300px. A 150px mascot in the corner is a fail.
- **Mascot polish gates** — must hit ALL of these:
1. **Halftone shadow** on the lower-right third of the body: black dots at 8–14% opacity, dot size 3–4px, denser at edge, fading toward middle. Pure flat fill = clipart.
2. **Pie-cut eyes ≥ 22% of body width each**, two large overlapping ovals, wedge cut from each, cream `#FBEFD2` whites (not pure white), large solid pupils, tiny cream highlight dot upper-right of pupil.
3. **Mitten gloves** with 3 black curved cuff lines on each wrist. No cuff lines = no character.
4. **Sausage-tube arms and legs** — uniform width, no joints. Knees and elbows are forbidden.
5. **Elliptical ground shadow** under any standing mascot: ~80% body-width wide, 8–10px tall, blurred 6px, `#1A1A1A` at 12% opacity.
6. **Surface line weight** ≥ 3.5px black ink at this scale, uniform width, `stroke-linecap: round`. Hairlines are a fail.
- The bezel is the default iPhone mockup — see above. (Earlier drafts of this spec required a cream paper bezel; that requirement is rescinded — use the stock bezel.)
- **Paper grain noise on every bg** at 7–9% opacity (SVG `feTurbulence` baseFrequency 0.65, mix-blend multiply).
- **Headline emphasis squiggle**: hand-drawn SVG path, 4–6 control points, 4–5px stroke, accent color (see below), extends 8–16px past the underlined word.
- **Accent color = coral `#E45A4A` by default.** Mustard `#F2BB46` is reserved for **backgrounds**, not accents — mustard-on-cream is ~2:1 contrast (the warm yellows sit at similar lightness as cream/sage) and reads as faded. Coral pops on every bg in this palette.
- Cream `#F4E6CC` bg → coral `#E45A4A` accent ✅ (~4.6:1)
- Mustard `#F2BB46` bg → coral `#E45A4A` accent ✅ (~4.0:1) or deep brown `#5C3A1E` ✅
- Pink `#F3A6B7` bg → coral `#E45A4A` accent ✅ or deep brown `#5C3A1E` ✅
- Sage mint `#BFD9B6` bg → coral `#E45A4A` accent ✅
- Cowboy-brown / terracotta bg → cream `#FBEFD2` accent ✅
- The rule: coral is the universal accent; only swap to deep brown/cream when coral itself clashes with bg-adjacent stickers/illustrations.
- **Sticker UI** inside the phone: every card/button has the 2-3px black border + the hard offset shadow `0 3-4px 0 #1A1A1A`. Soft blur shadows are a fail.
## Vibe summary
This is a warm, hand-drawn world that feels like a vintage tin lunchbox someone forgot in a sunny attic. A chunky yellow can-shaped mascot with white gloves and pie-cut eyes walks you through your day, surrounded by cream-paper backgrounds and chunky brown display type. Every shape is hugged by a fat black ink outline, every color is dialed warm (mustard, peach, pink, mint), and the UI inside the phones is rendered as soft sticker buttons that look pressable. The overall feeling is "1932 cereal box meets 2026 wellness app" — playful, slightly silly, and never cold or corporate.
## Global palette
### Warm cream backgrounds
- Primary cream paper: `#F4E6CC` (slide 1, slide 3 base, slide 5 stat-card)
- Soft butter cream: `#FBEFD2` (lightest variant, inside phone areas)
- Warm off-white: `#FAF3E3` (status bar / card highlights)
### Accent backgrounds (full-bleed slide colors)
- Mustard sun: `#F2BB46` (slide 2 main background, the "16628 steps" slide)
- Mustard deep: `#E5A52E` (gradient bottom edge on slide 2)
- Bubblegum pink: `#F3A6B7` (slide 4 "more you walk" slide background)
- Salmon coral: `#F19A8E` (decorative accents inside pink slide)
- Sage mint: `#BFD9B6` (slide 5 green stats slide)
- Mint deep: `#9CC692` (chart bars, accent shadows on mint)
### Character body fills
- Mustard can-yellow: `#F2BB46` (primary mascot body)
- Peach: `#F2B07A` (secondary mascot body)
- Pink mascot: `#EE92A4`
- Cowboy / wide character body: `#E08767` (terracotta)
### Text & ink
- Outline ink: `#1A1A1A` (a true-warm near-black, never pure `#000`)
- Brown wordmark fill: `#5C3A1E` (the CAN COCO logo color)
- Body text dark: `#2A2118` (slightly desaturated coffee)
- Caption gray: `#6B5E4D` (warm gray for secondary copy)
### UI accents inside phone
- Coupon yellow chip: `#FCD34D`
- Soft red "TODAY" stamp ink: `#C0392B`
- Mint button accent: `#8FCB9B`
## Mascot anatomy & rules
The mascot is the soul of this style. Document every rule strictly.
### Body shape
- A rounded **upright soft rectangle / oval can** — roughly 1.0 wide × 1.25 tall ratio.
- Top: a soft dome (think a can lid with no sharp seam).
- Bottom: identical rounded dome.
- Side silhouette is **slightly convex** — the can bulges out 4-6% in the middle.
- Cowboy / "wide" variant: same height but ~1.4× width, more pumpkin-shaped.
### Fill color
- Default: mustard `#F2BB46`.
- Peach variant: `#F2B07A`.
- Pink variant: `#EE92A4`.
- Body is rendered with a **subtle inner shadow** on the lower-right third — `inset -8px -10px 0 0 rgba(180, 120, 30, 0.18)` equivalent — to suggest 3D roundness without losing flatness.
### Eyes (pie-cut eyes)
- Two large overlapping ovals, roughly 22% of body width each.
- Whites are pure cream `#FBEFD2` (NOT pure white — keep them warm).
- Each eye has a **pie-cut slice** removed (a wedge missing, classic 1930s style), filled with body color OR with the dark pupil itself.
- Pupils: solid `#1A1A1A`, large (about 60% of the eye), positioned to convey expression (looking up-left, down-right, etc.).
- A tiny `#FBEFD2` highlight dot may sit at the upper-right of the pupil (1-2px at full size).
- Eyes are outlined with the same 3-4px black stroke as the body.
### Hands & gloves
- **White four-fingered mitten gloves** — classic rubber-hose hands.
- Glove fill: `#FBEFD2` (warm cream, never pure white).
- Glove outline: same 3-4px black.
- **3-line cuff detail** — three small black curved lines on the wrist of each glove (the classic button-cuff).
- Hand silhouette is a soft pillow oval with a thumb stub and the suggestion of fingers (often just a slight pinch line, not full finger separation).
- Arms are **sausage tubes** — uniform thickness, no elbow joint, no shoulder seam. They emerge directly from the body silhouette.
- Arm width: ~14% of body width.
### Feet / legs
- Same sausage-tube rule: legs are rounded stubs, no knee.
- Shoes: simple rounded **black or brown lozenges** that look like vintage spats or oxfords.
- One foot usually lifted in a walk cycle pose.
### Outline rules
- Every shape gets a **solid black `#1A1A1A` stroke at 3-4px** when the mascot is rendered at ~280-360px tall (on a 1242px phone canvas this is roughly 1% of canvas width).
- Stroke is **uniform width** — no tapering, no calligraphy.
- Stroke style: `stroke-linecap: round; stroke-linejoin: round;`
- NEVER use a thin or hairline outline. If in doubt, make it thicker.
### Pose vocabulary
- **Walking forward**: one arm raised in a wave, one leg lifted, slight forward lean.
- **Holding object**: both gloves cupped in front holding a coin, coupon, or phone.
- **Leaning back / posing**: hand on hip, the cowboy-hatted variant.
- **Tipping hat**: cowboy variant with one glove on hat brim.
- **Headband / sweatband**: fitness variant with a red or pink terry headband.
- **Sitting / chilling**: shorter pose, both legs forward.
### Costume / accessory variations seen
- **Cowboy hat**: brown `#8B5A2B` ten-gallon hat with a darker band.
- **Red sweatband**: thick `#E74C3C` headband across the forehead.
- **Sunglasses**: black rounded squares, no shine.
- **Tiny phone / coin / coupon** held in gloves.
### Surface texture on body
- A very light **halftone dot shadow** sits on the bottom-right curve of the body — small `#1A1A1A` dots at ~8% opacity, arranged in a gradient density (denser at the shadow edge, fading out). This is the 1930s newsprint feel.
## Typography
### Headline display font
- **Cooper Black** (or Recoleta Black, Filson Soft Black, Sofia Pro Black as fallbacks).
- Weight: 900 / Black.
- Letter-spacing: -0.01em.
- Line-height: 1.05.
- Color: dark brown `#2A2118` for body text, or accent color (mustard / red) for the highlighted word.
### Wordmark font (the "CAN COCO" logo)
- A custom-feel chunky slab/sans — closest off-the-shelf match: **Recoleta Black** or **Cooper Std Black** with manual tracking.
- Color: deep brown `#5C3A1E`.
- **Inline white shadow**: each letterform has a thin (2-3px) cream `#FBEFD2` inline highlight offset by `1px 1px` toward the upper-left, sitting INSIDE the letter shape. This creates the classic 1930s "embossed candy bar" look.
- Letter-spacing: 0.02em.
- All-caps.
### Body / UI label font
- **Nunito** or **Fredoka** at weight 600-700.
- Rounded sans, slightly bouncy.
- Color: `#2A2118` for primary, `#6B5E4D` for secondary.
### Caption font
- Same Nunito family, weight 500, size ~11-13px on phone canvas.
### Text effects checklist
- Headline emphasis word: color swap to mustard `#F2BB46` or coral `#F19A8E`, often paired with a hand-drawn squiggle underline in black 3px.
- Wordmark: inline cream shadow as above.
- Sticker labels (App Store badge): cream pill with thin black border.
- NO neon glows. NO gradients on type. NO modern variable-weight tricks.
## Headline emphasis
- One word is colorized — usually the action verb. Examples: in "**Walk** Can be a lot of fun", the word "Walk" is mustard `#F2BB46` while the rest is dark brown `#2A2118`.
- The emphasized word may sit on its own line for visual weight.
- A **hand-drawn underline squiggle** sometimes sits under the emphasized word — 3px black, gently wavy (not perfectly straight).
- Mixing case: headlines are sentence-case ("Walk Can be a lot of fun"), not Title Case or ALL CAPS, except for the wordmark.
## Phone / device frame treatment
- Bezel: **warm cream `#F4E6CC`** for the outer shell, NOT standard black. This makes the phone feel like a tin toy.
- Frame thickness: ~14-18px outer ring.
- Inner ring: a 2-3px `#1A1A1A` black outline traces the outer edge of the phone AND the inner screen edge (because every shape gets the black ink treatment).
- Corner radius: outer 48-56px, inner screen 36-42px (Apple-ish, but exaggerated softness).
- Shadow under phone: a **single soft drop shadow**, warm-toned: `0 24px 40px -8px rgba(92, 58, 30, 0.22)`. Never blue, never pure black.
- Status bar inside phone: simplified — small clock at top-left in dark brown, signal/wifi/battery icons in dark brown, NO color.
- Phone tilt: slides 1 and 3 use **straight upright** phones; slides with the mascot interacting may show a tiny ±2° tilt. Avoid heavy 3D rotation.
- The phone often sits with its **bottom edge cropped off the slide** to feel grounded.
## Background treatment
- Solid warm cream `#F4E6CC` is the workhorse background.
- Accent slides use full-bleed flat color (mustard, pink, mint) — no gradients EXCEPT a very subtle vertical darken at the bottom 25% (e.g., mustard `#F2BB46` → `#E5A52E`).
- **Paper grain overlay**: a 6-8% opacity noise texture across every background. CSS: `background-image: url(noise.png); mix-blend-mode: multiply; opacity: 0.07;`.
- NO photographs as backgrounds. NO gradients with multiple stops. NO blurs.
- Optional: a very faint repeating **halftone dot pattern** at the slide edges, ~4% opacity, dot size 3px, spacing 8px.
## Decorative accents
- **Halftone dot fields**: small black dots on a transparent layer, used to suggest shadow under the mascot or to fill a corner.
- **Scattered ink doodles**: tiny stars (4-point asterisks), squiggles, plus signs, small hearts — all in black 2-3px stroke, sprinkled in negative space at ~6-10% density.
- **Sparkle stars**: 4-point sparkle shapes (like a Twinkle Twinkle Little Star icon) in cream or mustard near the mascot's face to suggest cuteness.
- **Sunbeam rays**: optional — 8-12 thin triangular rays radiating from behind the mascot on accent-color slides, in a slightly lighter tint of the background (mustard rays on mustard at +8% lightness).
- **Footprint trail**: small black footprint icons trailing behind a walking mascot, fading from 100% to 30% opacity along the trail.
- **Polka dots**: large `#FBEFD2` cream dots scattered on pink slide background, 24-40px diameter, very low density.
- **Hand-drawn arrows**: chunky black 4px-stroke arrows with rounded heads, pointing at UI elements.
## Icons & UI sticker treatment
Inside the phone screens, every UI element is a **sticker** with personality.
- **Buttons**: rounded squircle pills, corner radius 18-24px.
- Button border: 2-3px solid `#1A1A1A`.
- Button fill: warm cream `#FBEFD2` for neutral, mustard `#F2BB46` for primary, mint `#9CC692` for success.
- Button drop shadow: `0 3px 0 0 #1A1A1A` (a hard offset shadow that makes it look like a stuck-on sticker), NOT a soft blur.
- Inset highlight: a 1px cream `#FBEFD2` line along the top inside edge of the button.
- Button label: Nunito 700, 14-16px, dark brown.
- Icon style inside buttons: simple line icons, 2.5px stroke, rounded caps, black ink — never filled flat icons.
- Cards: corner radius 20-28px, same 2-3px black border, same hard offset shadow, cream fill with a subtle paper noise.
- The "TODAY" coupon-style stamp uses a red `#C0392B` distressed ink stamp font, slightly rotated -8°.
- Bullet list items in slide 1: each bullet is a small mascot-color filled circle outlined in black, NOT a generic dot.
## Photo / illustration treatment
- **No photos anywhere.** Every visual is flat vector illustration with subtle textural fills.
- Body fills get a **halftone shadow** on the shadow side (described in Mascot anatomy).
- Each character has a **soft elliptical drop shadow** on the ground beneath them — pure `#1A1A1A` at 12% opacity, ellipse ~80% of body width, 8-10px tall, blurred 6px. This grounds the character without breaking the flat aesthetic.
- No gradient meshes, no realistic shading, no Photoshop layer styles. The shading vocabulary is: flat fill + halftone dots + a single mid-tone shape (optional) + black ink outline.
- Illustrated props (coins, hats, coupons) follow the same rules: flat fill, 3-4px black outline, optional halftone shadow.
## Copy tone
- Childlike enthusiasm, second-person, friendly verbs.
- Exclamation marks are welcome but not overused (max one per headline).
- Sentence-case throughout, not Title Case.
- Use simple short words: "Walk", "fun", "cute", "buddy", "today", "steps".
- Quoted lines actually visible on this mosaic:
- "Walk Can be a lot of fun"
- "Cute walking buddy"
- "Step count redeem for cans"
- "Encountering animals on walks"
- "Walking Companion"
- "16628" (large step count)
- "CAN COCO" (wordmark)
- "TODAY" (coupon stamp)
- "The more you walk the more animals you meet"
- "Accurate Data Recording"
- "App Store — Featured on Today" (top badge on slide 1)
## Per-slide breakdown (mandatory)
### Slide 1 — "Walk Can be a lot of fun" cover with bullet list
- **Background**: warm cream `#F4E6CC` full bleed with 7% paper noise overlay.
- **Top badge**: an "App Store — Featured on Today" pill at the very top, cream fill, 2px black border, small Apple logo and red "Today" word inside. Centered horizontally, ~60px from top.
- **Headline**: "**Walk** Can be a lot of fun" — large Cooper Black, three lines, left-aligned, starting ~120px from top, left padding ~60px. "Walk" word is mustard `#F2BB46`, rest is dark brown `#2A2118`. Font size ~84-96px on a 1242px canvas.
- **Bullet list**: three rows below the headline.
- Each bullet: a 24px circle filled in mustard, peach, or pink with a 2.5px black outline.
- Each label: Nunito 600, ~28-32px, dark brown.
- Lines: "Cute walking buddy", "Step count redeem for cans", "Encountering animals on walks".
- Row spacing: ~48px vertical gap.
- **Mascot placement**: a row of 4-5 small mascot variants at the bottom edge of the slide, walking left-to-right, partially cropped at the bottom. Includes the default yellow, peach, cowboy-hat brown, and a sunglasses variant. Each about 180-220px tall.
- **Floating elements**: a few sparkle stars and ink doodles between mascots.
- **Notable effects**: subtle ground shadow under the mascot row; paper grain visible throughout.
### Slide 2 — Mustard "16628 steps" slide with phone & CAN COCO wordmark
- **Background**: full-bleed mustard `#F2BB46` with a vertical gradient darkening to `#E5A52E` at the bottom 25%. 6% paper noise overlay.
- **Headline / wordmark**: "CAN COCO" wordmark in deep brown `#5C3A1E` with cream inline highlight, sitting in the bottom-right area, stacked on two lines ("CAN" / "COCO"), font size ~110-140px, very chunky.
- **Phone**: a single phone centered slightly left, straight upright, cream bezel, showing a screen with a large "16628" step count in dark brown Cooper Black centered, mascot illustration above the count, a "TODAY'S" coupon-style label below in red ink stamp, and a yellow primary action button at the bottom. Phone is roughly 60% of slide height.
- **Mascot placement**: a tiny mustard mascot inside the phone above the step count; also potential walking mascots along the bottom edge outside the phone.
- **Floating elements**: scattered sparkle stars in cream around the wordmark; subtle sunbeam rays behind the phone (mustard +8% lightness).
- **Notable effects**: warm soft drop shadow under the phone; the "TODAY'S" stamp is rotated -6° to feel hand-applied.
### Slide 3 — "Walking Companion" on white/cream
- **Background**: soft butter cream `#FBEFD2` full bleed with 6% noise. A subtle horizon line of slightly darker cream at the lower third.
- **Headline**: "Walking Companion" at the top center, Cooper Black, dark brown, ~72px, single line, with a small mascot-color highlight dot to the left of the word.
- **Phone**: a single phone, upright, cream bezel, showing a "home" screen with three mascot character cards (mustard, peach, cowboy) arranged in a 3-column grid, the big "16628" stat below, and a primary mustard CTA at the bottom labeled with a short action verb.
- **Mascot placement**: two larger mascots OUTSIDE the phone, one on the left (peach, holding a coin) and one on the right (cowboy-hat brown, tipping hat), each about 320px tall, both grounded with elliptical ground shadows.
- **Floating elements**: small footprint trail between the two outside mascots; a couple of ink-doodle stars.
- **Notable effects**: the three card portraits inside the phone each have a 3px black border and a hard offset shadow; subtle halftone shadow on the right side of the outside mascots' bodies.
### Slide 4 — Pink "more you walk, more animals you meet"
- **Background**: full-bleed bubblegum pink `#F3A6B7` with 6% noise. Scattered large cream `#FBEFD2` polka dots at low density (~6 dots, 28-40px each).
- **Headline**: "The more you walk the more animals you meet" at the top, two or three lines, Cooper Black, dark brown, ~58-66px, centered. The phrase "more animals" may be colorized in coral `#F19A8E`.
- **Phone**: a single phone, slight 2° tilt to the right, cream bezel, showing a chat-style screen where the wider pink mascot greets the user with a speech bubble; a mustard CTA at the bottom.
- **Mascot placement**: the **wide pink mascot** (`#EE92A4`, pumpkin-shaped) sits centered inside the phone with arms wide open. A second smaller terracotta mascot (`#E08767`) stands outside the phone on the right at slide bottom.
- **Floating elements**: a few sparkle stars and tiny hearts in cream around the mascots; a soft halftone shadow patch under the phone.
- **Notable effects**: the chat bubble inside the phone has the same 2-3px black border and hard offset shadow as other sticker UI.
### Slide 5 — Mint green "Accurate Data Recording" stats slide
- **Background**: full-bleed sage mint `#BFD9B6` with 6% noise.
- **Headline**: "Accurate Data Recording" at the top, Cooper Black, dark brown, ~64px, with a sparkle icon to the left of "Accurate". "Data" may be colorized in deeper mint `#9CC692` or in mustard `#F2BB46`.
- **Phone**: a single phone, upright, cream bezel, showing a stats / chart screen — a cream `#FBEFD2` card at the top with a small bar chart in mint `#9CC692` bars, a "Today" label, numeric stats in dark brown, and a yellow CTA button at the bottom.
- **Mascot placement**: a tiny mustard mascot **inside the phone** at the top of the stats card, waving. No exterior mascots (or one small one peeking from a corner).
- **Floating elements**: small ink-doodle plus signs and stars around the corners of the slide.
- **Notable effects**: chart bars have the same 2px black outline treatment; the card has a hard offset shadow `0 4px 0 0 #1A1A1A`.
## How to apply this style
1. Lock the palette first: cream `#F4E6CC` for base, mustard `#F2BB46` / pink `#F3A6B7` / mint `#BFD9B6` for accent slides.
2. Apply a 6-8% paper grain noise overlay to every background.
3. Draw or place the mascot at consistent scale (~280-360px tall on a 1242px canvas). Always include the 3-4px black outline and white-gloved hands.
4. Set headlines in Cooper Black (or Recoleta Black), dark brown `#2A2118`, with ONE word colorized in an accent.
5. Render the wordmark in deep brown `#5C3A1E` with a 2-3px cream inline highlight offset to the upper-left.
6. Build phone mockups with **cream bezels**, not black. Add a 2-3px black outline tracing the phone edge.
7. Style all interior UI buttons and cards as **stickers**: rounded corners, 2-3px black border, hard offset shadow `0 3-4px 0 0 #1A1A1A`, soft inset cream highlight on top edge.
8. Sprinkle small ink doodles (stars, sparkles, footprints) at 6-10% density in negative space.
9. Add an elliptical ground shadow under any free-standing mascot at 12% black opacity.
10. NEVER use pure white, pure black, or cool colors as primaries. Everything is warm.
## What this style is NOT
- Do NOT use modern flat geometric icons (no Material symbols, no thin SF icons). Icons must be hand-feel line drawings with 2.5px rounded strokes.
- Do NOT use thin black outlines — outlines must be heavy, 3-4px, uniform.
- Do NOT use cold colors (no #FFFFFF whites, no #000 blacks, no blue/purple gradients) as primaries.
- Do NOT use realistic 3D shading or gradient meshes on the mascot — only flat fill plus halftone dots plus optional single mid-tone.
- Do NOT use sans-serif headlines like Inter, Helvetica, SF Pro. The headline MUST be a chunky retro display.
- Do NOT use Title Case in headlines — sentence-case only ("Walk Can be a lot of fun" is the rule).
- Do NOT use blurred soft shadows alone — sticker UI uses HARD offset shadows.
- Do NOT use photos, photographic backgrounds, photo textures of skin/landscape, or AI-photoreal renders.
- Do NOT use neon, glow, glassmorphism, or any 2020s-era trendy treatments.
- Do NOT separate the mascot's fingers into five — gloves are mitten-style with at most a thumb split.
- Do NOT make the mascot's pupils small dots — they are LARGE, expressive, and pie-cut.
- Do NOT use angular sharp corners on UI — every rectangle is a squircle with 18-28px radii.
- Do NOT use Apple's default black bezels for phone mockups — bezels must be cream.
- Do NOT crop the wordmark or shrink it below readable size; it deserves stage space.
- Do NOT center every headline — slide 1 uses left-aligned text, and slides vary intentionally.
- Do NOT overload a slide with more than ~3 mascots; the mosaic uses small character ensembles only at the bottom of slide 1.
- Do NOT pick saturated or candy-bright colors. The mustard is warm, the pink is dusty, the mint is sage. Everything reads as slightly faded vintage paper.
style-prompts/02-moody-curated-dating.md
---
name: moody-curated-dating
description: Cinematic, dimly-lit lifestyle photography overlaid with white serif headlines and italic emphasis. Curated, exclusive, member's-club feel. Inspired by Mate.
inspiration: Mate, Raya, Pair Eyewear premium ads, The Inner Circle, Aman resorts campaign aesthetic
feel: intimate, candle-lit, "you've been hand-picked"
---
# Moody Curated Dating
> **READ FIRST:** [`./_QUALITY_BAR.md`](./_QUALITY_BAR.md) — universal quality rules apply to this style.
## Hard quality rules (this style)
- **Headline font size MUST be large.** On a 1320×2868 canvas, the cream serif headline must render at **≥ 132pt (≈ 176 px) per line** — minimum cap-height ~115 px. Previous renders at 78–82pt read as "small text floating in a dark void" and is a hard fail for this style. Use **140–160 px font-size** as your default and only drop if the line genuinely cannot fit at 88% canvas width. Line-height ≤ 1.08. The subhead/italic underline can be 40–50 px.
- **Phone size on phone-bearing slides**: phone height = **78–88%** of canvas height. Cover/hero slides without a phone keep the same headline-size rules.
- **Photography or photo-grade gradient is mandatory**. A simple 2-stop radial gradient on black is NOT enough. Build the fake-photo with at least: (a) a warm tungsten radial off-center at `#C99566 → #8A5A33 → #1F1C1A → #0A0A0B`, (b) a candle-bokeh blob (50px blur, 12% opacity, warm amber) in the upper third, (c) a teal-shifted shadow blob (40px blur, 8% opacity, `#1A2026`) on one side, (d) a radial vignette overlay `radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.62) 100%)`, (e) a bottom linear `linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%)` covering the bottom 35–50%, (f) a 5% film-grain SVG overlay with `mix-blend-mode: overlay`. Skip any one and the slide reads as a plain dark gradient.
- **Headline serif weight = 400 (regular)**, never bold or black. The contrast comes from italic, not weight. If your headline reads as "thick" you have used the wrong weight.
- **Italic phrase MUST exist on every slide** that has a headline. Same color, same weight, italic only. Without it, the headline is generic.
- **macron diacritic over the wordmark `a`**: a single horizontal cream `#F4EBDD` bar, length ~14% of cap-height, positioned one stem-width above the bowl of the `a`. Required on every wordmark instance. Omitting it breaks the lockup.
- **Phone tilt = 0°**. Tilted phones are a fail in this style.
- **No saturated accent colors anywhere**. Gold/candle-amber `#C99566`/`#E8B97A` is the only accent. Adding red/green/blue chips kills the mood.
- **Photo never crops through eyes or jawline** when actual photos are used.
## Vibe summary
This style sells exclusivity through atmosphere, not through chrome or gradients. Every slide reads like a still from a 35mm short film about a private dinner club — warm tungsten light spilling across faces, deep teal-black shadows swallowing the edges, and a quiet serif headline floating like a whispered line of dialogue. The voice is selective, second-person, and a little romantic: "your circle," "hand-picked," "worth your time." Nothing shouts. The photography does all the heavy lifting, and the UI hides almost entirely so the brand reads as a lifestyle, not a product.
## Global palette
Use these values as Tailwind arbitrary values or CSS custom properties.
| Token | Hex | Use |
|---|---|---|
| `--ink-0` | `#0A0A0B` | Deepest background, crushed-black shadows |
| `--ink-1` | `#0E0E10` | Phone screen background |
| `--ink-2` | `#16151A` | Phone card surfaces (solid fallback) |
| `--ink-3` | `#1F1C1A` | Warm-shifted shadow on photo darkest zones |
| `--vignette` | `rgba(0,0,0,0.62)` | Corner darkening at 40% from edges |
| `--bottom-fade-top` | `rgba(0,0,0,0)` | Top of bottom gradient (35% from bottom) |
| `--bottom-fade-bot` | `rgba(0,0,0,0.78)` | Bottom of bottom gradient |
| `--tungsten` | `#C99566` | Warm key-light highlight on skin |
| `--tungsten-deep` | `#8A5A33` | Warm mid-tones, lamp glow |
| `--candle` | `#E8B97A` | Specular candle/bulb highlights |
| `--teal-shadow` | `#1A2026` | Cool shadow side of faces (orange-teal grade) |
| `--cream` | `#F4EBDD` | Headline color, wordmark |
| `--cream-dim` | `rgba(244,235,221,0.72)` | Subhead opacity |
| `--cream-mute` | `#B8AFA2` | Phone body copy |
| `--gold-hairline` | `rgba(201,149,102,0.55)` | 1px ring around avatars/dividers |
| `--card-fill` | `rgba(255,255,255,0.04)` | Glass cards inside phone |
| `--card-border` | `rgba(255,255,255,0.08)` | 1px card border |
| `--notif-fill` | `rgba(28,26,24,0.78)` | Floating notification background |
| `--notif-border` | `rgba(255,255,255,0.06)` | Notification hairline |
| `--grain-opacity` | `0.05` | Film noise layer alpha |
Color philosophy: zero pure white, zero pure saturated colors. Even the brightest highlight is the warm cream, never `#FFFFFF`. Even "black" is a 1-2% warm-shifted dark, never `#000`.
## Photography rules (signature)
These are non-negotiable. The photography IS the brand.
- **Color grade:** classic teal-orange. Highlights pushed to warm amber `#C99566` / `#E8B97A`. Shadows pushed to cool teal `#1A2026`. Mids slightly desaturated. Hue shift roughly +8 on highlights warm, -12 on shadows cool.
- **Saturation:** sit it at ~70% of source. Reds should never glow; skin should look candle-lit, not Instagram-filtered.
- **Contrast:** high, with crushed blacks. Black point lifted to about RGB 8-12. Highlights rolled off so they don't clip — keep them around 235, never 255.
- **Vignette:** heavy radial darkening. Center at ~95% luminance, corners at ~55%. Use a radial-gradient overlay: `radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.62) 100%)`.
- **Subjects:** candid moments only — dinner parties, two friends embracing, head thrown back laughing, hand on glass of wine, eye-contact portrait at a bar. NEVER staged headshots, NEVER stock smiles, NEVER white-background product shots.
- **Skin tone preservation:** even with the warm grade, do not let skin go orange. Pull yellow out of skin slightly so warmth reads as light, not jaundice. Maintain ethnic skin-tone integrity — the grade should flatter every tone, not flatten differences.
- **Lighting:** warm key from side or above. Think practical lights — Edison bulbs, taper candles, a single window. Never on-camera flash, never softbox-flat. A visible falloff into shadow on one side of the face is mandatory.
- **Film grain overlay:** 4–6% monochrome noise on top of the entire photo. Use a tiled SVG noise or a `filter: url(#grain)` turbulence node. Grain stays consistent across all 5 slides for set cohesion.
- **Bottom gradient overlay:** the lower 35% of every photo gets a top-down linear-gradient `linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%)`. This is what makes the white headlines legible without a card.
- **Top gradient (light):** the top 12% gets a subtle `linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0))` so the wordmark sits cleanly.
- **No HDR clipping, no halation, no chromatic aberration.** This is cinema-grade, not filter-app.
## Typography
- **Headline face:** thin to regular serif with high contrast strokes. Use one of: Tiempos Headline, GT Sectra, Canela, or Recoleta as a free fallback. Weight 400 (regular) for body of the headline, italic 400 for the emphasis phrase. Optical size: display.
- Headline size at 1290×2796 canvas: **78pt** (≈104px) for the dominant title, **62pt** (≈82px) for shorter titles on slides with phones.
- Line-height: 1.08. Tracking: −0.5%. Hanging punctuation off.
- Color: `--cream` `#F4EBDD`. No drop shadow. Optional 0–1px text-shadow `rgba(0,0,0,0.35)` only if grain breaks legibility.
- **Subhead:** same serif family, **34pt** (≈45px), regular roman, color `--cream-dim` (cream at 72% opacity). One short line, no period required.
- **Phone UI body:** clean grotesque sans — Inter, Söhne, or SF Pro Display. Sizes inside phones: 13pt header, 11pt body, 9pt caption. Weight 500 for titles, 400 for body.
- **Wordmark — `mate`:** lowercase serif, same headline face, weight 400, size **44pt** (≈58px) in the top-left of slide 1 and centered below the phone on slide 2. The wordmark has a **diacritic-like macron or hairline stroke above the `a`** — a single horizontal short bar (~14% of cap-height long) sitting one stem-width above the bowl of the `a`, drawn in `--cream`. It evokes a long-vowel diacritic (mā́te) and is part of the lockup. Always render the mark; never strip it.
- **Tracking, leading, optical size:**
- Display headlines: `letter-spacing: -0.005em`, `line-height: 1.08`.
- Subheads: `letter-spacing: 0`, `line-height: 1.3`.
- Phone UI: `letter-spacing: -0.01em`, `line-height: 1.35`.
## Headline emphasis
Every headline contains ONE italicized phrase, never two. The italic phrase always carries the emotional payload of the line. Color stays identical to the rest of the headline (no color shift, no weight shift — italic only). Examples taken from the deck:
- "Every Thursday, with people at your level. *Upgrade your circle.*" (italic on the imperative)
- "We make a filter so *every person you meet is worth your time.*" (italic on the promise)
- "Every Thursday, We sit you at a table of 6 *hand-picked members.*" (italic on the differentiator)
- "Every day, *Limited curated profiles. Quality is key.*" (italic on the value prop)
- "*Complete profil[es]* — deep conversations." (italic on the product noun)
Rule: italicize the part that, if removed, would leave the line generic.
## Phone / device frame treatment
- **Bezel:** matte black, very thin — 6–8px equivalent at canvas scale. No silver edge, no notch chrome reflection.
- **Body:** flat black `#0A0A0B`, no gloss. A subtle 1px inner stroke at `rgba(255,255,255,0.04)` to separate bezel from screen.
- **Screen background:** `--ink-1` `#0E0E10`. Never pure black, never a gradient.
- **Inner glow:** an inset shadow on the screen `inset 0 0 60px rgba(201,149,102,0.06)` — a barely-there warm halo from the photo bleeding around the phone.
- **Drop shadow:** soft and warm-tinted. `0 40px 80px rgba(0,0,0,0.55), 0 8px 16px rgba(60,30,10,0.25)`.
- **Tilt:** essentially none. Phones sit upright, perpendicular to the canvas. Slight ±1° rotation is acceptable for life; never more.
- **Status bar:** rendered, monochrome white at 80% opacity, time `9:41`, full signal, full battery. Never colored carrier text.
- **Home indicator:** 5px tall white pill at 35% opacity, 35% of screen width, centered, 8px from bottom.
## Background photo placement & cropping
- **Full-bleed:** photo covers the entire 1290×2796 slide, edge-to-edge. Zero margin, no rounded corners on the photo itself (the App Store does that).
- **Subject placement:** off-center. Subjects sit on a vertical third — usually left third or right third — leaving the opposite negative space for typography. On full-screen-photo slides (no phone), subjects can also occupy upper third with text in the lower third.
- **Rule of thirds:** eyes of the primary subject sit on the upper third-line. Hands, glasses, and gestures live on the lower third-line.
- **Face safety:** never crop through eyes, never crop at the jawline. Hairline or shoulders are acceptable crop points.
- **Photo extends below the headline gradient.** The image itself never stops where the text starts — it fades behind via the gradient overlay.
- **Aspect handling:** if a source image is too tall or too wide, scale-to-fill (`object-fit: cover`) and bias the focal point toward the off-center subject.
## Floating UI elements (notifications/stickers)
- **Notification card (slide 2 — "Welcome to the circle"):**
- Shape: rounded rectangle, `border-radius: 22px` (translates to ~28px at canvas scale).
- Size: ~78% of phone screen width, 96px tall at canvas scale.
- Padding: 16px horizontal, 12px vertical.
- Fill: `--notif-fill` `rgba(28,26,24,0.78)` with `backdrop-filter: blur(28px) saturate(120%)`.
- Border: 1px `--notif-border` `rgba(255,255,255,0.06)`, plus an inner 1px `rgba(255,255,255,0.04)` highlight at the top edge for glass realism.
- Shadow: `0 20px 40px rgba(0,0,0,0.45)`.
- Content: small square app icon (22px, gold M monogram on dark) on left; bold title "Welcome to the circle." in 13pt Inter Semibold cream; body "Membership approved, you're a perfect fit. Only 1 in 5 applicants passes the filter." in 11pt Inter Regular at `--cream-mute`.
- Position: bursts out of the phone — its right edge extends ~8% beyond the phone bezel, sitting roughly vertically centered on the screen. Gives the impression the notification is "lifting off" the device.
- **Profile sticker bubbles (slide 3):** small circular avatars overlapping the phone:
- Diameter: ~84px at canvas scale.
- Border: 2px solid `--cream` with an outer 1px `--gold-hairline` ring (two-tone ring effect).
- Drop shadow: `0 8px 20px rgba(0,0,0,0.55)`.
- Photo inside is the same warm-graded portraiture.
- Three bubbles per cluster, slightly staggered vertically, the topmost one bleeding 30% off the right bezel.
- **Wordmark sticker:** the `mate` wordmark with macron sits cleanly on photo (slide 1, top-left) or below phone (slide 2, centered). Never inside the phone screen.
## Dark phone UI inside screenshots
- **App background:** solid `--ink-1` `#0E0E10`.
- **Cards:** fill `--card-fill` `rgba(255,255,255,0.04)`, border `1px solid --card-border` `rgba(255,255,255,0.08)`, `border-radius: 16px`, internal padding 16px.
- **Profile photos in lists:** square or rounded-square with `border-radius: 12px`, wrapped in a `1px solid --gold-hairline` ring with 2px inset gap (use double box-shadow trick: `0 0 0 2px var(--ink-1), 0 0 0 3px var(--gold-hairline)`).
- **Profile grid (slide 4):** 2-column grid of portrait cards, gap 8px, each card aspect 3:4, name overlaid bottom-left in 11pt Inter Medium cream with a small `linear-gradient(transparent, rgba(0,0,0,0.7))` foot. Tags/age live in 9pt under the name.
- **Schedule / time pills (slide 3 — "Your table for The Thursday Ritual is ready"):**
- Pill: `border-radius: 9999px`, padding 6px 12px, fill `rgba(201,149,102,0.10)`, border `1px solid rgba(201,149,102,0.30)`, text in `--candle` `#E8B97A` at 11pt Medium.
- Icon (calendar / pin): 12px line-icon in `--candle`, stroke 1.5px.
- **Buttons:** ghost style only — `1px solid rgba(255,255,255,0.18)`, text cream, padding 12px 20px, `border-radius: 12px`. No filled CTAs inside the screen.
- **List item text hierarchy:** name 13pt SemiBold cream; meta 11pt Regular `--cream-mute`; tertiary 9pt at 50% opacity.
- **Tab bar (slide 4):** 5 monoline icons, stroke 1.5px, active icon cream, inactive `rgba(255,255,255,0.35)`. No labels.
- **Profile screen (slide 5):** photo top with red/cream tag pills (e.g., "Tapas, cocktails and good conversations") overlaid in `rgba(201,149,102,0.18)` fill with `--candle` text, plus a horizontal interest bar / progress strip in muted gold below.
## Decorative accents
- Wordmark lockup with macron (always required where wordmark appears).
- Optional gold hairline divider — `1px` `--gold-hairline`, width ~12% of canvas, horizontally centered, used between wordmark and subhead.
- Soft warm noise grain layered globally (~5% opacity).
- A single small candle-glow bokeh blur in upper third on dinner-table slides — natural to the photo, never added as graphic element.
- **No icons floating freely on the background. No badges. No "App Store Rating 4.9". No arrows. No emoji. No confetti. No gradient blobs.** The photography carries the deck.
## Copy tone
- **Voice:** intimate, selective, occasionally second-person ("your circle", "your level", "your time"). Confident understatement.
- **Vocabulary palette:** curated, hand-picked, your circle, worth your time, ritual, filter, table of 6, members, quality, level, profile, deep conversation, Thursday.
- **Avoid:** "swipe", "match", "find love", "soulmate", any superlative ("best", "top", "#1"), exclamation marks, emojis, all-caps words, abbreviations.
- **Sentence case only.** Periods end every line. No question marks in headlines.
- **Numbers spelled out** below ten ("a table of six" preferred), digits acceptable for time/dates ("Thursday").
- **Actual lines from the deck:**
- "Every Thursday, with people at your level. Upgrade your circle."
- "Congrats, Andy"
- "We make a filter so *every person you meet is worth your time.*"
- "Your table for The Thursday Ritual is ready"
- "Every Thursday, We sit you at a table of 6 *hand-picked members.* 3 boys, 3 girls"
- "Every day, *Limited curated profiles. Quality is key.*"
- "*Complete profil[es]* — deep conversations."
## Per-slide breakdown (mandatory)
### Slide 1 — "Upgrade your circle" (group dinner hero)
- **Background photo:** warm dinner-party scene, two-row composition. Top half: a candle-lit table with several people, glasses raised mid-toast, deep crimson velvet/curtain behind them. Bottom half: two women in foreground embracing or leaning into each other, laughing. Color cast: heavy tungsten amber on faces and glasses, deep teal-black behind the figures. Crimson reds in clothing and curtain are desaturated to brick.
- **Vignette / gradient overlay:** radial vignette darkening the four corners by ~40%. A central vertical band stays slightly brighter so the wordmark at top and headline at middle both read.
- **Headline:** "Every Thursday, with people at your level." in cream serif, three-line stack centered horizontally, sitting at vertical middle (52–60% from top). Below it, a smaller line "Upgrade your circle." in subhead size at 72% opacity cream — this is where the italic phrase lives if you choose to italicize the subhead instead of inside the headline.
- **Wordmark:** `mate` (with macron) top-left, 44pt, 56px from top edge, 56px from left.
- **Phone:** NONE. Full-bleed lifestyle photo only.
- **Floating elements:** none.
- **Notable effects:** strongest grain on this slide because the dim midtones reveal it most. Slight warm halation around the brightest candle highlight is acceptable.
### Slide 2 — "Congrats, Andy" (acceptance moment)
- **Background photo:** medium close-up of a young man with longish dark hair under warm bar light, half-smile, looking slightly off-camera. Background blown out to a soft tungsten haze (deep golden bokeh). Strong key from upper-right, shadow falls across left cheek.
- **Vignette / gradient overlay:** standard radial vignette; bottom gradient takes over the lower 30% to cradle the wordmark.
- **Headline:** "Congrats, Andy" in cream serif, two-line stack with a comma break, centered horizontally, sitting at the top third (around 18–24% from top). Size 78pt. No italic (this slide uses the floating notification card as the rhetorical beat instead).
- **Phone:** NONE — the entire screen IS the "phone view" in a sense, but no device frame is rendered. The notification floats directly on the photo as if Andy just got the push.
- **Floating elements:** the "Welcome to the circle." notification described above, horizontally centered, sitting at ~56% from top. App icon on the left of the card is a small dark square with a gold `m` monogram.
- **Wordmark:** `mate` (with macron) centered below the notification card, ~22% from bottom, 44pt cream.
- **Notable effects:** the notification card's backdrop-blur should genuinely blur the photo behind it — this is the moment of contact between brand and user.
### Slide 3 — "Your table for The Thursday Ritual is ready" (booking confirmation phone)
- **Background photo:** dim dinner table or bar interior, very dark, mostly out-of-focus warm bokeh. Subject (likely a hand pouring wine or a candle) sits low-left or low-right. Used mainly as atmosphere — the phone is the hero.
- **Vignette / gradient overlay:** heavier than other slides — the photo is functionally a moody backdrop. Bottom gradient extends up to 50% to anchor the headline.
- **Phone:** upright, centered horizontally, occupies vertical 18–78% of canvas. Screen content:
- Top: small cream serif title "Your table for The Thursday Ritual is ready" centered, 13pt.
- Two amber-tinted pills stacked: calendar pill with date "Tuesday, December 20", location pill "Carrer Casp 24, Barcelona" (or similar). Both use the candle-amber tint described above.
- Center: three overlapping circular avatars (the cluster described in floating elements) — but these specific ones live inside the phone screen on a dark card, with the cream/gold ring treatment, suggesting the table of 6 starting to fill.
- Bottom: ghost button "Let's go" or similar in cream ghost-button style.
- Wordmark `mate` with macron sits at the bottom of the screen, just above the home indicator, in cream 18pt.
- **Floating elements:** profile sticker bubble(s) may bleed slightly off the phone's right bezel as noted.
- **Headline (outside phone):** "Every Thursday, We sit you at a table of 6 *hand-picked members.*" in cream serif, 3-line, centered horizontally below the phone (~85% from top). Italic on "hand-picked members." Subhead beneath: "3 boys, 3 girls" in 28pt cream at 60% opacity.
- **Notable effects:** the phone's inset warm glow is most visible here because the surrounding photo is darkest.
### Slide 4 — "Quality is key" (curated profile grid phone)
- **Background photo:** very dark — a single subject (woman in profile, half-lit, soft smile) on the right side, mostly silhouetted against a tungsten-glow background. The photo's job here is to frame the phone.
- **Vignette / gradient overlay:** strong radial vignette; bottom gradient again pulls the headline forward.
- **Phone:** upright, slightly left-of-center to balance the right-side photo subject. Screen content:
- Dark `--ink-1` background.
- Top status bar.
- 2×N grid of portrait cards (4 visible: a curly-haired woman, a man in blue tracker, a man with glasses labeled "Julian", a woman with red hair). Each card has the gold-hairline ring described, with name + age overlay bottom-left.
- Bottom tab bar with 5 monoline icons as specified.
- **Floating elements:** the small "Tracker 11" or "Julian" name labels — these are inside the cards, not floating.
- **Headline (outside phone):** "Every day, *Limited curated profiles. Quality is key.*" centered below phone in cream serif, italic on "Limited curated profiles. Quality is key." Position ~84% from top.
- **Notable effects:** the grid cards' gold rings catch warm light from the photo behind — keep that gold ring opacity high enough (50–60%) so it reads as part of the brand language.
### Slide 5 — "Complete profiles, deep conversations" (single profile detail phone)
- **Background photo:** waist-up portrait of a woman, looking directly at camera, soft smile, warm candle-amber light from frame-left. Brown/charcoal background, slightly out of focus. Most photographically forward slide of the deck.
- **Vignette / gradient overlay:** lighter vignette than slides 3 and 4 because the portrait itself is the hero alongside the phone.
- **Phone:** upright, positioned right-of-center or centered. Screen content:
- Profile photo at top filling ~55% of screen height.
- Overlaid name "Lucía" in cream serif 22pt, bottom-left of the photo, with a 4px round-cap underline in `--candle` directly beneath.
- Two interest tags as candle-amber pills: e.g., "Tapas, cocktails and good conversations" — pill wraps to two lines, full-width minus 16px margins, gold-tinted.
- Horizontal "interest bar" — a 4px tall progress-style strip in muted gold (`--tungsten-deep` fill, `--candle` highlight at ~40% width), no label, just a visual.
- Below it, secondary metadata in `--cream-mute` 11pt: language, neighborhood, profession in one line separated by `·`.
- **Headline (outside phone):** "*Complete profil[es]* — deep conversations." or similar, italic on "Complete profiles", positioned bottom of canvas at ~92% from top, may be partially cropped in mosaic preview as is intentional in the deck.
- **Notable effects:** subtle 1px cream underline beneath "Lucía" should be drawn as a separate element with rounded caps, not text-decoration, so it has presence.
## How to apply this style
1. **Source the photograph first.** Choose a dim, candid lifestyle shot with a single clear off-center subject and natural warm lighting. If you don't have a great photo, this style fails — don't substitute.
2. **Apply the orange-teal grade.** In CSS, layer: a `mix-blend-mode: multiply` warm-amber overlay at 8% opacity on top of the photo, plus a `mix-blend-mode: screen` cool-teal at 5% on shadows (via mask). Easier path: pre-grade in source and serve as JPG.
3. **Apply radial vignette** as a positioned overlay div with `radial-gradient(ellipse at center, transparent 35%, rgba(0,0,0,0.62) 100%)`.
4. **Apply the bottom linear gradient** as another absolutely-positioned div covering the lower 35–50% of the canvas with `linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.78) 100%)`.
5. **Apply the global film grain** as a fixed `pointer-events:none` overlay using a tiled SVG noise at 5% opacity.
6. **Place the serif headline** in cream, centered, with one italic phrase. Use Tiempos / GT Sectra / Canela / Recoleta.
7. **Add the wordmark** with the macron diacritic above the `a`. Same family as headline.
8. **If using a phone**, render it upright with thin black bezel, dark `#0E0E10` screen, glass cards, gold-hairline avatar rings, candle-amber pills, ghost buttons. No filled CTAs.
9. **Add at most ONE floating element** per slide — either a notification card OR a profile bubble cluster, never both on the same slide.
10. **Step back.** If anything reads loud, remove it. The style's strength is restraint.
## What this style is NOT
- Do not use bright daylight, pastel, or high-key photography. No beach, no white sheets, no flat outdoor light.
- Do not use sans-serif headlines. Ever.
- Do not use a bold or black weight serif. Headlines are regular or thin — the contrast comes from italic, not weight.
- Do not use solid color backgrounds, gradients-as-backgrounds, or blurred photo backgrounds in lieu of real photography. The photo IS the background.
- Do not use neon, electric blue, magenta, lime, or any saturated accent color. Gold/candle-amber is the only accent.
- Do not use rounded card containers around the headline. Text floats directly on the photo with help only from the bottom gradient.
- Do not use pure `#FFFFFF` text or pure `#000000` shadows. Cream and warm near-black only.
- Do not tilt phones, do not put them in clay-style 3D scenes, do not use floating shadows that look like Figma defaults.
- Do not use emojis, sticker graphics, badges, app store rating banners, arrows, or "As seen in" press logos.
- Do not stack more than 3 lines of headline text. If the line doesn't fit in 3, cut copy.
- Do not exclaim, do not ask a question, do not use all-caps. Sentence case with periods only.
- Do not include a CTA button in the screenshot graphics ("Download Now" etc). The App Store provides the CTA — your job is mood.
- Do not show filled brand-colored buttons inside the phone UI. Ghost buttons only.
- Do not show match percentages, swipe arrows, "It's a match!" graphics, hearts, flames, or any other dating-app cliché. This brand sells dinner, not Tinder.
- Do not let skin tones go orange. Warmth is in the light, not in the skin.
- Do not omit the macron over the `a` in the `mate` wordmark. It is the lockup.
style-prompts/03-paper-sticker-skeuomorphic.md
---
name: paper-sticker-skeuomorphic
description: Skeuomorphic paper-craft style — cork-board backgrounds, paper-cutout UI cards, marker handwriting headlines, sticker pixel-art accents, folder tabs. Student-organizer vibe. Inspired by Folderly.
inspiration: Folderly, Tot, Cosmos, paper-craft moodboard apps, 90s school binders, Lisa Frank trapper-keeper, washi-tape journaling, Pinterest scrapbook moodboards
feel: tactile, crafty, "your school binder come to life", joyful nostalgia, dorm-room desk, sticker book, kindergarten art class meets iOS 17
---
# Paper Sticker Skeuomorphic
> **READ FIRST:** [`./_QUALITY_BAR.md`](./_QUALITY_BAR.md) — universal quality rules apply to this style.
## Hard quality rules (this style)
- **Use the default iPhone bezel.** Use the template's stock `Phone` device frame (the iPhone mockup PNG). Do NOT replace it with a paper-cutout or cream cardboard border. The paper-craft world reads through the *background slab*, the *stickers*, the *marker headline*, and the *inside-phone sticker UI* — the iPhone itself stays as the default. You may tape washi-tape strips across the phone corner for the scrapbook feel, but the bezel is real iPhone.
- **Phone size on phone-bearing slides**: phone height = **82–90%** of canvas height (≈ **2350–2580 px** on a 1320×2868 canvas). The phone MUST bleed off the bottom edge by 5–10% of its own height. **Concretely: render the phone at `height = canvas.height * 0.86` and crop the bottom.** Below 82% is a hard fail — the paper-craft world depends on a big anchored phone.
- **Marker headline size**: **≥ 130 px (≈ 96pt)** on a 1320×2868 canvas. Slide 1 wordmark (e.g. "Bloom") **≥ 180 px (≈ 132pt)**. Smaller headlines read as bashful and fail the "binder/sticker book" energy. Use **140–160 px** as your default and only drop if the marker word genuinely cannot fit at 86% canvas width.
- **Marker headline color is bg-dependent.** Marker blue `#3E8FD6` on cork green is medium-on-medium and reads faded.
- Cork mosaic green bg → **marker red `#E45A4A`** (complementary hue, ~5:1 contrast) — the classic red-marker-on-green-chalkboard look.
- Peach / pink / dusty rose flat slabs → marker blue `#3E8FD6` ✅
- Putty grey / mint sherbet → marker blue `#3E8FD6` ✅ or marker red ✅ (either reads well)
- The squiggle underline follows the headline color exactly.
- **Subtitle size & contrast**: subtitle (the line under the marker headline) MUST be **≥ 44 px (~33pt)** on a 1320×2868 canvas (was 28–32pt — too small to read at thumbnail size on the cork bg). Weight: Inter Semibold 600+. Color: deep navy `#1F2A44` on light slabs; navy stays the same on cork mosaic but consider placing the subtitle on a small cream rounded scrim card if it crosses busy grout — never let small subtitle text float across multi-tone cork.
- **Cork-bg subtitle scrim** (slide 1 only): if the subtitle sits on the cork mosaic, render it on a small cream `#F8F0E2` rounded rect scrim (padding 16px h / 10px v, radius 12px, 1.5px paper shadow). This pins it to readable ground and reads as a "paper label stuck on the cork".
- **Cork tile mosaic on slide 1**: irregular 60–100px tiles, each rotated -2° to +2°, four green hues alternating, 1.5–2px cream `#F4EBDD` grout between tiles, plus 5% brown noise overlay. A flat green field = fail.
- **Marker headline gates** — must hit all:
1. **Font**: Caveat Brush / Permanent Marker / chunky marker only. Sans-serif = fail.
2. **Rotation**: -3° to +3° (visible tilt, not axis-aligned).
3. **Marker blue `#3E8FD6`** (or marker red `#E45A4A` if bg is blue-adjacent).
4. **Hand-drawn squiggle underline** — 4–6px stroke, 2–3 gentle waves, 8–16px overshoot past the word ends. Straight underline = fail.
5. **Size**: 72–84pt on 1242px canvas (~96–112px on 1320px canvas).
- **Sticker shadow** on every floating sticker, polaroid, washi-tape: hard offset `0 2px 2px rgba(33,28,22,0.22)`, not a soft blur. Stickers without contact shadow read as floating glitches.
- **Pixel-art stickers**: render at **integer pixel grid**, `image-rendering: pixelated`, with a 2px white "die-cut" outer border. Anti-aliased pixel art = fail.
- **Sticker density**: 5–8 stickers per slide minimum. Below 5 = sparse-maximalist failure.
- **Paper grain noise** at 7–10% opacity, `mix-blend-mode: multiply`. Without it, paper reads as plastic.
## Vibe summary
A joyful, deeply tactile aesthetic that treats every surface as a real, physical piece of paper, cardboard, cork, or vinyl sticker pressed onto a school desk. Each slide is a flat-lay composition: a colored construction-paper or cork background slab, then layered paper-cutout cards (the iPhones themselves are rendered as paper rectangles), with marker-pen headline lettering and a scatter of pixel-art stickers, polka-dot stickers, polaroids, and folder tabs. The vibe sits between a Lisa-Frank trapper keeper, a Pinterest scrapbook, and a Studio Ghibli desk shot — playful, hand-made, joyfully chaotic but compositionally balanced. Every element casts a soft, short paper shadow so the viewer reads depth as "layered paper on a surface" rather than "UI on a screen."
## Global palette
### Background slabs (one per slide)
- Slide 1 — Cork green / mint cork: base `#8FBE7C` with a tiled mosaic of `#A4D08D`, `#7FAE6C`, `#B3D69D`, `#94C283` (irregular ~80×80px tiles), white grout lines `#F4EBDD` at 2px.
- Slide 2 — Peach pink: `#F4C6BB` (warm salmon-blush) with 8% paper grain.
- Slide 3 — Dusty rose / coral pink: `#EFB1A4` (a touch deeper than slide 2) with 8% paper grain.
- Slide 4 — Putty grey / oat: `#C9C5BC` (warm muted greige) with 10% linen grain.
- Slide 5 — Mint sherbet: `#C9E6C2` (pale cool mint, lighter than slide 1 cork) with 8% paper grain.
### Paper white (cards, phones, notes)
- Off-white cream: `#F8F0E2` primary paper color (NEVER pure white).
- Edge highlight: `#FFFAF0` along top-left of each paper edge (1px subtle lift).
- Notepad page: `#FAF3E5` with horizontal rule lines in `#E8DAB7` every 22px.
### Marker / headline color
- Marker blue: `#3E8FD6` (bright but slightly faded, like a Crayola "blue" felt-tip).
- Marker blue shadow / second pass: `#2E76B8` (used as a 1-2px offset behind headline for depth).
- Marker red (accents, occasional words): `#E45A4A`.
- Marker yellow highlighter band: `#FCE36A` at 60% opacity behind some words.
### Text dark
- Body navy: `#1F2A44` (slightly warm, never pure black).
- Secondary body: `#5B6478` (cool grey-blue).
- Hint / placeholder: `#A0A4AE`.
### Sticker accent palette (vinyl stickers)
- Alien green: `#7AD66B` with `#4EA644` shadow.
- Hot pink: `#F25C8E`.
- Retro yellow: `#FBD24B`.
- Sky cyan: `#6CCDE6`.
- Lavender: `#B493DC`.
- Tomato red: `#E45A4A`.
- Sticky-note yellow: `#FAE680` (the classic Post-it shade).
- Washi-tape mint: `#A8E3C8` with white polka dots.
### Folder-tab palette (color-coded courses)
- Tab red `#E96B59`, tab orange `#F2A14B`, tab yellow `#F4D04C`, tab green `#7BC47A`, tab teal `#5FB8C0`, tab blue `#5C9ADF`, tab purple `#A28BD0`, tab pink `#F19BB6`.
### Shadow tokens
- Paper shadow (small): `0 2px 4px rgba(33, 28, 22, 0.10)`.
- Paper shadow (card): `0 4px 8px rgba(33, 28, 22, 0.12), 0 1px 2px rgba(33, 28, 22, 0.08)`.
- Paper shadow (phone): `0 10px 22px rgba(33, 28, 22, 0.18), 0 2px 4px rgba(33, 28, 22, 0.10)`.
- Sticker shadow (vinyl, harder edge): `0 2px 2px rgba(33, 28, 22, 0.22)`.
## Background textures (signature)
Every background is treated as a physical surface, never a flat fill. Layer ordering from bottom up:
1. **Base color slab** — the slide's background color above.
2. **Paper grain noise** — a tileable noise PNG at 7-10% opacity, `mix-blend-mode: multiply`, grain size 1-2px (think construction paper, not photographic film grain).
3. **Subtle vignette** — radial gradient from transparent at center to `rgba(33, 28, 22, 0.06)` at corners, very gentle.
### Per-surface texture rules
- **Slide 1 cork mosaic**: Tile the canvas with irregular 60-100px squares, each rotated `-2°` to `+2°`. Each tile uses one of the four green hues randomly. Between tiles, 1.5-2px gaps in `#F4EBDD` (cream grout). Add 5% additional brown noise (`#6B4F2A` at 5% opacity multiply) so it reads as cork/grass mat, not tile. Tiles closer to edges should be partially cropped so it feels endless.
- **Slide 2 & 3 peach/rose**: Flat construction paper. Add subtle horizontal "fiber" streaks: 1px lines of `rgba(255, 255, 255, 0.05)` every 6-9px irregularly, like recycled paper.
- **Slide 4 putty grey**: Linen weave — two perpendicular sets of 1px lines at `rgba(0, 0, 0, 0.04)` every 3px, creating an extremely subtle crosshatch.
- **Slide 5 mint**: Same construction-paper fiber as slides 2/3 but cooler.
**Every** paper element placed on these backgrounds gets a paper shadow (see tokens). Nothing floats without a shadow. Nothing is on a pure-white sheet.
## Typography
### Headline (the wordmark / slide title)
- Font: chunky hand-drawn marker — Caveat Brush, Permanent Marker, Reenie Beanie Bold, KG Happy Solid Bold, or Sketchnote Square. Strokes ~10-14% of x-height.
- Weight: only one weight (the chunky marker weight).
- Case: Title Case with capitalized first letter, or all-caps for short single words ("Courses", "To-do").
- Color: marker blue `#3E8FD6`.
- Size: 64-84pt at slide width 1242px.
- Letter spacing: -1% to 0%, slightly cramped like hand-lettering.
- Skew/rotation: each headline rotated `-3°` to `+3°` (NOT axis-aligned) to feel hand-written.
- Stroke treatment: optional 1.5px darker outline `#2E76B8` on the lower-right edge of each letter to simulate marker bleed.
- Underline: a hand-drawn squiggle — a wobbly horizontal stroke 4-6px thick in the same marker blue, running under the word, with 2-3 gentle waves. Often extends 8-16px past the word at one or both ends.
### Subtitle / body description
- Font: clean rounded sans-serif — Inter, SF Pro Rounded, or Nunito Semibold.
- Weight: 500-600.
- Color: body navy `#1F2A44`.
- Size: 28-32pt at 1242px width.
- Line-height: 1.35.
- Alignment: left-aligned, max width ~70% of slide.
- Often sits directly under the headline with ~24px gap.
### UI body inside phones
- iOS system / SF Pro Text / Inter at native iPhone sizing (16-17pt).
- Colors and weights follow real iOS conventions inside the app screenshots, BUT every card container is given a cream/paper background instead of pure white.
### Wordmark (slide 1 "Folderly")
- Same marker font as headlines but larger: 110-130pt.
- Same marker blue.
- Slightly heavier squiggle underline (6-8px stroke).
- May include a tiny star sticker (`★` in retro yellow) as a dot on the "i" or floating beside the wordmark.
## Headline emphasis
The headlines themselves ARE the emphasis. There is no separate accent word — the entire headline is the loud, joyful, marker-blue feature. Rules:
- The single noun in quotes ("ID Card", "To-do", "Subto-dos", "Courses", "Folderly") is the headline, marker style.
- Underlined with the squiggle described above. Squiggle color matches the marker headline (blue) UNLESS the slide background is already blue-adjacent, in which case use marker red `#E45A4A`.
- Headline sits in the top ~18% of the slide, left- or center-aligned depending on slide (see per-slide).
- Often slightly off-axis (`-3°` to `+3°` rotation).
- Optional `#FCE36A` highlighter band: a 60% opacity yellow rectangle behind the headline, slightly taller than the cap-height, with hand-drawn wavy top/bottom edges. Used sparingly (1 of 5 slides max).
## Phone / device frame treatment
Phones are NOT real iPhone bezels. They are paper cutouts:
- **Shape**: rounded rectangle, corner radius `48px` at ~620px phone width.
- **Paper border**: 14-18px of cream paper `#F8F0E2` framing the screen, like a paper picture frame. The border is NOT thicker at top/bottom (no notch shelf) — it's even all around.
- **Screen content**: the actual iPhone screenshot fits inside the paper frame, edge-to-edge of the inner rectangle. Inner radius `34px`. No dynamic island or notch — the screen is a clean rounded rectangle.
- **Shadow**: phone paper shadow token (see above). The shadow sits primarily below and slightly right of the phone (light from top-left).
- **Tilt**: phones are rotated `-2°` to `+4°` (slight, never wild). Slide 1 phone is straight or `-1°`; subsequent slides vary.
- **Optional curl**: 1 in 5 phones can have a slight torn or curled top-right corner — a small triangle of paper folded down revealing a darker `#E8DBC2` underside (~30×30px triangle). Use sparingly.
- **Edge highlight**: 1px line of `#FFFAF0` along the top-left edge of the paper border.
- **No status bar**: keep the iOS status bar but recolor it to match the in-app cream theme.
## Background photo / image treatment
There are NO photographs in this style. Every surface is either:
- Flat paper texture (backgrounds).
- Solid color paper cards (phones, notes, ID card body).
- Pixel-art stickers (vinyl cutout look).
- Hand-drawn marker illustrations (squiggles, stars, arrows).
If a real product photo is unavoidable, it MUST be styled as a polaroid: 12px white paper border, 24px chunky bottom border, taped to the surface with two washi-tape strips at the top corners, rotated `-6°` to `+6°`.
## Floating UI elements (stickers, doodles)
### Pixel-art stickers (small, scattered)
All pixel-art stickers are rendered at integer pixel size with crisp `image-rendering: pixelated`. They are vinyl cutouts: matte interior color + 2px white "cut" outline + harder shadow (`0 2px 2px rgba(33,28,22,0.22)`).
- **Alien sticker (Space Invader-style)**: 48×48px, green `#7AD66B` body, white outline, sits near phone bottom on slide 2 and slide 1. Rotation `-12°` to `+8°`.
- **8-bit knight / hero**: 56×56px, grey armor `#B8B6AE` + red plume `#E45A4A`, slide 1 bottom-right of phone. Rotation `+6°`.
- **Retro space invader (pink)**: 44×44px, hot pink `#F25C8E`, slide 1 left side. Rotation `-8°`.
- **Pixel heart**: 24×24px, red `#E45A4A`, scattered.
- **Pixel star**: 28×28px, retro yellow `#FBD24B`, scattered.
### Folder tabs
- Trapezoidal or rectangular tabs sticking out the top edge of a paper card.
- 80-120px wide, 32-40px tall (visible portion).
- Each tab a different folder color (see folder-tab palette).
- 6px corner radius on top corners only.
- 1.5px darker bottom-edge shadow line of same hue at 70% lightness.
- Often 4-6 tabs across the top of a notepad-like card (see slide 5 "Courses").
### Polka-dot stickers
- Circles 14-28px diameter.
- Solid color from sticker palette.
- White 2px outline (vinyl die-cut).
- Scattered in groups of 3-7 in slide corners and around phones.
- Rotation N/A (circles), but offsets are random.
### Washi-tape strips
- 90-130px long, 22-28px tall.
- Translucent pastel color at 75% opacity (mint, pink, yellow).
- Optional pattern overlay: white polka dots, diagonal stripes, or tiny stars.
- Torn/jagged edges on the short ends (irregular hand-cut look — 2-3px serrated edge).
- Rotated `-25°` to `+25°`, placed across corners of polaroids and headlines.
### Polaroid frames
- White paper `#F8F0E2`, 12px border, 24px bottom border.
- Inner image area filled with sticker illustration (no real photos).
- Tape strip across one or both top corners.
- Rotation `-8°` to `+6°`.
- Shadow: card paper shadow token.
### Sticky notes (Post-it)
- Square 100-140px, sticky-note yellow `#FAE680`.
- Slight curl on bottom-right corner — a triangle of `#E6CC54` revealed.
- Tiny handwritten marker text in navy.
- Rotation `-6°` to `+6°`.
### Hand-drawn doodles
- Stars (5-point, drawn with single marker stroke): 20-32px, marker blue or yellow.
- Arrows (curved, with arrowhead): 60-100px, marker blue, 4px stroke.
- Squiggles (3-wave horizontal lines): used as dividers under headlines and beside icons.
- Tiny circles / dots clusters: 4-6 dots in marker red around a point of interest.
### Paper clip
- Silver/grey `#C7CDD5` outlined paper clip, ~36×80px, 3px stroke.
- Pinned at top of a paper card.
- Rotation `+15°` to `+30°`.
### Receipt strip
- Long narrow cream rectangle `#F8F0E2`, ~80px wide × 320px tall.
- Bottom edge scalloped/zig-zag like a torn receipt.
- Monospace text in navy: "Hello, Filomena" or order-receipt content.
- Used as a personalized greeting strip (slide 3 & 4).
## Skeuomorphic UI inside phones
The app UI itself continues the paper aesthetic. Real-iOS conventions are bent to match:
- **Background of every screen**: cream `#F8F0E2` instead of system white.
- **Card containers**: cream rounded rectangles with the paper shadow token. Corner radius 18-22px.
- **List rows**: each row is its own paper "strip" with a tiny 1px paper shadow underneath, separated by 6-8px gaps (NOT divider lines).
- **Folder-tab tops on cards**: many cards have a small colored tab protruding from the top-left, 36-60px wide, like a Manila folder. Tab color = category color.
- **Checkboxes**: hand-drawn squares (3px wobble stroke), checked ones have a crayon-style ✓ in marker blue, slightly off-center.
- **ID card screen**: a paper rectangle with a holographic rainbow gradient stripe diagonally across it — gradient from `#F25C8E` → `#FBD24B` → `#7AD66B` → `#6CCDE6` → `#B493DC` at 30% opacity, plus a 2px white sheen. Photo area is a pixel-art sticker (the alien) rather than a real photo. "Student ID" caption in marker blue at the bottom.
- **Category color coding**: every item (course, todo) carries a 4px colored left edge in its category color, plus a tiny matching color dot.
- **Buttons**: rounded paper rectangles with 8px corner radius, colored fills, sit-on-paper shadow. Tap states slightly recessed (`inset 0 1px 2px rgba(0,0,0,0.1)`).
- **Avatars / profile**: small circular sticker with a pixel-art face inside.
- **Top app bar**: greeting "Hello, Filomena" in semibold navy, subtitle date in lighter grey, no background bar — just floats on cream.
## Decorative accents
- Polka-dot clusters of 3-7 in slide corners.
- Tiny scattered stars (marker yellow + marker blue, drawn 5-point).
- Hand-drawn arrows curving from the headline toward the phone, with arrowhead.
- Washi-tape strips at top corners of polaroids and occasionally taped across the slide background.
- Tape-corner triangles on photo polaroids (matte translucent, jagged edges).
- A single sticker quote bubble (marker outline, white interior) with hand-written text on one slide.
- Scribble underlines, double underlines, and the occasional circled word.
## Copy tone
Casual student / friendly best-friend voice. Conversational, never corporate. Sentences are short and end-stopped. Lowercase-friendly. Uses encouraging verbs ("Personalize", "Create", "Break down", "Choose"). Examples directly from this style:
- "Personalize your own ID Card. Choose from existing logos or upload your own."
- "Create and organize to-dos. Filter them according to Ongoing, Missed and Completed."
- "Break down tasks into smaller, manageable steps, ensuring better organization and progress tracking."
- "Create a course folder to keep all of course-related materials in one place."
Tone notes: never uses exclamation marks aggressively (max 1 per slide). Avoids buzzwords ("seamless", "powerful", "next-gen"). Embraces practical school-life vocabulary ("classes", "homework", "courses", "notes", "lectures").
## Per-slide breakdown (mandatory)
### Slide 1 — "Folderly" Cover
- **Background**: cork-tile mosaic on mint green base `#8FBE7C`. Irregular 60-100px green tiles with cream grout, rotated `-2°` to `+2°` each. Subtle brown noise overlay 5%.
- **Headline / wordmark**: "Folderly" in marker blue `#3E8FD6`, 120pt Caveat Brush style, rotated `-2°`, sits in top-left at about (80px, 80px). Squiggle underline 6px thick extending past the "y". A small yellow star sticker `★` at top-right of the "F".
- **Phone**: centered horizontally, ~620px wide, paper border 16px cream, tilt `0°` (straight). Phone shadow heavy (it's the hero). Screen content shows a To-Do home screen with cream background, "Hello, Filomena" greeting, a small alien sticker avatar, two cards (today's tasks), each with colored category tabs.
- **Floating sticker elements**:
- Pink retro space invader sticker at top-left of phone (~`-8°` rotation, x=160, y=320).
- Green alien Space Invader at bottom-right of phone (`+6°` rotation, x=720, y=1500).
- 8-bit knight sticker at far bottom-left (`+4°`, x=80, y=1900).
- Three polka-dot stickers (pink, yellow, cyan) bottom-center clustered.
- Two small marker-blue stars scattered top-right.
- **Notable effects**: cork base reads as a wall pinboard. Phone feels pinned. Slight grain on entire slide.
### Slide 2 — "ID Card"
- **Background**: peach pink `#F4C6BB` flat construction paper with 8% grain and faint horizontal fiber streaks.
- **Headline**: "ID Card" in marker blue `#3E8FD6`, 76pt, rotated `+2°`, top-left at (80px, 80px). Squiggle underline. The quotes-style framing (no actual quotes) — just the words "ID Card" prominently.
- **Subtitle**: "Personalize your own ID Card. Choose from existing logos or upload your own." in navy `#1F2A44`, 30pt Inter Semibold, left-aligned, max-width 720px, sits below headline with 28px gap.
- **Phone**: ~580px wide, paper border 16px cream, tilt `+2°`. Center of slide, slightly lower-half. Screen content shows the in-app ID card editor: a large cream paper card displaying the student ID with the alien sticker photo, holographic rainbow stripe diagonal, "Student ID" label in marker blue, name/ID-number fields, and below it a row of small logo chips (red, mint, lavender) the user can pick.
- **Floating sticker elements**:
- Tiny pixel alien sticker top-right of the slide (`+10°`).
- A small "ID" badge sticker in red `#E45A4A` floating beside the phone.
- 3 polka dots (cyan, yellow, pink) bottom-left cluster.
- **Notable effects**: the ID card on-screen has the rainbow holographic gradient at 30% opacity which is the slide's signature visual moment.
### Slide 3 — "To-do"
- **Background**: dusty rose `#EFB1A4` flat construction paper with 8% grain.
- **Headline**: "To-do" in marker blue, 80pt, rotated `-2°`, top-left. Squiggle underline extending past "o". Optionally a tiny marker-red checkmark doodle next to it.
- **Subtitle**: "Create and organize to-dos. Filter them according to Ongoing, Missed and Completed." Navy, 30pt, below headline.
- **Phone**: ~580px wide, paper border 16px, tilt `+3°`, centered. Screen shows: top bar "Hello, Filomena" + date. Below: pink sticker avatar in a circle. Then a cream card titled "To-do" with a folder-tab top in pink. Card lists 4 tasks each as a paper strip with colored left edge (mint, yellow, red, blue), checkbox at left, task name, due date. Filter chips at top: "Ongoing", "Missed", "Completed" — small paper pill buttons.
- **Floating sticker elements**:
- Cream receipt strip "Hello, Filomena" peeking from behind top of phone, rotated `-4°`.
- Two polka dots (yellow, mint) bottom-right.
- A small washi-tape strip at top-left corner of slide.
- **Notable effects**: paper-strip task rows with category color edges are the readable detail.
### Slide 4 — "Subto-dos"
- **Background**: putty grey `#C9C5BC` with linen crosshatch texture.
- **Headline**: "Subto-dos" in marker blue, 72pt, rotated `+1°`. Squiggle underline. Slightly narrower kerning to fit the longer word.
- **Subtitle**: "Break down tasks into smaller, manageable steps, ensuring better organization and progress tracking." Navy, 30pt, below headline.
- **Phone**: ~580px wide, paper border 16px, tilt `-1°`, centered. Screen shows: same "Hello, Filomena" greeting. A cream card titled "Prepare Research Proposal" with a colored folder-tab top in green. Inside the card: a vertical list of 6 sub-todo rows, each with a hand-drawn checkbox (some checked with crayon ticks in marker blue), small task text in navy, and a 3-dot drag handle on the right. Progress bar at top of card: cream track with marker-blue fill at ~40%.
- **Floating sticker elements**:
- Receipt strip "Hello, Filomena" again, tucked behind phone top-left.
- A small yellow star sticker top-right of phone.
- Polka dots (red, mint, pink) bottom-center cluster.
- **Notable effects**: the checkboxes are visibly hand-drawn (not perfect squares), and crayon ticks are the joyful detail.
### Slide 5 — "Courses"
- **Background**: pale mint `#C9E6C2` flat paper with 8% grain.
- **Headline**: "Courses" in marker blue, 78pt, rotated `-3°`, top-left. Squiggle underline extends well past the "s".
- **Subtitle**: "Create a course folder to keep all of course-related materials in one place." Navy, 30pt.
- **Phone**: ~580px wide, paper border 16px, tilt `+2°`, centered. Screen shows the Courses screen: a large cream notepad card filling most of the screen, with FIVE colored folder tabs sticking out of the top (red, orange, yellow, green, blue from left to right, each ~80px wide). Below the tabs the card body has horizontal ruled lines (notepad style) in `#E8DAB7` every 22px. A title "Courses" inside in marker blue. List of course folder strips below, each a small cream rectangle with a colored tab on its left edge and a course name in navy.
- **Floating sticker elements**:
- 3 polka dots (pink, yellow, mint) bottom-left cluster.
- One small pixel star top-right of phone.
- A small washi-tape strip across the top-right corner of the slide.
- **Notable effects**: the multi-color folder tabs are THE memorable visual — they're the trapper-keeper moment.
## How to apply this style
1. **Pick a slide background color** from the slab palette (mint cork, peach, rose, putty, sherbet). Apply the matching texture overlay (cork mosaic OR construction paper fibers OR linen crosshatch). Always add 7-10% grain noise + subtle corner vignette.
2. **Lay the headline** in marker font (Caveat Brush / Permanent Marker), marker blue `#3E8FD6`, 72-84pt, rotated `-3°` to `+3°`. Draw the hand-drawn squiggle underline by hand or with an SVG path (3 gentle waves, 4-6px stroke).
3. **Write the subtitle** in Inter Semibold navy, 28-32pt, left-aligned, max 70% width, 28px below headline.
4. **Build the phone as a paper cutout**: cream rectangle, 16px paper border, 48px outer radius / 34px inner radius, 0-4° tilt, paper-phone shadow. Place the real iOS screenshot inside the inner rectangle.
5. **Style the in-app UI to match**: cream backgrounds, cards as paper strips with shadows, folder-tab tops on category cards, hand-drawn checkboxes, category color coding via left-edge color bars.
6. **Scatter stickers**: 3-6 stickers per slide. Mix pixel-art stickers, polka dots, washi-tape, and the receipt strip. Each rotated `-15°` to `+15°`. Always with a hard sticker shadow.
7. **Add a hand-drawn doodle accent** if needed: arrow, star cluster, or scribble — never more than 2 per slide.
8. **Audit shadows**: every paper element must have a shadow. No floaters without grounding.
9. **Audit color**: only one bright marker color per slide. Sticker accents can be multi-color but should pull from the palette only.
10. **Verify hand-made-ness**: no axis-aligned headlines, no perfect rectangles for stickers, no pure white anywhere.
## What this style is NOT
- Do NOT use sleek, modern, bezel-less phone frames. Phones must be paper-bordered cutouts.
- Do NOT use thin sans-serif headlines (no Inter Light, no Helvetica Thin). Headlines must be chunky marker handwriting.
- Do NOT use photographs of any kind. Everything is paper, sticker, or pixel art.
- Do NOT use pure white `#FFFFFF` anywhere — always cream `#F8F0E2`.
- Do NOT omit drop shadows from paper cards, phones, or stickers. Shadows are non-negotiable.
- Do NOT axis-align everything. The whole composition should have small 1-3° rotations on most elements.
- Do NOT use gradients on backgrounds. Backgrounds are flat colored paper or cork tiles, never linear/radial gradients.
- Do NOT use neon, glowy, or glassmorphism effects. This is matte paper, not glass.
- Do NOT use corporate or buzzwordy copy. Voice is casual student-friend.
- Do NOT crowd: leave breathing room. Max 6 stickers per slide.
- Do NOT use perfectly geometric checkboxes/arrows/stars inside the UI — they should look hand-drawn.
- Do NOT use system iOS card styles (pure white rounded rect with no shadow). Every card is paper.
- Do NOT mix this style with 3D renders, isometric illustrations, or vector flat-illustration people. Only paper, marker, and pixel art.
- Do NOT use sentence-case marker headlines without rotation — they must visibly tilt to feel hand-placed.
- Do NOT pixel-blur the pixel-art stickers. They must be crisp `image-rendering: pixelated`.
- Do NOT use more than one marker color (blue) for headlines; reserve red sparingly for accents only.
- Do NOT remove the cork tile grout on slide 1 — the grout is what makes it read as cork board, not a green wall.
style-prompts/04-dreamy-pastel-couples.md
---
name: dreamy-pastel-couples
description: Dreamy cotton-candy sky gradient with kawaii pets and 3D globes. Italic serif emphasis word in lilac/coral. Soft lavender hearts and chat-bubble floaters. Inspired by Between / Couple apps.
inspiration: Between, Couple, Together couples apps, Korean/Japanese romance app aesthetics
feel: tender, dreamy, kawaii-romantic, "your shared little world"
---
# Dreamy Pastel Couples
> **READ FIRST:** [`./_QUALITY_BAR.md`](./_QUALITY_BAR.md) — universal quality rules apply to this style.
## Hard quality rules (this style)
- **Phone size**: 70–80% of canvas height on phone-bearing slides. Below 70% reads as empty.
- **Italic-serif emphasis word is non-negotiable, AND it must be readable.** On every slide with a headline, exactly one phrase rendered in: (a) a serif italic family (Playfair Display Italic / Newsreader Italic / Tiempos Italic), (b) **deep violet `#5B3FC8`** (occasionally rose `#C25A6E`) — NOT pale lilac `#B49BE6` (which fails WCAG AA on every slide bg in this style), (c) 1.05–1.10× scale relative to surrounding sans, (d) NOT bold. The pale lilac was failing thumbnail-size legibility; the deep violet still reads as romantic + serif but actually achieves ~6:1 contrast against the cotton-candy gradient and cream backgrounds. If the emphasis word feels like it's disappearing, the contrast has failed — re-render.
- **Headline must NOT overlap the 3D globe AND must be center-aligned.** The headline is always horizontally centered across the canvas — never left-aligned. To preserve both rules, shrink the globe to ≤ 22% canvas width and pin it to the upper-right corner (top: ~2% canvas height, right: ~3% canvas width). The centered headline at ~85% canvas width should never touch the globe — verify the rightmost letter of the longest line ends at least 60px before the globe's left edge.
- **3D globe quality**: NOT a flat circle with a hue gradient. Required: (a) ocean fill `#BAD4F2` base, (b) mint sherbet `#BDE3C9` landmass shapes drawn on top, (c) terminator-shadow darker mint `#9CCDB1` on the shaded hemisphere, (d) a warm white `rgba(255,255,255,0.40)` 30px-blur specular highlight upper-left, (e) navy drop shadow `0 24px 40px rgba(27,34,64,0.18)`. Minimum diameter 460px on this canvas. A flat 2-color disc = fail.
- **Kawaii mascot quality**: must have **face features ≥ 30px each** at the rendered scale (cheek blush, eyes with highlights, a mouth, ears or steam puff). A featureless silhouette = fail.
- **Cotton-candy gradient**: full 3-stop `linear-gradient(180deg, #DDEBFA 0%, #F5E0F0 45%, #FCEFD6 100%)` OR a sanctioned per-slide alt (butter yellow / peach pink). A 2-stop near-identical gradient kills the dreaminess.
- **Decoration density**: 3–5 elements per slide (cloud + heart + chat bubble + stamp + sparkle). Below 3 reads as bare; above 7 reads as chaos.
- **Use the default iPhone bezel.** Use the template's stock `Phone` device frame (the iPhone mockup PNG). Add a soft navy drop-shadow `drop-shadow(0 24px 40px rgba(27,34,64,0.18))` around it, but do NOT strip the bezel. The dream comes from the cotton-candy bg + kawaii mascot + lilac italic emphasis — not from skinning the phone.
## Vibe summary
This is the visual language of a quiet love letter rendered as a screen. Each slide feels like the inside of a shared diary written in pastel highlighter — cotton-candy skies, hand-shaped 3D globes the color of mint ice cream, and chubby kawaii pets that look like plush toys. The mood is unmistakably Korean/Japanese romance-app: tender, intimate, second-person, and obsessed with tiny gestures (a heart counter, a chat bubble, a paw print on a map). The single most identifiable signature is the italic serif emphasis word in lilac dropped into an otherwise clean sans-serif headline — that ONE word does all the emotional heavy lifting and must be present on every slide that has a title.
## Global palette
### Sky / background gradient stops
- Sky top (cool blue): `#DDEBFA`
- Sky mid (lilac haze): `#F5E0F0`
- Sky bottom (peach cream): `#FCEFD6`
- Alt background — pastel butter yellow (Raising Pets slide map): `#FFF8D4`
- Alt background — peach pink (Miss You slide): `#FBE3D7` to `#F7C9D6`
### Text colors
- Primary headline: deep navy `#1B2240`
- Emphasis word (italic serif): lilac/violet `#B49BE6`
- Alternate emphasis (coral, allowed once per mosaic): `#F39A9A`
- Subtitle / muted: dusty grey `#8A8FA3`
- In-phone UI body: charcoal `#2A2E3D`
- Wordmark microtype: `#A7B0C4` at 70% opacity
### Globe colors
- Ocean / sea: pale baby blue `#BAD4F2`
- Land mass: mint sherbet `#BDE3C9`
- Land mass shadow (terminator side): muted sage `#9CCDB1`
- Highlight on top-left of sphere (light source): warm white `#FFFFFF` at 40% with 30px blur
- Drop shadow under globe: `#1B2240` at 12% opacity, 40px blur, y-offset 24px
### Sticker / accent colors
- Lavender chat bubble fill: `#B49BE6`
- Lavender chat bubble shadow: `#7E66B5` at 22%
- Hot pink heart sticker: `#FF6FA3` (with neon glow `#FF6FA3` at 50% opacity, 28px blur)
- Soft pink heart card fill: `#FFD7E1`
- Buttercup yellow sticker: `#FFE27A`
- Mint stamp accent: `#BDE3C9`
- White card fills: pure `#FFFFFF` with `#1B2240` 8% drop shadow
### Pet illustration palette
- Husky grey: `#C9D2DA` body, `#FFFFFF` chest, `#3A4154` nose
- Cinnamon-brown pup (Shiba-style): `#E8A86A` body, `#FFE9CC` muzzle
- Panda monochrome: `#FFFFFF` body, `#2A2E3D` patches
- Smiling cream cat: `#F4D9B0` body, `#FFE8C9` belly
- Universal pet blush: `#F8B6C5` at 60%
- Pet eye dots: `#1B2240` with `#FFFFFF` catchlight
## Gradient & atmospheric treatment
The dominant background is a smooth vertical 3-stop gradient: cool sky-blue at the top, transitioning through a lilac haze in the middle, into a peach cream at the bottom. The gradient runs strictly 180deg (top to bottom). Stops sit roughly at 0% (`#DDEBFA`), 55% (`#F5E0F0`), 100% (`#FCEFD6`).
Layer a subtle film grain on top: 1.5% monochrome noise at `mix-blend-mode: overlay` — just enough to break up banding.
Cloud overlay: very faint cotton-puff cloud illustrations (soft white shapes, 8–12% opacity, gaussian blur 6px) drifting horizontally near the top third of each slide. Clouds are oblong, rounded, no outlines — think drawn-with-a-cotton-ball. Never let clouds become a focal element; they're atmosphere.
The peach/pink slide ("Miss You") uses a warmer rotation of the same gradient: `#FBE3D7` → `#F7C9D6` → `#F3B6CC`. Same noise, same cloud treatment.
The pets slide swaps the sky for a flat butter-yellow `#FFF8D4` with a stylized cream-and-mint map overlay (see Map treatment).
## Typography
### Font stack
- Headlines (sans): Pretendard, Apple SD Gothic Neo, Inter, system-ui — weight 600 (Semibold), letter-spacing -0.01em
- Emphasis word (serif italic): Newsreader Italic, Tiempos Italic, Source Serif Pro Italic — weight 400, italic, letter-spacing -0.005em
- Subtitle: same sans stack, weight 500, color dusty grey `#8A8FA3`
- In-phone body: Pretendard Regular (or Noto Sans KR fallback)
- Microcopy under headline (cover wordmark "Couples Use"): tracking +0.12em, ALL CAPS, weight 500, 11px
### Headline size hierarchy
- Cover headline (3 lines): 56–64px, line-height 1.05
- Interior slide headlines (2 lines): 40–46px, line-height 1.1
- Subtitle: 18–20px, line-height 1.4
- Microcopy: 11–13px
### Title case rules
Headlines use Title Case (every major word capitalized). Subtitles use sentence case. Quoted phrases inside headlines wrap in straight double quotes `"Miss You"`.
## Headline emphasis (signature)
Exactly ONE word per headline receives the dual transformation: it switches to **italic serif** AND changes color to **lilac `#B49BE6`**. This word is almost always an adjective ("exclusive", "real", "together") or a verb that carries the emotional payload ("connect", "miss", "share").
Examples:
- "The *exclusive* app for couples." → "exclusive" in italic lilac
- "Connect With *Your* Lover" → "Your" in italic lilac (rendering choice — pick the word that carries possessiveness)
- "*Real* Time Location Sharing" → "Real" in italic lilac
- "Raising Pets *Together*" → "Together" in italic lilac
- "Send A Sw *'Miss You'*" → the quoted "Miss You" phrase in italic lilac
The italic word is rendered slightly larger (1.05x of the surrounding sans) and has a tiny negative letter-spacing (-0.01em) to feel like a handwritten flourish. No underline. No shadow. Color alone + italic + serif does the work.
## Phone / device frame treatment
Slim iPhone 14/15 frame — black titanium bezel (`#1B1B1F`), 3px even border, 48px corner radius, no Dynamic Island detail visible (or a tiny pill dock). Phones are upright, dead center horizontally on their slide. Drop shadow: `#1B2240` at 14% opacity, 40px blur, y-offset 16px — soft and floaty, never crisp.
Phone scale: phone is approximately 62% of the slide width on phone-hero slides, 48% on globe-hero slides where the globe overlaps in front of (or behind) it.
On the cover slide and "Connect With Your Lover" slide, the 3D globe sits LARGER than the phone and visually dominates — the phone effectively disappears or is replaced by the globe as the hero. On the cover, there may be no phone at all — just the globe with floating UI fragments and avatar pins.
## 3D Globe (signature element on first 3 slides)
The globe is the visual anchor of the brand. Specs:
- **Geometry**: perfectly spherical, 3D-rendered with very soft Lambertian shading. Diameter is roughly 1.3–1.5x the width of the phone (or ~52% of slide width if no phone). Sits center-frame, slightly below vertical center on cover, lower-left on "Connect With Your Lover" slide.
- **Surface**: stylized continents in mint sherbet `#BDE3C9` over baby-blue oceans `#BAD4F2`. Continent edges are slightly rounded — no jagged coastlines. No country borders, no labels, no latitude lines.
- **Lighting**: single warm-white light from top-left at ~45deg. Highlight is a soft white smudge at upper-left covering ~18% of the sphere, blurred 30px. Terminator (shadow side) on lower-right is a 12% navy gradient that wraps the sphere edge.
- **Ground shadow**: a soft ellipse `#1B2240` at 10% opacity, 60px blur, sits directly under the globe — never extends beyond globe diameter.
- **Journey line**: hand-drawn dotted line in white (`#FFFFFF` 80% opacity) connecting two avatar pins across the globe surface. Dots are 3px diameter, spaced 8px apart, curving with the sphere's surface — must FEEL like it's wrapping around the sphere, not floating above it.
- **Avatar pins**: tiny circular profile pictures (28–34px), each with a 2px white ring and a small white teardrop pin underneath. Two pins always — one for each partner.
- **Distance / day sticker**: small white pill sticker on the globe surface (e.g., "Day 4" or "12040km"). Pill is `#FFFFFF` fill, 12px text in navy, 16px horizontal padding, 10px vertical, soft shadow.
- **Tiny continent label on cover**: a hand-drawn outline of a continent (sketch-style stroke `#FFFFFF` 70%, 1.5px) sometimes hovers off the globe as a decorative flourish.
## Floating chat / sticker bubbles
These are sprinkled around the globe and phone like a confetti of intimacy. Each is its own micro-component:
### Lavender chat bubble ("I love you" / "Miss you")
- Shape: rounded squircle, corner radius 18px, with a small triangular chat tail at the bottom-left or bottom-right
- Fill: `#B49BE6`
- Text: `#FFFFFF`, Pretendard 14–16px, weight 500
- Shadow: `#7E66B5` at 22% opacity, 16px blur, y-offset 6px
- Padding: 12px horizontal, 8px vertical
- Position on "Connect With Your Lover": two stacked bubbles upper-right of globe, slight 4deg rotation alternating directions
### Heart counter card ("214 days" / "Happy forever")
- Shape: rounded rectangle card, corner radius 20px
- Fill: `#FFFFFF`
- Inside: large soft-pink heart `#FFD7E1` with the count number `214` overlaid in navy bold serif (Tiempos or Newsreader Bold), 48px
- Subtitle below: "days" in tiny grey caps, 10px
- Shadow: `#1B2240` 8% opacity, 24px blur
### Neon pink heart (Miss You slide)
- Hot pink filled heart `#FF6FA3`, ~140px tall
- Neon glow: `#FF6FA3` at 50% opacity, 28px blur, expanding 12px outside heart silhouette
- Small "x214" or "x280" counter rendered above heart in chunky outlined display serif, navy stroke 2px, no fill (or off-white fill)
- Sits inside the phone screen, centered
### Yellow smiley / yellow heart sticker
- Buttercup `#FFE27A` heart or chat sticker, ~36px
- 2-tone shading (lighter top-left)
- Used as accent confetti — never more than 1 per slide
### "Choose" or CTA mini-pill
- White pill button with navy text, drop shadow — sits on the globe near the avatar pin on cover slide
- Border radius 999px, padding 8px 16px
Every sticker/bubble has a slight rotation (between -8deg and +8deg) — never perfectly upright. They feel hand-stuck onto the canvas.
## Pet / mascot illustrations
The Raising Pets Together slide centerpiece. Style rules:
- **Aesthetic**: flat-color kawaii, NO outlines (or very thin warm-grey `#C9B89A` outlines at 1px max). Think Line Friends / Sanrio energy but slightly more grounded.
- **Proportions**: heads are 50–55% of total body height. Bodies are squat plush-toy ovals. Legs are stubby. The whole pet should look squeezeable.
- **Faces**:
- Eyes: solid navy `#1B2240` ovals with one tiny `#FFFFFF` catchlight dot in upper-right
- Mouth: tiny "ω" curve or open smile with pink tongue dot
- Cheeks: small rosy ovals `#F8B6C5` at 60% opacity, 8px wide
- **Pet roster on the slide (left-to-right)**:
1. Husky pup — grey `#C9D2DA` with white face mask and chest, pointed ears
2. Cream cat sitting upright — `#F4D9B0`, tiny triangle ears, curled tail visible from side
3. Cinnamon/orange fluffy pup (Shiba-style) — `#E8A86A` with cream muzzle, curled tail
4. Baby panda — white body with black ear, eye-patch, leg, and arm patches
5. Optional 5th: small chick or bunny in pastel
- **Shadow under each pet**: soft ellipse `#1B2240` 12% opacity, 12px blur, 80% of pet's footprint width
- **Arrangement**: pets sit in a gentle staggered row across the lower 40% of the phone screen, each one slightly different height (varying ground line by 4–8px to feel playful, not lined-up)
- **No anthropomorphism**: pets don't hold phones or wear hats — they just exist and are cute
## Map treatment (location sharing slide)
The "Real Time Location Sharing" slide phone screen shows a soft minimal map:
- **Base color**: cream `#FBF6E8`
- **Roads**: thin white `#FFFFFF` strokes, 2–3px, no labels
- **Parks / greenery**: soft sage blobs `#D5E8D0`, irregular organic shapes
- **Water**: same pale blue as globe ocean `#BAD4F2`, irregular shape
- **No street labels, no POI icons, no compass** — the map is mood, not utility
- **Avatar pin**: large teardrop pin in white with navy avatar circle (40px) inside, dropping a soft shadow on the map. Pin sits roughly center of map.
- **Address card at bottom of phone screen**: white rounded card with "Jack" name in bold, an address line in grey, tiny phone/message icons on the right. Card has 24px corner radius and soft shadow.
The Raising Pets slide uses a different map style:
- **Base**: butter yellow `#FFF8D4`
- **Greenery patches**: same sage `#D5E8D0` in larger irregular shapes
- **Tiny path**: dotted brown `#A88962` 2px line meandering between pet positions
- **A mini house sticker**: small house illustration in upper-right corner
## Decorative accents
- Tiny 4-point stars `✦` in white at 50% opacity (`#FFFFFF`), 8–14px, scattered around globes and phones — 4–7 per slide
- Small sparkle clusters near chat bubbles (3 dots in a triangle)
- Dotted travel lines in white between avatar pins
- Cotton-puff clouds (oblong soft shapes) drifting at top of sky slides
- Small heart icons `♥` in lilac or pink as bullet points
- Faint outlined continent silhouettes floating off-globe (sketch-style stroke, 70% white)
- Soft pastel grid floor: never literal, but pets and stickers feel like they sit on an implied soft ground
NEVER use sharp geometric shapes (triangles, hard polygons), thin outlines on text, or neon gradients beyond the single hot-pink heart glow.
## Copy tone
Tone is soft, romantic, second-person, simple. Every word feels like a whisper or a sticky-note. Avoid corporate verbs ("optimize", "leverage"). Prefer warm verbs ("share", "connect", "miss", "raise", "send").
Headline examples from this mosaic:
- "10M+ Couples Use The *exclusive* app for couples."
- "Connect With *Your* Lover"
- "*Real* Time Location Sharing"
- "Raising Pets *Together*"
- "Send A Sw *'Miss You'*"
Subtitle examples (when used):
- "Always within a tap, wherever you are."
- "Track each other's location in real time."
- "Adopt and raise a pet together."
Heart emojis allowed sparingly (max 1 per slide). Lowercase ok inside speech bubbles ("i love you", "miss you").
## Per-slide breakdown
### Slide 1 — Cover ("10M+ Couples Use The exclusive app for couples.")
- **Background**: full 3-stop sky gradient (`#DDEBFA` → `#F5E0F0` → `#FCEFD6`). 3 cotton-puff clouds drifting in upper third.
- **Headline**: top-aligned, navy `#1B2240`. Reads "The" → "*exclusive*" (italic lilac serif) → "app for couples." across 3 lines. Above the headline, a tiny medallion: ribbon laurels flanking "10M+" text with 5 mini stars and "Couples Use" microcaps below. The medallion is rendered in lilac line art `#B49BE6`.
- **Hero element**: the 3D globe occupies the lower 60% of the slide, centered. Globe is ~52% of slide width. Two avatar pins visible — one on a top-left continent, one on a lower-right continent. A "Day 4" white sticker sits near the top-left pin. White dotted journey line curves between them. Faint white outlined continent silhouette floats just off the globe's upper-left as decoration.
- **Floating elements**: 5–6 tiny `✦` stars scattered around globe. No chat bubbles on cover.
- **Notable effects**: globe ground shadow below; sky has 2% noise; emphasis word "exclusive" sits at a slight optical-center bump (1px upward) to feel handwritten.
### Slide 2 — "Connect With Your Lover"
- **Background**: same sky gradient. 2 clouds upper area.
- **Headline**: top center, 2 lines. "Connect With" line 1, "*Your* Lover" line 2 (with "Your" italic lilac serif). Navy `#1B2240`.
- **Hero element**: 3D globe slightly lower-left, ~48% of slide width, ground shadow. Avatar pins on two continents, dotted journey line. A "12040km" white pill sticker sits on the globe surface near the journey line midpoint.
- **Floating elements** (with approximate positions, slide measured as 100x100):
- Lavender chat bubble "i love you" — upper-right of globe, position (68, 38), rotation +6deg
- Lavender chat bubble "Miss you" — directly below previous, position (72, 48), rotation -4deg
- Yellow heart sticker — small, position (24, 22), rotation -12deg
- White "Choose" mini-pill — sitting on globe near right avatar pin, position (62, 70)
- 4–5 `✦` stars scattered
- **Notable effects**: chat bubbles cast lavender shadows; globe overlaps slightly with the right edge of the chat bubble stack.
### Slide 3 — "Real Time Location Sharing"
- **Background**: same sky gradient, slightly desaturated since the phone screen takes most attention. 1 cloud.
- **Headline**: top center, 2 lines. "*Real* Time" line 1 (with "Real" italic lilac), "Location Sharing" line 2.
- **Hero element**: phone, ~62% of slide width, centered. Phone screen displays the soft minimal map (cream base, sage parks, white roads, baby-blue water blob). One avatar pin (teardrop with circular avatar) centered on the map.
- **Phone screen UI**:
- Top status bar minimal
- Tiny avatar circles of "friend" pings in upper map area
- Bottom card: white rounded card with "Jack" name in bold, address subtext in grey, two tiny circular action icons (call, message) on the right
- Below card a slim status pill: "100m" or similar walking indicator with a small avatar
- **Floating elements**: minimal — maybe 2 stars off to the sides. No chat bubbles on this slide.
- **Notable effects**: phone has soft drop shadow; map inside phone has its own subtle inner shadow at the screen edges.
### Slide 4 — "Raising Pets Together"
- **Background**: sky gradient transitions to slightly more peach (`#F5E0F0` → `#FCEFD6` dominant). 1 cloud.
- **Headline**: top center, 2 lines. "Raising Pets" line 1, "*Together*" line 2 (italic lilac serif).
- **Hero element**: phone, ~62% of slide width, centered. Phone screen interior is a butter-yellow `#FFF8D4` map with sage green patches and a small house illustration in the upper-right.
- **Phone screen contents**:
- Top status pill showing a tiny pet name card ("Doghana" or similar) with `+` icon
- Lower 40% of screen: row of 4 kawaii pets (husky, cream cat, cinnamon pup, panda) sitting on the implied yellow ground, each with a small shadow ellipse
- Bottom action bar: a "Honey" or partner name pill with a heart and emoji reactions
- **Floating elements**: tiny strawberry or fruit stickers scattered, 2 stars. No chat bubbles.
- **Notable effects**: pets have no outlines; small dotted brown path between pets; sky cloud overlaps just behind the top of the phone.
### Slide 5 — "Send A Sw 'Miss You'"
- **Background**: warm peach-pink rotation of gradient (`#FBE3D7` → `#F7C9D6` → `#F3B6CC`). 1–2 clouds.
- **Headline**: top right of phone, 2 lines. "Send A Sw" line 1, "*'Miss You'*" line 2 (quoted phrase in italic lilac serif). Slight left-margin offset because phone hugs the left edge.
- **Hero element**: phone, ~60% of slide width, positioned slightly left of center. Phone screen interior:
- Top: "x214" or "x280" chunky outlined display-serif counter in navy
- "Live Activities" tiny header row
- Center: massive hot-pink `#FF6FA3` heart with neon glow, "214" rendered in white display serif inside the heart
- Bottom: a row of emoji reactions (cute faces, hearts) on small white circle backgrounds
- "Happy forever ✦" tiny line above the heart
- **Floating elements**: 3–4 tiny stars; 1 small white chat bubble peeking from upper-left with "Miss you" text
- **Notable effects**: hot-pink heart casts the only "neon" glow in the entire mosaic — this is the one allowed exception to the soft-pastel rule, and it should still feel cushioned, not aggressive.
## How to apply this style
1. Start with the 3-stop sky gradient (`#DDEBFA` → `#F5E0F0` → `#FCEFD6`) on a 1242×2688 canvas. Add 1.5% monochrome noise overlay at `mix-blend-mode: overlay`.
2. Drop 2–3 cotton-puff cloud SVGs at 10% opacity in the upper third with a 6px gaussian blur.
3. Place the phone or globe as the hero element. Phone gets a 14% navy drop shadow at 40px blur, 16px y-offset. Globe gets a 10% ellipse ground shadow.
4. Write the headline in Pretendard Semibold navy `#1B2240`. Identify the ONE emotionally-loaded word and wrap it in a span: italic, serif (Newsreader Italic), lilac `#B49BE6`, 1.05× size.
5. Add floating sticker elements: lavender chat bubbles with tails, white heart counters, yellow accents, white "Day N" or distance pills. Rotate each between -8deg and +8deg. Cast appropriate colored shadows.
6. Sprinkle 4–7 `✦` stars in white at 50% opacity around the hero.
7. If pets are involved: render flat-color kawaii pets with no outlines, dot eyes with catchlights, rosy cheeks, soft ellipse shadows. Stagger them on the ground line.
8. Keep negative space generous — the dreaminess comes from breathing room.
## What this style is NOT
- Do NOT use harsh saturated reds, electric blues, or any color outside the pastel palette (the single hot-pink heart on slide 5 is the only neon exception).
- Do NOT use bold ALL-CAPS headlines — title case only, mixed weight.
- Do NOT use realistic photography of people, pets, or places — illustrations and 3D-rendered globes only.
- Do NOT omit the italic serif emphasis word — every headline must have exactly one.
- Do NOT use heavy outlines on pets or stickers — flat color, optional thin warm-grey only.
- Do NOT use rigid grid layouts — stickers and bubbles must rotate slightly and feel hand-placed.
- Do NOT use corporate sans-serifs like Helvetica or Arial — Pretendard / Apple SD Gothic / Inter only.
- Do NOT use crisp drop shadows — all shadows are large radius, low opacity, soft.
- Do NOT use more than ONE chat bubble cluster per slide — they should feel like punctuation, not decoration.
- Do NOT render the globe as a realistic Earth (no satellite imagery, no political borders) — it must be the stylized mint-on-blue pastel sphere.
- Do NOT use emojis as primary visual elements — use illustrated stickers; emojis only inside chat bubbles or reaction rows.
- Do NOT use serif fonts for body or subtitles — serif italic is reserved exclusively for the emphasis word.
- Do NOT center every line — vary the headline placement (top center, top left) slide-to-slide.
- Do NOT let clouds become a focal element — they are atmosphere at <12% opacity.
- Do NOT make pets look realistic or angular — round, plush, squeezeable proportions only.
style-prompts/05-hand-drawn-editorial-tasks.md
---
name: hand-drawn-editorial-tasks
description: Deep navy + cream + solid accent slides, with hand-drawn script accent words, tilted phones, doodle squiggles. Productivity-tool design-award vibe. Inspired by Superlist.
inspiration: Superlist, Stamps Camera, GRUG, design-award productivity apps
feel: playful-premium, designer-made, "this team has serious taste"
---
# Hand-Drawn Editorial — Tasks Edition (Superlist canonical)
> **READ FIRST:** [`./_QUALITY_BAR.md`](./_QUALITY_BAR.md) — universal quality rules apply to this style.
## Hard quality rules (this style)
- **Phone size**: 72–82% of canvas height on phone-bearing slides. Tilt the phone within the spec's 10–25° range BUT the bounding box of the tilted phone must still occupy this size range; do not shrink the phone to compensate for tilt.
- **Caveat script accent word**: minimum scale **1.20×** the surrounding sans headline, weight 700, color coral `#F26A50` on cream/navy/purple slides; cream/white on coral slides. Rotation -3° to +5°. Plain italic-sans = fail.
- **Script underline squiggle**: every script-accented phrase gets a hand-drawn coral SVG squiggle below it — 4–6px stroke, 2–3 gentle waves, hand-jittered control points. Smooth perfect curves = fail.
- **Phone shadow** must be warm: `drop-shadow(0 36px 60px rgba(184, 86, 64, 0.30)) drop-shadow(0 4px 12px rgba(0,0,0,0.18))`. Cool/blue shadow = fail.
- **Background is a single solid color per slide**. No gradient. No noise overlay (this style is poster-flat). 3-stop fades = fail.
- **Wordmark "bloom" (or app name) lowercase** in Inter Medium at the top-left corner of every slide, weight 500, 32–40pt. Skipping the wordmark = fail.
- **Doodle accents**: at least 2 hand-drawn SVG elements per slide (squiggle, asterisk, star, curved arrow, scribble underline). Color = coral on light bg, cream on coral bg. Stroke 3–4px, `stroke-linecap: round`. Less than 2 = fail.
- **Closer wordlist** alternates sans + script lines, all centered. Each line scales independently to fit canvas width with 6% horizontal margin. No clipping, no widow lines below 60% width.
## Vibe summary
This is the unmistakable look of a productivity app that hires designers, not just engineers. The deck reads like a magazine spread: solid color blocks per slide, clean lowercase wordmark in the corner, headlines set in a confident medium-weight sans, with ONE accent word per slide rendered in a warm coral hand-drawn script — as if someone took a brush pen to a printed proof. Tilted phones rotated 10–25° float over each block, casting soft warm shadows, while sparse hand-drawn squiggles, stars, and curved arrows orbit the type to break the grid. The contrast is the point: rigid task software made approachable by deliberate, human imperfection. Think Apple Design Award meets coffee-shop poster.
## Global palette
All hex codes:
- **Deep navy** `#1B2336` (primary cover/closer bg variant A), `#18223A` (variant B for dark slides)
- **Cream** `#F5EFDF` (primary alt slide bg), `#EFE8D4` (slightly deeper cream variant)
- **Coral accent** `#F26A50` (script lettering, primary doodle ink), `#E55846` (full coral bg slide), `#FF7A5C` (highlight playhead in phone UI)
- **Electric purple / lavender** `#8B7BFF` (lighter purple slide bg), `#7B5BFF` (mid purple), `#6A4FE5` (deeper purple shade for shadow side)
- **White text on navy** `#FFFFFF`
- **Navy text on cream** `#1B2336`
- **Body subhead grey-blue on navy** `#B8C0D3`
- **Body grey on cream** `#5A6275`
- **Phone dark mode surface** `#0E1018` (deepest), `#161A28` (card surface), `#1F2436` (raised card)
- **Phone divider / hairline** `rgba(255,255,255,0.06)`
- **Pink/coral waveform bars** `#FF7A8C` → `#F26A50` gradient
- **Subtle dark grey for inactive UI** `#2A3148`
- **Award badge gold** `#C9A75A` (cover only, if present)
## Typography
**Primary sans (everything that is not the accent word):**
- Inter Medium / Söhne Buch / Aeonik Medium / GT America Medium
- Tracking slightly tight: `-0.01em` for headlines, `0` for body
- Headlines 60–84pt at canvas scale (sized down on closer wordlist)
- Body / subhead 22–28pt at canvas scale
- Headline color: `#FFFFFF` on dark slides, `#1B2336` on light slides
- Body color: `#B8C0D3` on navy, `#FFFFFF` at 85% on coral/purple, `#5A6275` on cream
**Script accent font (the ONE emphasis phrase per slide):**
- Caveat Bold / Permanent Marker / Reenie Beanie / Homemade Apple / custom hand-lettered SVG
- Preferred: a brush-pen script with visible pressure variation, not a thin monoline
- Size scaled ~115–130% of the surrounding sans (it visually competes with the headline)
- Color: ALWAYS coral `#F26A50` on every background except coral bg itself (on coral bg, the script is `#FFFFFF` or cream `#F5EFDF`)
- Slight rotation: `-3°` to `+5°`, organic
- Baseline shift: `+4px` to `-6px` — let it break the grid
**Wordmark:**
- "Superlist" — clean lowercase wordmark, monoline geometric (looks similar to Inter Medium lowercase), top-left corner
- Color matches the text color of the slide (white on dark, navy on light)
- ~32pt at canvas scale, tracking neutral
**Mix rule:** Sans for the main line, script for the emphasis word. NEVER both styles on the same word. NEVER three font styles on one slide.
## Headline emphasis (signature)
The emphasis phrase is rendered in:
1. Script/handwritten font (brush pen, pressure-varied)
2. Warm coral `#F26A50` (or white on coral bg)
3. Hand-drawn squiggle accompaniment: an underline scribble, a circle-around, a wavy strike, OR a doodle adjacent to it
4. Slight rotation `-3°` to `+5°`
5. Baseline broken — the script word does NOT sit on the sans baseline; it floats `±4–8px` off
**Examples observed in the mosaic (replicate verbatim):**
- Slide 1 (cover, navy bg): `The one app that fits` (sans, white) + new line + `your whole day` (script, coral, with a wavy hand-drawn underline curving beneath the descender of "y")
- Slide 2 (purple bg): `Express` (script, coral, top right area as an over-word) layered over sans-set body — OR the headline is purely sans and the script appears as a side annotation. If unsure, render the accent word that follows the verb in script coral.
- Slide 3 (cream bg): `Tasks and notes` (sans, navy) + `together.` (script, coral, with squiggle line under it) + new line + `Turn your thoughts into actions.` (sans regular, navy, smaller)
- Slide 4 (coral bg): `Talk tasks with AI` — "AI" (or "Talk") rendered in script white/cream against coral, with a starburst doodle nearby
- Slide 5 (cream bg, wordlist): every other entry in script-coral, alternating with sans-navy (see closer section)
Document the rule: **exactly one script phrase per slide.** Never two.
## Phone / device frame treatment
- Slim modern iPhone bezel, ~5–6px black frame at canvas scale
- Screen corner radius matches device (~58px on the iPhone 15-class frame)
- **TILT IS MANDATORY.** Every phone rotates between `10°` and `25°` off vertical.
- Slide 1 phone: `-12°` (leans left) on the navy cover
- Slide 2 phone: `+15°` (leans right) on purple
- Slide 3 phone: `-10°` (leans left) on cream
- Slide 4 phone: `+18°` (leans right) on coral
- Slide 5: no phone
- **Soft drop shadow with warm tint:**
- On navy bg: `0 30px 60px rgba(8, 12, 30, 0.55), 0 8px 20px rgba(0,0,0,0.35)`
- On coral bg: `0 24px 50px rgba(120, 28, 14, 0.35), 0 6px 14px rgba(60,10,5,0.25)`
- On purple bg: `0 28px 55px rgba(40, 24, 110, 0.40)`
- On cream bg: `0 30px 55px rgba(40, 35, 25, 0.18), 0 6px 14px rgba(40,35,25,0.10)`
- **Phone always shows DARK MODE UI** (`#0E1018` background) regardless of slide bg color
- **Phone may bleed off the bottom edge.** On every slide except 1, the phone is cropped at the canvas bottom by 15–30% of its height — never show the full device.
- Phone width occupies ~55–70% of slide width when measured along its tilted bounding box.
- Status bar visible at top of phone, time `9:41`, full battery, full signal — standard Apple promo state.
## Background treatment per slide
Each slide is one solid color block, edge-to-edge, no gradients (except a near-imperceptible vignette).
- **Slide 1 (cover):** navy `#1B2336`
- **Slide 2:** lavender-purple `#8B7BFF` (mid-tone, slightly desaturated)
- **Slide 3:** cream `#F5EFDF`
- **Slide 4:** coral `#E55846`
- **Slide 5 (closer):** cream `#F5EFDF` (matches slide 3, intentional bookend)
**Texture overlay:** apply `~3% noise grain` (monochromatic) across each bg to add a printed-poster feel. SVG `<feTurbulence baseFrequency="0.9" numOctaves="2"/>` at very low opacity, or a PNG noise tile at `opacity: 0.04`.
**Optional vignette:** `radial-gradient(circle at 50% 60%, transparent 60%, rgba(0,0,0,0.08) 100%)` — extremely subtle, only on dark slides.
## Hand-drawn doodle accents (signature, mandatory)
Doodles are the soul of this style. Without them it collapses into generic minimal.
**Types (use 2–4 per slide, varied):**
- Scribbled wavy lines (sine-wave-ish but uneven), 2–5 per slide
- 5-point stars and asterisks (3–6 pointed)
- Curved arrows pointing AT phone features (with little arrowhead)
- Cloud-like blob squiggles (3–4 loops linked)
- Spiral swirls (1.5 to 3 turns)
- Circle-around-a-word marks (incomplete loop, ends not meeting)
- Squiggly underlines beneath the script word (mandatory under at least slide 1's emphasis)
- Short hatch marks / triple slashes `///` for emphasis
**Stroke:**
- Width ~4–6px at canvas scale (assume 1284×2778 canvas)
- Use `stroke-linecap: round` and `stroke-linejoin: round`
- Slight pressure variation: vary stroke width along the path by ±20% (use SVG `<path>` with width modulation, or layer two paths at slightly different opacities)
- Color: coral `#F26A50` on navy/cream bgs; white `#FFFFFF` or cream `#F5EFDF` on coral/purple bgs
**Rotation & placement:**
- Organic. Doodles rotate at any angle.
- Never centered behind the phone — they orbit margins: top corners, between headline and phone, beside the wordmark, off the phone edge as if pointing in.
- One doodle per slide may overlap the phone bezel for depth.
**Count per slide observed:**
- Slide 1: ~3 doodles (wavy line under "your whole day", a small star top-right area, a curl/squiggle near the top-right corner)
- Slide 2: ~4 doodles (cluster of squiggles top-right in coral/white, a small swirl near phone, a star)
- Slide 3: ~2 doodles (underline under "together", a small mark near phone)
- Slide 4: ~3 doodles (star burst near "AI", squiggle top, arrow toward phone)
- Slide 5: ~1–2 doodles (small accent near wordmark area)
## Decorative accents (additional)
- Apple Design Award / Webby badge: optional on cover only, bottom-center or bottom-right, small (~120px wide), gold or muted color so it doesn't fight the script.
- "Editor's Choice" ribbon: optional, never on more than one slide.
- No emoji. No stock icons. Doodles + tilted phones carry the deck.
## Phone UI inside (dark mode tasks)
The phone screens are themselves designed with care. Match these patterns:
- **Background:** deep navy `#0E1018`, no gradient
- **Top app bar:** small lowercase wordmark or page title in white `#FFFFFF`, tracking-tight, ~20pt
- **Cards:** rounded corners `16–20px`, surface `#161A28`, hairline border `1px rgba(255,255,255,0.06)`, internal padding `20px`
- **Leadership-sync card (slide 3):** title "Leadership Sync" in white medium, subtitle in `#7C8597` grey, attendees row with overlapping circular avatars, agenda checklist with rounded square checkboxes (`6px` radius), unchecked = hollow `1.5px` border in `#3A4258`, checked = filled coral `#F26A50` with white check
- **Waveform UI (slide 2):** horizontal row of vertical rounded bars varying height, gradient pink→coral `#FF7A8C → #F26A50`, ~24–32 bars, with a circular playhead dot in bright coral overlaid on one bar; time stamps below in mono grey `#8089A0`
- **AI/voice UI (slide 4):** chat-style bubbles with translucent dark surface, a coral mic button at bottom, possibly a coral waveform indicating recording
- **Task list (slide 1 phone):** vertical list of tasks with rounded checkboxes, item title in white `#FFFFFF`, due date in grey `#7C8597`, swipe-style action chips peeking from right edge
- **Search field:** translucent surface `rgba(255,255,255,0.06)`, rounded `12px`, magnifier icon `#7C8597`, placeholder "Search" in same grey
- **Reactions / emoji pills:** small rounded pills on messages showing `👍 3`, `❤️ 2` — coral accent on the count
- **Right-side floating sticker cards:** detached mini-cards (Slack-style reactions, pinned items, "Just now" notification toasts) floating just off the phone screen edge — they sit on the slide bg, not inside the phone, with their own small shadow. These create a 3D collage effect.
## Closer slide (feature wordlist) format
This is slide 5, the signature payoff slide.
**Layout:**
- Cream `#F5EFDF` background
- Left-aligned vertical stack of feature names, top to bottom
- Generous line-height (`1.15`)
- Stack starts ~12% from top, ends ~10% from bottom
- Margin left ~8% of canvas width
**Pattern (every other entry in script+coral, the rest in navy sans):**
```
Real-time ← script coral
collaboration ← sans navy
Repeatable ← script coral
tasks ← sans navy
Offline ← script coral
support ← sans navy
Widgets ← script coral
Nested ← script coral
Lists & Tasks ← sans navy
Multiplatform ← sans navy
Integrations ← script coral
Reminders ← sans navy
AI-Powered ← script coral
Privacy ← script coral
First ← sans navy
Fast AF ← script coral
```
**Mixed sizes for visual rhythm:**
- Script entries range 56–82pt
- Sans entries range 40–60pt
- Sizes alternate large/small to create a typographic poster rhythm
- Each entry may rotate `-2°` to `+3°` independently
- Some entries may be slightly indented (0–60px) to break the left rag
**Right edge:** entries may bleed off the right edge of the slide — that is intentional. The list feels like it continues forever.
## Copy tone
Conversational, playful, slightly bold. Quote actual lines:
- "The one app that fits your whole day"
- "From quick thoughts on the go to big team projects at work and even your weekend plans, Superlist keeps it all together." (subhead body on cover)
- "Tasks and notes together. Turn your thoughts into actions."
- "Talk tasks with AI. Use your voice to create lists and tasks."
- "Real-time collaboration", "Repeatable tasks", "Offline support", "Widgets", "Nested Lists & Tasks", "Multiplatform", "Integrations", "Reminders", "AI-Powered", "Privacy First", "Fast AF"
**Rules:**
- Sentences can break grammar (fragments OK: "Widgets.", "Fast AF.")
- Lowercase OK in body, sentence case in headlines
- No exclamation marks
- No emoji in copy
- A little cheeky ("Fast AF") is on-brand
- Never use marketing-speak like "Revolutionary" or "Game-changing"
- "AI" is fine, even celebrated, but not the dominant message
## Per-slide breakdown (mandatory)
### Slide 1 — Cover ("The one app that fits your whole day")
- **Background:** navy `#1B2336`, 3% noise overlay
- **Wordmark:** "Superlist" top-left, white `#FFFFFF`, ~32pt lowercase
- **Headline:** stacked, left-aligned, starts ~18% from top
- Line 1: "The one" (sans white, ~76pt)
- Line 2: "app that fits" (sans white, ~76pt)
- Line 3: "your whole day" (script coral `#F26A50`, ~84pt, rotated `+3°`, with a wavy hand-drawn underline in coral curving beneath, the underline stroke ~5px round-cap)
- **Body subhead:** below headline, ~24pt, color `#B8C0D3`, max width 60% of slide, line-height 1.4. Text: "From quick thoughts on the go to big team projects at work and even your weekend plans, Superlist keeps it all together."
- **Doodles:**
- Wavy underline under "your whole day" (coral, ~5px stroke)
- Small 5-point star top-right area (coral, ~40px)
- Short squiggle/curl near upper-right corner (coral, ~3 loops)
- **Phone:** tilt `-12°` (leans left), positioned bottom-right, bleeds off bottom edge ~25%, shows task list UI with checkboxes and items in dark mode
- **Floating elements:** none on cover — keep cover clean
- **Notable effects:** soft warm shadow under phone; tiny gold Apple Design Award badge optional bottom-center
### Slide 2 — Express / Voice ("waveform")
- **Background:** lavender-purple `#8B7BFF`, 3% noise overlay
- **Wordmark:** "Superlist" top-left, white `#FFFFFF` (or could be omitted on internal slides)
- **Headline:** top area, left-aligned. Could read "Express yourself" or similar — with the verb in sans white and the object/emphasis in script coral `#F26A50` rotated `+2°`
- **Doodles:**
- Cluster of squiggles top-right in cream/white (3–4 lines)
- Small swirl near top-left of phone (white, ~3 turns)
- A 5-point star upper area (coral)
- Optional curved arrow pointing to the waveform on the phone
- **Phone:** tilt `+15°` (leans right), centered-low, bleeds off bottom edge ~20%, shows pink/coral waveform UI with vertical rounded bars and a playhead dot
- **Floating elements:** a small floating reaction or note card may peek off the right edge of the phone, with its own shadow
- **Notable effects:** the coral waveform inside the dark phone is the visual hook — make sure it pops against the purple bg through the phone bezel
### Slide 3 — Tasks and notes together
- **Background:** cream `#F5EFDF`, 3% noise overlay
- **Wordmark:** "Superlist" top-left, navy `#1B2336`
- **Headline:** top-center-left, ~14% from top
- Line 1: "Tasks and notes" (sans navy, ~72pt)
- Line 2: "together." (script coral `#F26A50`, ~80pt, rotated `-2°`, with a single squiggly underline beneath in coral ~5px)
- Sub-line: "Turn your thoughts into actions." (sans navy regular, ~28pt, color `#5A6275`)
- **Doodles:**
- Squiggly underline under "together"
- One small accent doodle (asterisk or short curl) near the phone edge in coral
- **Phone:** tilt `-10°` (leans left), positioned center-bottom, bleeds off bottom ~25%, shows Leadership Sync card with attendees, agenda checklist with coral-filled checkboxes, possibly a green-leaf nature photo card above the meeting card
- **Floating elements:** none required, but a small "✓ Just now" toast card may float off the phone's right edge
- **Notable effects:** cream bg makes the coral script the loudest element — keep navy headline calm to let the script sing
### Slide 4 — Talk tasks with AI
- **Background:** coral `#E55846`, 3% noise overlay
- **Wordmark:** "Superlist" top-left, white `#FFFFFF`
- **Headline:** top, left-aligned
- Line 1: "Talk tasks with" (sans white, ~72pt) + "AI" (script cream/white, ~90pt, rotated `+5°`)
- Sub-line: "Use your voice to create lists and tasks." (sans white at 90%, ~28pt)
- **Doodles:**
- Starburst / asterisk near "AI" in white (~60px)
- Squiggle across the top of the slide in white (~5 loops, ~5px stroke)
- Curved arrow in white pointing from headline area toward the phone mic button
- **Phone:** tilt `+18°` (leans right), positioned center-bottom, bleeds off bottom ~25%, shows the AI/voice UI: chat bubbles, coral mic button, possibly a coral waveform indicating active recording
- **Floating elements:** a small AI-suggestion card may float off the phone's top-right edge
- **Notable effects:** doodles flip to white on this bg — coral script would disappear into the coral bg, so the rule inverts. Phone shadow uses deeper warm red tone.
### Slide 5 — Feature wordlist closer
- **Background:** cream `#F5EFDF`, 3% noise overlay
- **Wordmark:** "Superlist" top-left, navy `#1B2336` (or omit since the list is the whole slide)
- **Headline:** the wordlist IS the headline. No separate title needed.
- **Content:** vertical stack of feature names as specified in "Closer slide (feature wordlist) format" above — alternating script-coral and sans-navy, mixed sizes 40–82pt, slight rotations, some bleeding off right edge
- **Doodles:** 1–2 minimal — perhaps a small star or curl somewhere in the lower-right negative space; do not over-decorate, the type IS the decoration
- **Phone:** NONE on this slide
- **Floating elements:** none
- **Notable effects:** this slide is the typographic exclamation point of the deck. Treat like a poster spread.
## How to apply this style
1. Set the canvas background per slide using the listed solid colors in order (navy → purple → cream → coral → cream).
2. Add the 3% noise overlay layer to every slide.
3. Place the lowercase "Superlist" wordmark top-left of each slide in the appropriate text color.
4. Set the headline in clean medium-weight sans (Inter Medium / Söhne Buch / Aeonik Medium), color per slide bg.
5. Identify exactly ONE phrase per headline to render in the hand-drawn script font (Caveat Bold / Permanent Marker / hand-lettered SVG), colored coral `#F26A50` on navy/cream/purple slides, and white/cream on the coral slide.
6. Rotate that script phrase `-3°` to `+5°` and shift its baseline `±4–8px` from the sans baseline.
7. Add a hand-drawn squiggle, underline, circle, or arrow accompanying the script word (mandatory on at least 3 of 5 slides).
8. Add 2–4 additional doodles per slide in the appropriate ink color (coral on navy/cream, white on coral/purple). Stroke ~4–6px, round caps, slight pressure variation.
9. Render the phone in a slim modern iPhone frame, dark mode UI inside (`#0E1018`), tilted `10–25°` per the per-slide spec, with a warm-tinted soft shadow.
10. Bleed the phone off the bottom of the canvas by 15–30% on every slide that has one.
11. Add 0–2 floating sticker/reaction/toast cards beside the phone edge for depth.
12. For the closer slide: skip the phone, build the vertical wordlist with alternating script-coral and sans-navy entries at mixed sizes, individual rotations, and right-edge bleed.
13. Audit the deck: every slide must have (a) the wordmark, (b) the solid bg, (c) one script-coral phrase, (d) at least one doodle, (e) one tilted phone (except slide 5).
14. Quote the actual copy lines verbatim where possible; if the app is not Superlist, adapt copy to match the playful-fragment tone ("Fast AF.", "Widgets.").
## What this style is NOT
- Do NOT center phones upright — they MUST tilt `10–25°`. An untilted phone breaks the entire style.
- Do NOT use sans for the emphasis word — script is the move, every time.
- Do NOT skip the doodles. A slide with no squiggles falls flat — minimum 2 per slide.
- Do NOT use a flat white background — backgrounds must be solid navy, coral, cream, or purple per slide.
- Do NOT use gradients on the slide background. Solid color blocks only (with optional 3% noise).
- Do NOT render the phone in light mode — phones are always dark mode regardless of slide bg.
- Do NOT use serif fonts anywhere. Sans + script is the entire typographic system.
- Do NOT use more than one script phrase per slide. The rarity is what makes it land.
- Do NOT use thin monoline script fonts (e.g. Pacifico Light) — the script must be a brush pen with pressure variation.
- Do NOT use coral script on a coral background — invert to white/cream when on the coral slide.
- Do NOT render full phones — they must bleed off the bottom edge of the canvas.
- Do NOT use emojis in copy. Doodles replace emojis entirely.
- Do NOT add stock UI icons floating around the slide. The hand-drawn doodles are the only ornamentation.
- Do NOT use bright pure-saturation colors (#FF0000, etc.) — the coral, purple, cream are all slightly muted/earthy for a printed-poster feel.
- Do NOT center-align the headline. Left-aligned with intentional ragged right is the rhythm.
- Do NOT use ALL CAPS for headlines. Sentence case only.
- Do NOT add a CTA button or "Download now" — this deck sells through taste, not asks.
- Do NOT make the doodles look digital/vector-perfect — they must read as drawn-by-hand with imperfect loops and uneven strokes.
style-prompts/06-glossy-3d-kbeauty-creator.md
---
name: glossy-3d-kbeauty-creator
description: Deep purple gradient with glossy chrome 3D headline numerals, kawaii ghost mascot, yellow hashtag pill chips, K-beauty influencer-network energy. Inspired by Nuri Lounge.
inspiration: Nuri Lounge, K-beauty creator-economy apps, BlackPink lightstick aesthetic
feel: hype, social, "join the cool creator community"
---
# Glossy 3D K-Beauty Creator
> **READ FIRST:** [`./_QUALITY_BAR.md`](./_QUALITY_BAR.md) — universal quality rules apply to this style.
## Hard quality rules (this style)
- **Phone size**: 68–78% of canvas height on phone-bearing slides.
- **Chrome 3D numeral quality**: hero numerals (100K, 1.2K, 400+, etc.) MUST render with the full stack:
1. Front-face SVG with a 4-stop chromatic gradient `#FBEBD7 → #E8D7FF → #A88BD8 → #7A52C2 → #D88BFF` (top-to-bottom OR diagonal).
2. Extruded side at `#3D2374` — at least 8 stacked text-shadow offsets stepping from `0 1px 0` to `0 8px 0` with darkening interpolation.
3. Outer warm halo `0 0 60px rgba(255,217,107,0.55)`.
4. White specular streak at 25% opacity sweeping top-left to bottom-right.
5. Tilt -5° to +5°.
6. Size **≥ 380px tall** (≥ 13% canvas height) for hero numerals.
Flat colored numerals = fail.
- **Ghost mascot polish gates** (all required):
1. Lavender `#C9B8E8` body, two-tone shading with `#8B6FB5` shadow on right third.
2. White eyes with pupils, blush cheeks, a tiny mouth — not a blank silhouette.
3. Holds a tilted yellow mug with brown coffee surface + white foam highlight + a "z" or steam wisp.
4. **Minimum height 420px**.
5. Sits with a pearl shine `radial-gradient(circle, #FFFFFF 0%, transparent 70%)` halo behind.
Featureless blob ≠ ghost.
- **Hashtag pill stickers**: chubby rounded rect, yellow `#FBE254` fill, weight 900 black `#0A0A0A` text, 8–12° rotation each (different per pill), layered drop shadow `0 8px 20px rgba(0,0,0,0.25)` + inset top white sheen `inset 0 1px 0 rgba(255,255,255,0.8)`. Flat-fill rects = fail.
- **Bg gradient is 3-stop minimum**: `linear-gradient(180deg, #3B266B 0%, #5C3DAA 45%, #A567E0 100%)` + radial bloom `#C98AFF` 25% opacity centered at 50%/75% + corner vignette `#1F0E3D`. Less = fail.
- **Starfield**: ≥ 60 small white dots at 18% opacity scattered across the bg. Without it the bg reads as a plain gradient.
## Vibe summary
This is a hype, social-first, "you are about to join a cool creator's club" aesthetic. It marries deep K-pop/K-beauty purple atmosphere with glossy chrome 3D type, kawaii blob mascots, and stickered-on yellow hashtag pills that read like a Y2K social media moodboard. The screenshots feel like a Discord-meets-Instagram-meets-Sephora pitch for influencers: hype numbers (100K, 400+), creator-economy hashtags (#PAID #PRODUCTS #CONNECTED), and an oversaturated purple "after-hours lounge" backdrop that signals exclusivity and play.
## Global palette
All hex codes used across the mosaic:
- Bg purple (top, deep) — `#3B266B`
- Bg purple (mid, royal) — `#5C3DAA`
- Bg purple (lower accent magenta) — `#A567E0`
- Bg vignette black-purple corner — `#1F0E3D`
- Lavender card surface — `#F4ECFA`
- White (UI cards, text) — `#FFFFFF`
- Off-white inside-phone card — `#FAF7FB`
- Accent yellow sticker (hashtag pills, book) — `#FBE254`
- Warm yellow shadow side of 3D book — `#E2B431`
- Accent text yellow on purple — `#FFE16B`
- Black text on yellow — `#0A0A0A`
- White text on purple — `#FFFFFF` at 100%, subhead at 85%
- Chrome highlight (top fill) — `#FBEBD7` → `#E8D7FF` → `#A88BD8` → `#D88BFF`
- Chrome depth (side / extrusion) — `#3D2374`
- Pink secondary accent (UI buttons, hearts) — `#FF5FA5`
- Coral / salmon highlight on stickers — `#FF8E8E`
- Lavender mascot body — `#C9B8E8`
- Mascot shadow tone — `#8B6FB5`
- Specular pearl shine — `#FFFFFF` at 85%
- Subtle starfield dot — `#FFFFFF` at 18%
## Gradient & atmospheric treatment
Each slide uses a vertical (top-to-bottom) gradient with a subtle radial bloom in the lower-third:
- Slide background gradient stops:
- 0% → `#3B266B` (top, dark indigo-purple)
- 45% → `#5C3DAA` (royal purple)
- 100% → `#A567E0` (warm magenta-violet at base)
- On top, a radial gradient bloom: ellipse 80% wide × 50% tall, centered at 50% / 75%, from `#C98AFF` 25% opacity → transparent — creates the "stage lighting" glow under the phone.
- Subtle starfield: 60-90 white dots, 1-2px each, scattered at 10-25% opacity across the upper 60% of each slide. Slightly denser in the upper corners.
- Optional soft purple lens flare streak diagonal across the top-right corner at 15% opacity.
- Corner vignette: `#1F0E3D` at 25% opacity feathered into all four corners over a 120px radius.
## Typography
- Headlines (English titles like "Chosen by", "Daily OPEN!", "Get the VIP Invite & Benefits", "Connect you"): clean bold sans, Pretendard Black / Inter Black / SF Pro Display Black. Weight 800-900. Tracking slightly tight (-1%). White (`#FFFFFF`) on purple. Mix of Title Case for sentences and ALL CAPS for power words.
- Big numeric / 3D type ("100K"): full glossy chrome 3D rendering — see signature section below.
- Subhead (e.g., "400+ K-Beauty Brands Active", "VIP parties, meetups, offline events!"): same sans family, weight 600, ~50% the size of the headline, white at 85-90% opacity.
- Inside-phone UI text: Pretendard / Noto Sans KR, weight 500-700, dark gray `#2A2235` on white cards. Mix of Korean and English.
- Brand wordmark "nuri lounge": tiny pill chip at the bottom of the phone, weight 600, white text at ~70% opacity, ~14px.
- Hashtag chip text ("#CONNECTED", "#PRODUCTS", "#PAID"): bold uppercase sans, weight 800, black `#0A0A0A`, ~28-32px at canvas scale.
### Glossy 3D headline treatment (signature)
For the "100K" hero on slide 2 — and applicable to any future numeric/word hero on this style:
- Extruded 3D depth: ~14-18px deep, extrusion direction: down and slightly right (angle ~110° from top).
- Bevel: rounded, ~2-3px corner radius along the front face edges.
- Front face fill gradient (top to bottom of letterform):
- 0% → `#FBEBD7` (cream pearl highlight at very top)
- 25% → `#E8D7FF` (pale lavender)
- 60% → `#A88BD8` (rich lilac mid)
- 90% → `#7A52C2` (deeper violet near base)
- 100% → `#D88BFF` (magenta kiss at bottom edge)
- Side / extrusion fill: solid `#3D2374` with a slight gradient to `#52308E` near the front edge, simulating ambient bounce.
- Specular highlight: a bright white (`#FFFFFF` at 90%) curved streak hugging the top-left corner of each letter, ~4-6px wide, with a soft inner blur radius of 1.5px.
- Secondary mini-highlight: small dot of `#FFFFFF` near the top-right of curved letterforms (O, 0) at 80% opacity, ~3px diameter.
- Outer glow: warm yellow `#FFD96B` halo, blur radius ~30px, ~30% opacity, sits behind the letterforms.
- Drop shadow: 0 12px 24px rgba(40, 15, 80, 0.55).
- Slight tilt: rotate 4-6° counter-clockwise; the "0"s can have an additional ~2° individual rotation for playful imperfection.
- Reflection on the bottom edge of letters: a 6px band that fades from `#F2D9FF` to transparent, suggesting the type is sitting on glass.
## Headline emphasis
- Color/scale jump on emphasis words: "100K" is the visual hero (chrome 3D at ~2.5× the surrounding text scale); "Creator" sits beneath in plain white sans at much smaller size.
- Hashtag chips on slide 1 are physically separated stickers — each on its own yellow pill, stacked vertically with random rotation, breaking the grid like fridge magnets.
- "OPEN!" in "Daily OPEN!" uses a warmer yellow-to-cream gradient and a slight bevel; "Daily" stays plain white.
- "VIP" in "Get the VIP Invite & Benefits" can be punched up to yellow `#FFE16B` while the rest stays white.
## Phone / device frame treatment
- iPhone with thin black bezel, near-bezelless. Dynamic Island visible at the top.
- Phone tilted slightly: most slides ~0° (upright); slides 2 and 4 use a ~4-6° clockwise or counter-clockwise tilt for energy.
- Phone sits inside a soft purple bloom — a radial glow `#C98AFF` at 35% opacity, blur radius 80px, fading to transparent.
- Drop shadow under phone: 0 30px 60px rgba(15, 5, 40, 0.6), purple-tinted, soft and diffused.
- Inside-phone UI is bright white/off-white with rounded cards.
- A tiny "nuri lounge" wordmark chip sits below the phone on certain slides, centered horizontally.
## Floating chips & stickers (signature)
The screenshot mosaic is loaded with stickered-on objects that float over the phone and background. They feel layered, like a moodboard. Each has its own drop shadow so it physically lifts off the canvas.
- **Yellow hashtag pill chips** ("#CONNECTED", "#PRODUCTS", "#PAID"):
- Shape: rounded rectangle, corner radius ~22px, fill solid `#FBE254`.
- Stroke: none (or a 1px `#E8C734` hairline at 30% opacity).
- Inner highlight: a faint 1px white inner stroke at the top edge to suggest a glossy laminate.
- Drop shadow: 0 6px 14px rgba(0, 0, 0, 0.28).
- Rotation: each chip tilts independently between -10° and +12°. Suggested per chip:
- "#CONNECTED" → -6°
- "#PRODUCTS" → +4°
- "#PAID" → -10°
- Padding: ~18px horizontal, ~10-12px vertical.
- Font: bold uppercase sans, weight 800, black `#0A0A0A`, ~28-32px.
- **Coin sticker** (gold disc with star or $):
- Diameter ~70px, 3D rendered, gold gradient `#FFE16B` → `#E2A431`.
- Star or "$" embossed in the center with a slight inset shadow.
- White specular highlight on top-left arc.
- Tilted ~15°.
- **Smiley sticker** / **heart sticker** / **ribbon**: rendered in flat solid yellow or pink with thin black outlines, ~60px diameter, scattered as accent.
- **Mascot ghost-blob**: see dedicated section below.
- **Yellow open book illustration**: see Glossy 3D objects section.
All stickers cast a tiny consistent shadow at 0 4px 8px rgba(0,0,0,0.2) and are layered above the phone but never cover critical UI content.
## Mascot ghost-blob (signature)
Cute purple/lavender amorphous blob character — the visual personality anchor of the style.
- Silhouette: rounded blob head, ~120px tall, no hard edges, slightly squished pear shape with a small wave at the bottom (ghost tail).
- Body fill: pale lavender `#C9B8E8`, with a soft top-down gradient to `#A38BD0` at the base.
- Pearlescent shine: a white-cream `#FFFFFF` highlight at the top-left, ~25px wide, with a soft fade — gives it a glossy vinyl-toy look.
- Eyes: two solid dark eyes (`#2A1B45`), each ~10px diameter, with a 3px white catch-light sparkle on the upper-right of each pupil.
- Mouth: a small horizontal oval or a flat "u" shape, sometimes open (showing a tiny pink tongue `#FF8E8E`), sometimes closed.
- Cheek blush: optional — two tiny pink ovals `#FFB8D6` at 50% opacity.
- Cast shadow: a soft purple `#3D2374` ellipse at 35% opacity, blur 8px, directly beneath.
- Pose variations: peeking out from behind a yellow book; floating mid-air next to a coin; tucked into the corner of a phone card.
## Glossy 3D objects
- **Yellow open book**: 3D rendered, pages slightly fanned, cover and inside pages both bright `#FBE254`. Shadow side on the spine is `#E2B431`. A white specular streak runs across the top of the pages. The book has a soft drop shadow and the mascot can sit atop it as if reading or popping out of it. Tilted slightly ~8°.
- **Gold coin with star**: dimensional disc, gradient `#FFE16B` → `#E2A431`, edge ring slightly darker, central star or "$" embossed with inset shadow. Suspended at a ~25° angle to show its thickness.
- **Bell, gift box, heart icons**: optional secondary props. Each rendered with a soft gradient fill, a single white specular highlight, and a warm cast shadow `#3D2374` at 30%.
- All 3D props share the same "lighting direction": top-left key light, warm bounce from the lower yellow palette.
## Inside-phone UI
- White or off-white card-based UI, ~16-20px corner radius on cards.
- Tab bars / category chips at the top (e.g., "Today's Pick", "Daily Open", category labels in pill form).
- Product cards: thumbnail photo of K-beauty product on top half, brand name + 1-line product title beneath, small action button (heart or follow) bottom-right.
- Profile avatar circles with thin gradient ring (purple → pink). ~32-44px diameter.
- Pink/magenta accent `#FF5FA5` used for primary actions (follow, like, "VIP" badges).
- Korean text mixed with English — exact text not critical; aim for realistic K-beauty product naming patterns.
- A small dynamic island and status bar (time, signal, battery) at the top sells the phone realism.
- Chat-style cards on slide 5: profile avatar, name, last-message preview, timestamp, with an unread count badge in pink.
## Background panel treatments
- Slide 4 ("VIP Invite & Benefits") uses a layered look: a white wordmark "BCN"-style brand chip sits on a darker purple inner panel, which sits on the main purple slide bg. The inner panel has a thin 1px white inner stroke and ~24px corner radius.
- Cards inside the phone use a soft 1px `rgba(255,255,255,0.04)` inner stroke for crispness against the white phone bg.
- Outer headline regions (above/below the phone) sit directly on the purple gradient with no panel — the chips and 3D objects are the only relief.
- Bottom-of-slide wordmark area ("nuri lounge") has no panel; it's a tiny chip at most.
## Decorative accents
- Sparkles ✦ in white or pale yellow, scattered around the chrome 3D type. Use mixed sizes (4px, 6px, 8px).
- Tiny stars (4-point and 5-point), `#FFE16B` and `#FFFFFF`, randomly rotated.
- Dotted halos around the mascot or coin (5-7 small dots forming an arc).
- Glitter specks: tiny white squares rotated 45°, 2-3px each.
- Soft purple lens flare / light streak across one corner per slide.
- Small heart icons in pink `#FF5FA5` near profile/chat UI.
- A faint horizontal "light line" across the chrome type to suggest a reflected horizon.
## Copy tone
Hype, creator-economy, second-person, mixed Korean-English with abundant punctuation. Specific lines from the mosaic:
- "Get #CONNECTED #PRODUCTS #PAID"
- "Chosen by 100K Creator"
- "Daily OPEN! 400+ K-Beauty Brands Active"
- "Get the VIP Invite & Benefits"
- "VIP parties, meetups, offline events!"
- "Connect you"
- "Connect with Top Br…" (truncated)
Mix of all-caps emphasis ("CONNECTED", "OPEN!", "VIP") and Title Case for the rest. Liberal exclamation marks. Numbers and metrics get center-stage treatment — never bury them in a paragraph. Short, declarative, social-media-caption length.
## Per-slide breakdown (mandatory)
### Slide 1 — "Get #CONNECTED #PRODUCTS #PAID"
- Background: full purple gradient as global spec, slight magenta bloom in the lower-left.
- Headline: "Get" small at top-left in white bold sans, followed by three stacked yellow hashtag pill chips. Each chip is on its own line, left-aligned with playful rotation.
- Phone: upright, ~0° tilt, sits center-right behind the chips, showing a product feed with white cards and K-beauty thumbnails. Mascot peeks out from inside one of the cards.
- Hashtag chips:
- "#CONNECTED" at top, rotated -6°
- "#PRODUCTS" mid, rotated +4°
- "#PAID" lower, rotated -10°, slightly smaller
- 3D objects: yellow open book at the bottom-left corner with the lavender mascot peeking over it; one gold coin floating top-center; tiny sparkles around the chips.
- Notable effects: starfield dots in the upper third, warm yellow glow behind the book.
### Slide 2 — "Chosen by 100K Creator"
- Background: purple gradient with the strongest radial bloom of any slide, positioned behind the "100K".
- Headline: "Chosen by" in white bold sans at the top-center, ~36-44px. Beneath it, the chrome 3D "100K" treatment as the visual hero, tilted ~5° counter-clockwise, with the warm yellow halo behind. "Creator" sits below in plain white bold sans, ~40px.
- Phone: tilted ~4° counter-clockwise, sits center-bottom, showing a creator's profile / feed UI with the mascot icon on a card.
- Hashtag chips: none on this slide — the 3D type is the hero.
- 3D objects: gold coin with star floating lower-right of the "100K"; lavender mascot peeking out of the phone's UI card; small sparkles ✦ around the "K" letterform.
- Notable effects: chrome reflection on the bottom of "100K", outer warm-yellow halo, scattered glitter specks.
### Slide 3 — "Daily OPEN! 400+ K-Beauty Brands Active"
- Background: purple gradient, slight upward warmth bloom.
- Headline: "Daily OPEN!" at top-center in white bold sans (with "OPEN!" in cream/yellow gradient and a subtle bevel); subhead "400+ K-Beauty Brands Active" beneath in white at 85% opacity, weight 600.
- Phone: upright, ~0° tilt, centered, full-bleed showing a tiled grid of K-beauty product cards (thumbnails of skincare, makeup) with the mascot tucked into one card.
- Hashtag chips: none — the focus is the product grid.
- 3D objects: small floating sparkles around the headline; optional tiny coin top-right.
- Notable effects: a subtle purple light-streak across the upper-left of the phone bezel.
### Slide 4 — "Get the VIP Invite & Benefits"
- Background: purple gradient with the lower-third pushed warmer toward magenta.
- Headline: "Get the VIP Invite & Benefits" at the bottom in white bold sans, "VIP" punched up in yellow `#FFE16B`. Subhead "VIP parties, meetups, offline events!" beneath in white at 85%, weight 600.
- Phone: upright at top, showing a "Campaigns" feed UI. Inside the phone, a vertical white card features a dark purple inner panel with a chunky white "BCN"-style wordmark — this is the layered brand-chip visual.
- Hashtag chips: none, but the BCN brand chip mimics their stickered energy in white-on-purple form.
- 3D objects: small mascot avatar on one of the chat cards; optional small coin or star sticker top-right.
- Notable effects: thin 1px white inner stroke on the BCN panel; sparkles around the "VIP" word.
### Slide 5 — "Connect you"
- Background: purple gradient, soft magenta bloom lower-center.
- Headline: "Connect you" at the bottom in white bold sans; subhead "Connect with Top Br…" (truncated) beneath in white at 85%.
- Phone: upright at top, showing a chat/DM interface with profile avatar at the top ("Mall", "#nm…") and a list of message threads with thumbnails, names, message previews, timestamps, and pink unread badges.
- Hashtag chips: none on this slide — the focus is human connection UI.
- 3D objects: small pink heart sticker near the chat avatar; mascot tucked into one of the message previews; tiny sparkles in the corners.
- Notable effects: thin gradient ring around the top profile avatar (purple→pink); soft purple bloom behind the phone.
## How to apply this style
1. Set up a 1242×2688 (or 1290×2796) canvas with the global purple gradient as background and add the radial bloom + starfield + corner vignette.
2. Place the phone mockup centered with a soft purple bloom and drop shadow; tilt by 0-6° depending on slide.
3. Inside the phone, render the relevant K-beauty UI on white/off-white cards using Pretendard / Noto Sans KR for any text.
4. Add the headline copy above or below the phone in bold white sans; reserve one word per slide for emphasis (yellow color, larger scale, or full chrome 3D treatment).
5. For any chrome 3D number/word, build it with: front-face gradient, side extrusion, bevel, white specular streak, warm yellow outer glow, and a deep purple drop shadow. Tilt 4-6°.
6. Scatter yellow hashtag pill chips at random rotations (-15° to +15°) around the phone, especially on slide-1-style "feature list" layouts.
7. Place the lavender ghost-blob mascot at least once per mosaic — peeking out from a book, a card, or a corner.
8. Sprinkle decorative accents: sparkles ✦, tiny stars, glitter dots, and a soft purple lens flare per slide.
9. Add the small "nuri lounge"-style brand wordmark chip below the phone where appropriate.
10. Confirm sticker layering: every floating element casts a small consistent drop shadow so the slide reads as a moodboard, not a flat design.
## What this style is NOT
- Do not use a flat 2D number — the hero numeric ("100K") MUST be glossy chrome 3D with bevel and warm outer glow.
- Do not use a single-color background — it MUST be the deep-purple-to-magenta gradient with at least one radial bloom.
- Do not omit the scattered yellow pill chips — at least one slide MUST feature stacked hashtag stickers.
- Do not use serif fonts — keep everything bold sans (Pretendard / Inter / SF Pro).
- Do not use cool blues, greens, or dark grays as background — this is a warm purple/magenta world only.
- Do not render the mascot as a hard-edged geometric character — it MUST be a soft amorphous lavender blob with sparkle eyes.
- Do not skip the drop shadows on stickers — every floating object must feel physically layered.
- Do not use enterprise-style minimal layouts — embrace the cluttered moodboard density.
- Do not let the phone go completely untilted on every slide — at least one slide should tilt 4-6° for energy.
- Do not omit decorative sparkles or starfield — the "after-hours lounge" sparkle is part of the brand.
- Do not use thin or light-weight type — headlines are weight 800-900 only.
- Do not put hashtag chips on white panels — they live directly on the purple gradient as floating stickers.
- Do not center every element rigidly — the playful asymmetry (especially the stacked chips on slide 1) is part of the style.
- Do not use a corporate blue or red accent — secondary accent is pink `#FF5FA5` and yellow `#FBE254` only.
template/.gitignore
node_modules
.next
out
.DS_Store
*.tsbuildinfo
next-env.d.ts
.env*.local
template/app-store-screenshots.json
{
"schemaVersion": 2,
"appName": "My App",
"themeId": "clean-light",
"connectedCanvas": true,
"locales": [
"en"
],
"locale": "en",
"device": "iphone",
"orientation": "portrait",
"appIcon": "",
"slidesByDevice": {
"iphone": [
{
"id": "s_mppgoot8_1",
"layout": "device-bottom",
"label": {
"en": "FEATURE 01"
},
"headline": {
"en": "Your headline\nlives here."
},
"screenshot": "",
"transforms": {
"device": {
"x": -450.80914890045335,
"y": 955.2104098119215,
"width": 977,
"height": 1991,
"rotation": 0,
"zIndex": 3
}
}
},
{
"id": "s_mppgoot8_2",
"layout": "two-devices",
"label": {
"en": "FEATURE 02"
},
"headline": {
"en": "Show two\nscreens at once."
},
"screenshot": "",
"screenshotSecondary": "",
"transforms": {
"deviceSecondary": {
"x": 688.4726540204801,
"y": 1027.8020089177937,
"width": 871.2,
"height": 1774.7929549902153,
"rotation": 9,
"zIndex": 2
},
"caption": {
"x": 112.3403055229146,
"y": 87.89358401880148,
"width": 1108.8,
"height": 803.0400000000001,
"rotation": 0,
"zIndex": 4
},
"device": {
"x": -499.3230870111943,
"y": 928.1034802753068,
"width": 912.27195389049,
"height": 1858.4640000000002,
"rotation": 0,
"zIndex": 3
}
}
},
{
"id": "s_mppgoot8_3",
"layout": "device-top",
"label": {
"en": "FEATURE 03"
},
"headline": {
"en": "Flip the contrast\nfor visual rhythm."
},
"screenshot": "",
"inverted": true,
"transforms": {
"device": {
"x": 741.2739047128944,
"y": 899.4937720329012,
"width": 1013.6355043227666,
"height": 2064.96,
"rotation": 0,
"zIndex": 3
}
}
},
{
"id": "s_mppgoot8_4",
"layout": "no-device",
"label": {
"en": "MORE"
},
"headline": {
"en": "And so\nmuch more."
},
"screenshot": "",
"transforms": {
"caption": {
"x": 190.97767332549847,
"y": 2159.762397179791,
"width": 1056,
"height": 860.4,
"rotation": 0,
"zIndex": 4
}
}
},
{
"id": "s_mpptmmaa_i",
"layout": "device-bottom",
"label": {
"en": "NEW"
},
"headline": {
"en": "Edit this\nheadline."
},
"screenshot": "",
"transforms": {
"device": {
"x": -517.4781516913463,
"y": 846.7845828437136,
"width": 1013.6355043227666,
"height": 2064.96,
"rotation": 0,
"zIndex": 3
},
"caption": {
"x": 103.91492361927885,
"y": 195.738472385429,
"width": 1108.8,
"height": 803.0400000000001,
"rotation": 0,
"zIndex": 4
}
}
},
{
"id": "s_mpptvxsc_i",
"layout": "device-bottom",
"label": {
"en": "NEW"
},
"headline": {
"en": "Edit this\nheadline."
},
"screenshot": ""
}
],
"android": [
{
"id": "s_mppgoot8_5",
"layout": "hero",
"label": {
"en": "MEET YOUR APP"
},
"headline": {
"en": "Sell one\nidea per slide."
},
"screenshot": "",
"transforms": {
"device": {
"x": 221.0133038940457,
"y": 677.042167580437,
"width": 678.5844380403457,
"height": 1470.266282420749,
"rotation": 0,
"zIndex": 3
}
}
},
{
"id": "s_mppgoot8_6",
"layout": "device-bottom",
"label": {
"en": "FEATURE 01"
},
"headline": {
"en": "Your headline\nlives here."
},
"screenshot": "",
"transforms": {
"device": {
"x": 191.68310412906385,
"y": 659.512330975256,
"width": 678.5844380403457,
"height": 1470.266282420749,
"rotation": 0,
"zIndex": 3
}
}
},
{
"id": "s_mppgoot8_7",
"layout": "two-devices",
"label": {
"en": "FEATURE 02"
},
"headline": {
"en": "Show two\nscreens at once."
},
"screenshot": "",
"screenshotSecondary": "",
"transforms": {
"deviceSecondary": {
"x": 280.3938895417132,
"y": 525.2025777437636,
"width": 678.5844380403457,
"height": 1470.266282420749,
"rotation": 0,
"zIndex": 2
},
"device": {
"x": 143.75673196815296,
"y": 569.6411918847805,
"width": 610.7259942363112,
"height": 1323.239654178674,
"rotation": 0,
"zIndex": 3
}
}
},
{
"id": "s_mppgoot8_8",
"layout": "device-top",
"label": {
"en": "FEATURE 03"
},
"headline": {
"en": "Flip the contrast\nfor visual rhythm."
},
"screenshot": "",
"inverted": true
},
{
"id": "s_mppgoot8_9",
"layout": "no-device",
"label": {
"en": "MORE"
},
"headline": {
"en": "And so\nmuch more."
},
"screenshot": ""
}
],
"ipad": [
{
"id": "s_mppgoot8_a",
"layout": "hero",
"label": {
"en": "MEET YOUR APP"
},
"headline": {
"en": "Made for\nthe big screen."
},
"screenshot": "",
"transforms": {
"device": {
"x": 68.64736263219729,
"y": 818.7701245593419,
"width": 1525.7087999999999,
"height": 1981.4399999999998,
"rotation": 0,
"zIndex": 3
}
}
},
{
"id": "s_mppgoot8_b",
"layout": "device-bottom",
"label": {
"en": "FEATURE 01"
},
"headline": {
"en": "Built for\nfocus."
},
"screenshot": ""
},
{
"id": "s_mppgoot8_c",
"layout": "device-top",
"label": {
"en": "FEATURE 02"
},
"headline": {
"en": "Always within reach."
},
"screenshot": "",
"inverted": true
}
],
"android-7": [
{
"id": "s_mppgoot8_d",
"layout": "hero",
"label": {
"en": "MEET YOUR APP"
},
"headline": {
"en": "Pocket-sized\npower."
},
"screenshot": ""
},
{
"id": "s_mppgoot8_e",
"layout": "split-landscape",
"label": {
"en": "FEATURE 01"
},
"headline": {
"en": "Wide canvas,\nbigger ideas."
},
"screenshot": ""
}
],
"android-10": [
{
"id": "s_mppgoot8_f",
"layout": "hero",
"label": {
"en": "MEET YOUR APP"
},
"headline": {
"en": "Made for\nthe big screen."
},
"screenshot": ""
},
{
"id": "s_mppgoot8_g",
"layout": "split-landscape",
"label": {
"en": "FEATURE 01"
},
"headline": {
"en": "Wide canvas,\nbigger ideas."
},
"screenshot": ""
}
],
"feature-graphic": [
{
"id": "s_mppgoot8_h",
"layout": "feature-graphic",
"label": {},
"headline": {
"en": "Your tagline goes here."
},
"screenshot": ""
}
]
},
"crossScreenMockupsByDevice": {
"iphone": [],
"ipad": [],
"android": [],
"android-7": [],
"android-10": [],
"feature-graphic": []
}
}
template/bun.lock
{
"lockfileVersion": 1,
"configVersion": 1,
"workspaces": {
"": {
"name": "app-store-screenshots",
"dependencies": {
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.4",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"html-to-image": "^1.11.11",
"jszip": "^3.10.1",
"lucide-react": "^0.460.0",
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106",
"react-rnd": "^10.5.3",
"sonner": "^1.7.0",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7",
},
"devDependencies": {
"@types/node": "^22",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.15",
"typescript": "^5.6.3",
},
},
},
"packages": {
"@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="],
"@dnd-kit/accessibility": ["@dnd-kit/accessibility@3.1.1", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-2P+YgaXF+gRsIihwwY1gCsQSYnu9Zyj2py8kY5fFvUM1qm2WA2u639R6YNVfU4GWr+ZM5mqEsfHZZLoRONbemw=="],
"@dnd-kit/core": ["@dnd-kit/core@6.3.1", "", { "dependencies": { "@dnd-kit/accessibility": "^3.1.1", "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-xkGBRQQab4RLwgXxoqETICr6S5JlogafbhNsidmrkVv2YRs5MLwpjoF2qpiGjQt8S9AoxtIV603s0GIUpY5eYQ=="],
"@dnd-kit/sortable": ["@dnd-kit/sortable@8.0.0", "", { "dependencies": { "@dnd-kit/utilities": "^3.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@dnd-kit/core": "^6.1.0", "react": ">=16.8.0" } }, "sha512-U3jk5ebVXe1Lr7c2wU7SBZjcWdQP+j7peHJfCspnA81enlu88Mgd7CC8Q+pub9ubP7eKVETzJW+IBAhsqbSu/g=="],
"@dnd-kit/utilities": ["@dnd-kit/utilities@3.2.2", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "react": ">=16.8.0" } }, "sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg=="],
"@emnapi/runtime": ["@emnapi/runtime@1.10.0", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA=="],
"@floating-ui/core": ["@floating-ui/core@1.7.5", "", { "dependencies": { "@floating-ui/utils": "^0.2.11" } }, "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ=="],
"@floating-ui/dom": ["@floating-ui/dom@1.7.6", "", { "dependencies": { "@floating-ui/core": "^1.7.5", "@floating-ui/utils": "^0.2.11" } }, "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ=="],
"@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.8", "", { "dependencies": { "@floating-ui/dom": "^1.7.6" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A=="],
"@floating-ui/utils": ["@floating-ui/utils@0.2.11", "", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
"@img/sharp-darwin-arm64": ["@img/sharp-darwin-arm64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-arm64": "1.0.4" }, "os": "darwin", "cpu": "arm64" }, "sha512-UT4p+iz/2H4twwAoLCqfA9UH5pI6DggwKEGuaPy7nCVQ8ZsiY5PIcrRvD1DzuY3qYL07NtIQcWnBSY/heikIFQ=="],
"@img/sharp-darwin-x64": ["@img/sharp-darwin-x64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-darwin-x64": "1.0.4" }, "os": "darwin", "cpu": "x64" }, "sha512-fyHac4jIc1ANYGRDxtiqelIbdWkIuQaI84Mv45KvGRRxSAa7o7d1ZKAOBaYbnepLC1WqxfpimdeWfvqqSGwR2Q=="],
"@img/sharp-libvips-darwin-arm64": ["@img/sharp-libvips-darwin-arm64@1.0.4", "", { "os": "darwin", "cpu": "arm64" }, "sha512-XblONe153h0O2zuFfTAbQYAX2JhYmDHeWikp1LM9Hul9gVPjFY427k6dFEcOL72O01QxQsWi761svJ/ev9xEDg=="],
"@img/sharp-libvips-darwin-x64": ["@img/sharp-libvips-darwin-x64@1.0.4", "", { "os": "darwin", "cpu": "x64" }, "sha512-xnGR8YuZYfJGmWPvmlunFaWJsb9T/AO2ykoP3Fz/0X5XV2aoYBPkX6xqCQvUTKKiLddarLaxpzNe+b1hjeWHAQ=="],
"@img/sharp-libvips-linux-arm": ["@img/sharp-libvips-linux-arm@1.0.5", "", { "os": "linux", "cpu": "arm" }, "sha512-gvcC4ACAOPRNATg/ov8/MnbxFDJqf/pDePbBnuBDcjsI8PssmjoKMAz4LtLaVi+OnSb5FK/yIOamqDwGmXW32g=="],
"@img/sharp-libvips-linux-arm64": ["@img/sharp-libvips-linux-arm64@1.0.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-9B+taZ8DlyyqzZQnoeIvDVR/2F4EbMepXMc/NdVbkzsJbzkUjhXv/70GQJ7tdLA4YJgNP25zukcxpX2/SueNrA=="],
"@img/sharp-libvips-linux-s390x": ["@img/sharp-libvips-linux-s390x@1.0.4", "", { "os": "linux", "cpu": "s390x" }, "sha512-u7Wz6ntiSSgGSGcjZ55im6uvTrOxSIS8/dgoVMoiGE9I6JAfU50yH5BoDlYA1tcuGS7g/QNtetJnxA6QEsCVTA=="],
"@img/sharp-libvips-linux-x64": ["@img/sharp-libvips-linux-x64@1.0.4", "", { "os": "linux", "cpu": "x64" }, "sha512-MmWmQ3iPFZr0Iev+BAgVMb3ZyC4KeFc3jFxnNbEPas60e1cIfevbtuyf9nDGIzOaW9PdnDciJm+wFFaTlj5xYw=="],
"@img/sharp-libvips-linuxmusl-arm64": ["@img/sharp-libvips-linuxmusl-arm64@1.0.4", "", { "os": "linux", "cpu": "arm64" }, "sha512-9Ti+BbTYDcsbp4wfYib8Ctm1ilkugkA/uscUn6UXK1ldpC1JjiXbLfFZtRlBhjPZ5o1NCLiDbg8fhUPKStHoTA=="],
"@img/sharp-libvips-linuxmusl-x64": ["@img/sharp-libvips-linuxmusl-x64@1.0.4", "", { "os": "linux", "cpu": "x64" }, "sha512-viYN1KX9m+/hGkJtvYYp+CCLgnJXwiQB39damAO7WMdKWlIhmYTfHjwSbQeUK/20vY154mwezd9HflVFM1wVSw=="],
"@img/sharp-linux-arm": ["@img/sharp-linux-arm@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm": "1.0.5" }, "os": "linux", "cpu": "arm" }, "sha512-JTS1eldqZbJxjvKaAkxhZmBqPRGmxgu+qFKSInv8moZ2AmT5Yib3EQ1c6gp493HvrvV8QgdOXdyaIBrhvFhBMQ=="],
"@img/sharp-linux-arm64": ["@img/sharp-linux-arm64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-arm64": "1.0.4" }, "os": "linux", "cpu": "arm64" }, "sha512-JMVv+AMRyGOHtO1RFBiJy/MBsgz0x4AWrT6QoEVVTyh1E39TrCUpTRI7mx9VksGX4awWASxqCYLCV4wBZHAYxA=="],
"@img/sharp-linux-s390x": ["@img/sharp-linux-s390x@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-s390x": "1.0.4" }, "os": "linux", "cpu": "s390x" }, "sha512-y/5PCd+mP4CA/sPDKl2961b+C9d+vPAveS33s6Z3zfASk2j5upL6fXVPZi7ztePZ5CuH+1kW8JtvxgbuXHRa4Q=="],
"@img/sharp-linux-x64": ["@img/sharp-linux-x64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linux-x64": "1.0.4" }, "os": "linux", "cpu": "x64" }, "sha512-opC+Ok5pRNAzuvq1AG0ar+1owsu842/Ab+4qvU879ippJBHvyY5n2mxF1izXqkPYlGuP/M556uh53jRLJmzTWA=="],
"@img/sharp-linuxmusl-arm64": ["@img/sharp-linuxmusl-arm64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-arm64": "1.0.4" }, "os": "linux", "cpu": "arm64" }, "sha512-XrHMZwGQGvJg2V/oRSUfSAfjfPxO+4DkiRh6p2AFjLQztWUuY/o8Mq0eMQVIY7HJ1CDQUJlxGGZRw1a5bqmd1g=="],
"@img/sharp-linuxmusl-x64": ["@img/sharp-linuxmusl-x64@0.33.5", "", { "optionalDependencies": { "@img/sharp-libvips-linuxmusl-x64": "1.0.4" }, "os": "linux", "cpu": "x64" }, "sha512-WT+d/cgqKkkKySYmqoZ8y3pxx7lx9vVejxW/W4DOFMYVSkErR+w7mf2u8m/y4+xHe7yY9DAXQMWQhpnMuFfScw=="],
"@img/sharp-wasm32": ["@img/sharp-wasm32@0.33.5", "", { "dependencies": { "@emnapi/runtime": "^1.2.0" }, "cpu": "none" }, "sha512-ykUW4LVGaMcU9lu9thv85CbRMAwfeadCJHRsg2GmeRa/cJxsVY9Rbd57JcMxBkKHag5U/x7TSBpScF4U8ElVzg=="],
"@img/sharp-win32-ia32": ["@img/sharp-win32-ia32@0.33.5", "", { "os": "win32", "cpu": "ia32" }, "sha512-T36PblLaTwuVJ/zw/LaH0PdZkRz5rd3SmMHX8GSmR7vtNSP5Z6bQkExdSK7xGWyxLw4sUknBuugTelgw2faBbQ=="],
"@img/sharp-win32-x64": ["@img/sharp-win32-x64@0.33.5", "", { "os": "win32", "cpu": "x64" }, "sha512-MpY/o8/8kj+EcnxwvrP4aTJSWw/aZ7JIGR4aBeZkZw5B7/Jn+tY9/VNwtcoGmdT7GfggGIU4kygOMSbYnOrAbg=="],
"@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
"@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
"@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
"@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
"@next/env": ["@next/env@15.0.3", "", {}, "sha512-t9Xy32pjNOvVn2AS+Utt6VmyrshbpfUMhIjFO60gI58deSo/KgLOp31XZ4O+kY/Is8WAGYwA5gR7kOb1eORDBA=="],
"@next/swc-darwin-arm64": ["@next/swc-darwin-arm64@15.0.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-s3Q/NOorCsLYdCKvQlWU+a+GeAd3C8Rb3L1YnetsgwXzhc3UTWrtQpB/3eCjFOdGUj5QmXfRak12uocd1ZiiQw=="],
"@next/swc-darwin-x64": ["@next/swc-darwin-x64@15.0.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-Zxl/TwyXVZPCFSf0u2BNj5sE0F2uR6iSKxWpq4Wlk/Sv9Ob6YCKByQTkV2y6BCic+fkabp9190hyrDdPA/dNrw=="],
"@next/swc-linux-arm64-gnu": ["@next/swc-linux-arm64-gnu@15.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-T5+gg2EwpsY3OoaLxUIofmMb7ohAUlcNZW0fPQ6YAutaWJaxt1Z1h+8zdl4FRIOr5ABAAhXtBcpkZNwUcKI2fw=="],
"@next/swc-linux-arm64-musl": ["@next/swc-linux-arm64-musl@15.0.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-WkAk6R60mwDjH4lG/JBpb2xHl2/0Vj0ZRu1TIzWuOYfQ9tt9NFsIinI1Epma77JVgy81F32X/AeD+B2cBu/YQA=="],
"@next/swc-linux-x64-gnu": ["@next/swc-linux-x64-gnu@15.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-gWL/Cta1aPVqIGgDb6nxkqy06DkwJ9gAnKORdHWX1QBbSZZB+biFYPFti8aKIQL7otCE1pjyPaXpFzGeG2OS2w=="],
"@next/swc-linux-x64-musl": ["@next/swc-linux-x64-musl@15.0.3", "", { "os": "linux", "cpu": "x64" }, "sha512-QQEMwFd8r7C0GxQS62Zcdy6GKx999I/rTO2ubdXEe+MlZk9ZiinsrjwoiBL5/57tfyjikgh6GOU2WRQVUej3UA=="],
"@next/swc-win32-arm64-msvc": ["@next/swc-win32-arm64-msvc@15.0.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-9TEp47AAd/ms9fPNgtgnT7F3M1Hf7koIYYWCMQ9neOwjbVWJsHZxrFbI3iEDJ8rf1TDGpmHbKxXf2IFpAvheIQ=="],
"@next/swc-win32-x64-msvc": ["@next/swc-win32-x64-msvc@15.0.3", "", { "os": "win32", "cpu": "x64" }, "sha512-VNAz+HN4OGgvZs6MOoVfnn41kBzT+M+tB+OK4cww6DNyWS6wKaDpaAm/qLeOUbnMh0oVx1+mg0uoYARF69dJyA=="],
"@nodelib/fs.scandir": ["@nodelib/fs.scandir@2.1.5", "", { "dependencies": { "@nodelib/fs.stat": "2.0.5", "run-parallel": "^1.1.9" } }, "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g=="],
"@nodelib/fs.stat": ["@nodelib/fs.stat@2.0.5", "", {}, "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A=="],
"@nodelib/fs.walk": ["@nodelib/fs.walk@1.2.8", "", { "dependencies": { "@nodelib/fs.scandir": "2.1.5", "fastq": "^1.6.0" } }, "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg=="],
"@radix-ui/number": ["@radix-ui/number@1.1.1", "", {}, "sha512-MkKCwxlXTgz6CFoJx3pCwn07GKp36+aZyu/u2Ln2VrA5DcdyCZkASEDBTd8x5whTQQL5CiYf4prXKLcgQdv29g=="],
"@radix-ui/primitive": ["@radix-ui/primitive@1.1.3", "", {}, "sha512-JTF99U/6XIjCBo0wqkU5sK10glYe27MRRsfwoiq5zzOEZLHU3A3KCMa5X/azekYRCJ0HlwI0crAXS/5dEHTzDg=="],
"@radix-ui/react-arrow": ["@radix-ui/react-arrow@1.1.7", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-F+M1tLhO+mlQaOWspE8Wstg+z6PwxwRd8oQ8IXceWz92kfAmalTRf0EjrouQeo7QssEPfCn05B4Ihs1K9WQ/7w=="],
"@radix-ui/react-collection": ["@radix-ui/react-collection@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Fh9rGN0MoI4ZFUNyfFVNU4y9LUz93u9/0K+yLgA2bwRojxM8JU1DyvvMBabnZPBgMWREAJvU2jjVzq+LrFUglw=="],
"@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-z4eqJvfiNnFMHIIvXP3CY57y2WJs5g2v3X0zm9mEJkrkNv4rDxu+sg9Jh8EkXyeqBkB7SOcboo9dMVqhyrACIg=="],
"@radix-ui/react-context": ["@radix-ui/react-context@1.1.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jCi/QKUM2r1Ju5a3J64TH2A5SpKAgh0LpknyqdQ4m6DCV0xJ2HG1xARRwNGPQfi1SLdLWZ1OJz6F4OMBBNiGJA=="],
"@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-TCglVRtzlffRNxRMEyR36DGBLJpeusFcgMVD9PZEzAKnUs1lKCgX5u9BmC2Yg+LL9MgZDugFFs1Vl+Jp4t/PGw=="],
"@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-1UEWRX6jnOA2y4H5WczZ44gOOjTEmlqv1uNW4GAJEO5+bauCBhv8snY65Iw5/VOS/ghKN9gr2KjnLKxrsvoMVw=="],
"@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-escape-keydown": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Nqcp+t5cTB8BinFkZgXiMJniQH0PsUt2k51FUhbdfeKvc4ACcG2uQniY/8+h1Yv6Kza4Q7lD7PQV0z0oicE0Mg=="],
"@radix-ui/react-dropdown-menu": ["@radix-ui/react-dropdown-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-menu": "2.1.16", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-1PLGQEynI/3OX/ftV54COn+3Sud/Mn8vALg2rWnBLnRaGtJDduNW/22XjlGgPdpcIbiQxjKtb7BkcjP00nqfJw=="],
"@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.3", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-0rFg/Rj2Q62NCm62jZw0QX7a3sz6QCQU0LpZdNrJX8byRGaGVTqbrW9jAoIAHyMQqsNpeZ81YgSizOt5WXq0Pw=="],
"@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.7", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-t2ODlkXBQyn7jkl6TNaw/MtVEVvIGelJDCG41Okq/KwUsJBwQ4XVZsHAVUkK4mBv3ewiAS3PGuUWuY2BoK4ZUw=="],
"@radix-ui/react-id": ["@radix-ui/react-id@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-kGkGegYIdQsOb4XjsfM97rXsiHaBwco+hFI66oO4s9LU+PLAC5oJ7khdOVFxkhsmlbpUqDAvXw11CluXP+jkHg=="],
"@radix-ui/react-label": ["@radix-ui/react-label@2.1.8", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-FmXs37I6hSBVDlO4y764TNz1rLgKwjJMQ0EGte6F3Cb3f4bIuHB/iLa/8I9VKkmOy+gNHq8rql3j686ACVV21A=="],
"@radix-ui/react-menu": ["@radix-ui/react-menu@2.1.16", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg=="],
"@radix-ui/react-popover": ["@radix-ui/react-popover@1.1.15", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-kr0X2+6Yy/vJzLYJUPCZEc8SfQcf+1COFoAqauJm74umQhta9M7lNJHP7QQS3vkvcGLQUbWpMzwrXYwrYztHKA=="],
"@radix-ui/react-popper": ["@radix-ui/react-popper@1.2.8", "", { "dependencies": { "@floating-ui/react-dom": "^2.0.0", "@radix-ui/react-arrow": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-rect": "1.1.1", "@radix-ui/react-use-size": "1.1.1", "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-0NJQ4LFFUuWkE7Oxf0htBKS6zLkkjBH+hM1uk7Ng705ReR8m/uelduy1DBo0PyBXPKVnBA6YBlU94MBGXrSBCw=="],
"@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.9", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-bpIxvq03if6UNwXZ+HTK71JLh4APvnXntDc6XOX8UVq4XQOVl7lwok0AvIl+b8zgCw3fSaVTZMpAPPagXbKmHQ=="],
"@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.5", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-/jfEwNDdQVBCNvjkGit4h6pMOzq8bHkopq458dPt2lMjx+eBQUohZNG9A7DtO/O5ukSbxuaNGXMjHicgwy6rQQ=="],
"@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
"@radix-ui/react-roving-focus": ["@radix-ui/react-roving-focus@1.1.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA=="],
"@radix-ui/react-select": ["@radix-ui/react-select@2.2.6", "", { "dependencies": { "@radix-ui/number": "1.1.1", "@radix-ui/primitive": "1.1.3", "@radix-ui/react-collection": "1.1.7", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-focus-guards": "1.1.3", "@radix-ui/react-focus-scope": "1.1.7", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-callback-ref": "1.1.1", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-use-layout-effect": "1.1.1", "@radix-ui/react-use-previous": "1.1.1", "@radix-ui/react-visually-hidden": "1.2.3", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.6.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-I30RydO+bnn2PQztvo25tswPH+wFBjehVGtmagkU78yMdwTwVf12wnAOF+AeP8S2N8xD+5UPbGhkUfPyvT+mwQ=="],
"@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
"@radix-ui/react-tabs": ["@radix-ui/react-tabs@1.1.13", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-direction": "1.1.1", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-roving-focus": "1.1.11", "@radix-ui/react-use-controllable-state": "1.2.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A=="],
"@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
"@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
"@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
"@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.2", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Qp8WbZOBe+blgpuUT+lw2xheLP8q0oatc9UpmiemEICxGvFLYmHm9QowVZGHtJlGbS6A6yJ3iViad/2cVjnOiA=="],
"@radix-ui/react-use-escape-keydown": ["@radix-ui/react-use-escape-keydown@1.1.1", "", { "dependencies": { "@radix-ui/react-use-callback-ref": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Il0+boE7w/XebUHyBjroE+DbByORGR9KKmITzbR7MyQ4akpORYP/ZmbhAr0DG7RmmBqoOnZdy2QlvajJ2QA59g=="],
"@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RbJRS4UWQFkzHTTwVymMTUv8EqYhOp8dOOviLj2ugtTiXRaRQS7GLGxZTLL1jWhMeoSCf5zmcZkqTl9IiYfXcQ=="],
"@radix-ui/react-use-previous": ["@radix-ui/react-use-previous@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-2dHfToCj/pzca2Ck724OZ5L0EVrr3eHRNsG/b3xQJLA2hZpVCS99bLAX+hm1IHXDEnzU6by5z/5MIY794/a8NQ=="],
"@radix-ui/react-use-rect": ["@radix-ui/react-use-rect@1.1.1", "", { "dependencies": { "@radix-ui/rect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-QTYuDesS0VtuHNNvMh+CjlKJ4LJickCMUAqjlE3+j8w+RlRpwyX3apEQKGFzbZGdo7XNG1tXa+bQqIE7HIXT2w=="],
"@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
"@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
"@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
"@swc/counter": ["@swc/counter@0.1.3", "", {}, "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ=="],
"@swc/helpers": ["@swc/helpers@0.5.13", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w=="],
"@types/node": ["@types/node@22.19.19", "", { "dependencies": { "undici-types": "~6.21.0" } }, "sha512-dyh/xO2Fh5bYrfWaaqGrRQQGkNdmYw6AmaAUvYeUMNTWQtvb796ikLdmTchRmOlOiIJ1TDXfWgVx1QkUlQ6Hew=="],
"@types/prop-types": ["@types/prop-types@15.7.15", "", {}, "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw=="],
"@types/react": ["@types/react@18.3.28", "", { "dependencies": { "@types/prop-types": "*", "csstype": "^3.2.2" } }, "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw=="],
"@types/react-dom": ["@types/react-dom@18.3.7", "", { "peerDependencies": { "@types/react": "^18.0.0" } }, "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ=="],
"any-promise": ["any-promise@1.3.0", "", {}, "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A=="],
"anymatch": ["anymatch@3.1.3", "", { "dependencies": { "normalize-path": "^3.0.0", "picomatch": "^2.0.4" } }, "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw=="],
"arg": ["arg@5.0.2", "", {}, "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg=="],
"aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
"autoprefixer": ["autoprefixer@10.5.0", "", { "dependencies": { "browserslist": "^4.28.2", "caniuse-lite": "^1.0.30001787", "fraction.js": "^5.3.4", "picocolors": "^1.1.1", "postcss-value-parser": "^4.2.0" }, "peerDependencies": { "postcss": "^8.1.0" }, "bin": { "autoprefixer": "bin/autoprefixer" } }, "sha512-FMhOoZV4+qR6aTUALKX2rEqGG+oyATvwBt9IIzVR5rMa2HRWPkxf+P+PAJLD1I/H5/II+HuZcBJYEFBpq39ong=="],
"baseline-browser-mapping": ["baseline-browser-mapping@2.10.30", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-xjOFN16Ha1+Rz4nFYKqHU/LSB+gx/Vi3yQLX7r7sAW+Wa+8hhF2h4pvqTrTMc8+WcDBEunnUurr46Jvv0jk3Vg=="],
"binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="],
"braces": ["braces@3.0.3", "", { "dependencies": { "fill-range": "^7.1.1" } }, "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA=="],
"browserslist": ["browserslist@4.28.2", "", { "dependencies": { "baseline-browser-mapping": "^2.10.12", "caniuse-lite": "^1.0.30001782", "electron-to-chromium": "^1.5.328", "node-releases": "^2.0.36", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-48xSriZYYg+8qXna9kwqjIVzuQxi+KYWp2+5nCYnYKPTr0LvD89Jqk2Or5ogxz0NUMfIjhh2lIUX/LyX9B4oIg=="],
"busboy": ["busboy@1.6.0", "", { "dependencies": { "streamsearch": "^1.1.0" } }, "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA=="],
"camelcase-css": ["camelcase-css@2.0.1", "", {}, "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA=="],
"caniuse-lite": ["caniuse-lite@1.0.30001792", "", {}, "sha512-hVLMUZFgR4JJ6ACt1uEESvQN1/dBVqPAKY0hgrV70eN3391K6juAfTjKZLKvOMsx8PxA7gsY1/tLMMTcfFLLpw=="],
"chokidar": ["chokidar@3.6.0", "", { "dependencies": { "anymatch": "~3.1.2", "braces": "~3.0.2", "glob-parent": "~5.1.2", "is-binary-path": "~2.1.0", "is-glob": "~4.0.1", "normalize-path": "~3.0.0", "readdirp": "~3.6.0" }, "optionalDependencies": { "fsevents": "~2.3.2" } }, "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw=="],
"class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
"client-only": ["client-only@0.0.1", "", {}, "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="],
"clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
"color": ["color@4.2.3", "", { "dependencies": { "color-convert": "^2.0.1", "color-string": "^1.9.0" } }, "sha512-1rXeuUUiGGrykh+CeBdu5Ie7OJwinCgQY0bc7GCRxy5xVHy+moaqkpL/jqQq0MtQOeYcrqEz4abc5f0KtU7W4A=="],
"color-convert": ["color-convert@2.0.1", "", { "dependencies": { "color-name": "~1.1.4" } }, "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ=="],
"color-name": ["color-name@1.1.4", "", {}, "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="],
"color-string": ["color-string@1.9.1", "", { "dependencies": { "color-name": "^1.0.0", "simple-swizzle": "^0.2.2" } }, "sha512-shrVawQFojnZv6xM40anx4CkoDP+fZsw/ZerEMsW/pyzsRbElpsL/DBVW7q3ExxwusdNXI3lXpuhEZkzs8p5Eg=="],
"commander": ["commander@4.1.1", "", {}, "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA=="],
"core-util-is": ["core-util-is@1.0.3", "", {}, "sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ=="],
"cssesc": ["cssesc@3.0.0", "", { "bin": { "cssesc": "bin/cssesc" } }, "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg=="],
"csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
"detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
"detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
"didyoumean": ["didyoumean@1.2.2", "", {}, "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="],
"dlv": ["dlv@1.1.3", "", {}, "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA=="],
"electron-to-chromium": ["electron-to-chromium@1.5.357", "", {}, "sha512-NHlTIQDK8fmVwHwuIzmXYEJ1Ewq3D9wDNc0cWXxDGysP6Pb21giwGNkxiTifyKy/4SoPuN5l6GLP1W9Sv7zB2g=="],
"es-errors": ["es-errors@1.3.0", "", {}, "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw=="],
"escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
"fast-glob": ["fast-glob@3.3.3", "", { "dependencies": { "@nodelib/fs.stat": "^2.0.2", "@nodelib/fs.walk": "^1.2.3", "glob-parent": "^5.1.2", "merge2": "^1.3.0", "micromatch": "^4.0.8" } }, "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg=="],
"fastq": ["fastq@1.20.1", "", { "dependencies": { "reusify": "^1.0.4" } }, "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw=="],
"fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
"fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="],
"fraction.js": ["fraction.js@5.3.4", "", {}, "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ=="],
"fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
"function-bind": ["function-bind@1.1.2", "", {}, "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA=="],
"get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
"glob-parent": ["glob-parent@6.0.2", "", { "dependencies": { "is-glob": "^4.0.3" } }, "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A=="],
"hasown": ["hasown@2.0.3", "", { "dependencies": { "function-bind": "^1.1.2" } }, "sha512-ej4AhfhfL2Q2zpMmLo7U1Uv9+PyhIZpgQLGT1F9miIGmiCJIoCgSmczFdrc97mWT4kVY72KA+WnnhJ5pghSvSg=="],
"html-to-image": ["html-to-image@1.11.13", "", {}, "sha512-cuOPoI7WApyhBElTTb9oqsawRvZ0rHhaHwghRLlTuffoD1B2aDemlCruLeZrUIIdvG7gs9xeELEPm6PhuASqrg=="],
"immediate": ["immediate@3.0.6", "", {}, "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="],
"inherits": ["inherits@2.0.4", "", {}, "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ=="],
"is-arrayish": ["is-arrayish@0.3.4", "", {}, "sha512-m6UrgzFVUYawGBh1dUsWR5M2Clqic9RVXC/9f8ceNlv2IcO9j9J/z8UoCLPqtsPBFNzEpfR3xftohbfqDx8EQA=="],
"is-binary-path": ["is-binary-path@2.1.0", "", { "dependencies": { "binary-extensions": "^2.0.0" } }, "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw=="],
"is-core-module": ["is-core-module@2.16.2", "", { "dependencies": { "hasown": "^2.0.3" } }, "sha512-evOr8xfXKxE6qSR0hSXL2r3sd7ALj8+7jQEUvPYcm5sgZFdJ+AYzT6yNmJenvIYQBgIGwfwz08sL8zoL7yq2BA=="],
"is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
"is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
"is-number": ["is-number@7.0.0", "", {}, "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng=="],
"isarray": ["isarray@1.0.0", "", {}, "sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ=="],
"jiti": ["jiti@1.21.7", "", { "bin": { "jiti": "bin/jiti.js" } }, "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A=="],
"js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
"jszip": ["jszip@3.10.1", "", { "dependencies": { "lie": "~3.3.0", "pako": "~1.0.2", "readable-stream": "~2.3.6", "setimmediate": "^1.0.5" } }, "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g=="],
"lie": ["lie@3.3.0", "", { "dependencies": { "immediate": "~3.0.5" } }, "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ=="],
"lilconfig": ["lilconfig@3.1.3", "", {}, "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw=="],
"lines-and-columns": ["lines-and-columns@1.2.4", "", {}, "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="],
"loose-envify": ["loose-envify@1.4.0", "", { "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, "bin": { "loose-envify": "cli.js" } }, "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q=="],
"lucide-react": ["lucide-react@0.460.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc" } }, "sha512-BVtq/DykVeIvRTJvRAgCsOwaGL8Un3Bxh8MbDxMhEWlZay3T4IpEKDEpwt5KZ0KJMHzgm6jrltxlT5eXOWXDHg=="],
"merge2": ["merge2@1.4.1", "", {}, "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg=="],
"micromatch": ["micromatch@4.0.8", "", { "dependencies": { "braces": "^3.0.3", "picomatch": "^2.3.1" } }, "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA=="],
"mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="],
"nanoid": ["nanoid@3.3.12", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-ZB9RH/39qpq5Vu6Y+NmUaFhQR6pp+M2Xt76XBnEwDaGcVAqhlvxrl3B2bKS5D3NH3QR76v3aSrKaF/Kiy7lEtQ=="],
"next": ["next@15.0.3", "", { "dependencies": { "@next/env": "15.0.3", "@swc/counter": "0.1.3", "@swc/helpers": "0.5.13", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.0.3", "@next/swc-darwin-x64": "15.0.3", "@next/swc-linux-arm64-gnu": "15.0.3", "@next/swc-linux-arm64-musl": "15.0.3", "@next/swc-linux-x64-gnu": "15.0.3", "@next/swc-linux-x64-musl": "15.0.3", "@next/swc-win32-arm64-msvc": "15.0.3", "@next/swc-win32-x64-msvc": "15.0.3", "sharp": "^0.33.5" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.41.2", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-66855b96-20241106", "react-dom": "^18.2.0 || 19.0.0-rc-66855b96-20241106", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-ontCbCRKJUIoivAdGB34yCaOcPgYXr9AAkV/IwqFfWWTXEPUgLYkSkqBhIk9KK7gGmgjc64B+RdoeIDM13Irnw=="],
"node-releases": ["node-releases@2.0.44", "", {}, "sha512-5WUyunoPMsvvEhS8AxHtRzP+oA8UCkJ7YRxatWKjngndhDGLiqEVAQKWjFAiAiuL8zMRGzGSJxFnLetoa43qGQ=="],
"normalize-path": ["normalize-path@3.0.0", "", {}, "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA=="],
"object-assign": ["object-assign@4.1.1", "", {}, "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg=="],
"object-hash": ["object-hash@3.0.0", "", {}, "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw=="],
"pako": ["pako@1.0.11", "", {}, "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="],
"path-parse": ["path-parse@1.0.7", "", {}, "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="],
"picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
"picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
"pify": ["pify@2.3.0", "", {}, "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog=="],
"pirates": ["pirates@4.0.7", "", {}, "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA=="],
"postcss": ["postcss@8.5.14", "", { "dependencies": { "nanoid": "^3.3.11", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-SoSL4+OSEtR99LHFZQiJLkT59C5B1amGO1NzTwj7TT1qCUgUO6hxOvzkOYxD+vMrXBM3XJIKzokoERdqQq/Zmg=="],
"postcss-import": ["postcss-import@15.1.0", "", { "dependencies": { "postcss-value-parser": "^4.0.0", "read-cache": "^1.0.0", "resolve": "^1.1.7" }, "peerDependencies": { "postcss": "^8.0.0" } }, "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew=="],
"postcss-js": ["postcss-js@4.1.0", "", { "dependencies": { "camelcase-css": "^2.0.1" }, "peerDependencies": { "postcss": "^8.4.21" } }, "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw=="],
"postcss-load-config": ["postcss-load-config@6.0.1", "", { "dependencies": { "lilconfig": "^3.1.1" }, "peerDependencies": { "jiti": ">=1.21.0", "postcss": ">=8.0.9", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["jiti", "postcss", "tsx", "yaml"] }, "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g=="],
"postcss-nested": ["postcss-nested@6.2.0", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
"postcss-selector-parser": ["postcss-selector-parser@6.1.2", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg=="],
"postcss-value-parser": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
"process-nextick-args": ["process-nextick-args@2.0.1", "", {}, "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag=="],
"prop-types": ["prop-types@15.8.1", "", { "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", "react-is": "^16.13.1" } }, "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg=="],
"queue-microtask": ["queue-microtask@1.2.3", "", {}, "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A=="],
"re-resizable": ["re-resizable@6.11.2", "", { "peerDependencies": { "react": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^16.13.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-2xI2P3OHs5qw7K0Ud1aLILK6MQxW50TcO+DetD9eIV58j84TqYeHoZcL9H4GXFXXIh7afhH8mv5iUCXII7OW7A=="],
"react": ["react@19.0.0-rc-66855b96-20241106", "", {}, "sha512-klH7xkT71SxRCx4hb1hly5FJB21Hz0ACyxbXYAECEqssUjtJeFUAaI2U1DgJAzkGEnvEm3DkxuBchMC/9K4ipg=="],
"react-dom": ["react-dom@19.0.0-rc-66855b96-20241106", "", { "dependencies": { "scheduler": "0.25.0-rc-66855b96-20241106" }, "peerDependencies": { "react": "19.0.0-rc-66855b96-20241106" } }, "sha512-D25vdaytZ1wFIRiwNU98NPQ/upS2P8Co4/oNoa02PzHbh8deWdepjm5qwZM/46OdSiGv4WSWwxP55RO9obqJEQ=="],
"react-draggable": ["react-draggable@4.5.0", "", { "dependencies": { "clsx": "^2.1.1", "prop-types": "^15.8.1" }, "peerDependencies": { "react": ">= 16.3.0", "react-dom": ">= 16.3.0" } }, "sha512-VC+HBLEZ0XJxnOxVAZsdRi8rD04Iz3SiiKOoYzamjylUcju/hP9np/aZdLHf/7WOD268WMoNJMvYfB5yAK45cw=="],
"react-is": ["react-is@16.13.1", "", {}, "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="],
"react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
"react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
"react-rnd": ["react-rnd@10.5.3", "", { "dependencies": { "re-resizable": "^6.11.2", "react-draggable": "^4.5.0", "tslib": "2.6.2" }, "peerDependencies": { "react": ">=16.3.0", "react-dom": ">=16.3.0" } }, "sha512-s/sIT3pGZnQ+57egijkTp9mizjIWrJz68Pq6yd+F/wniFY3IriML18dUXnQe/HP9uMiJ+9MAp44hljG99fZu6Q=="],
"react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
"read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
"readable-stream": ["readable-stream@2.3.8", "", { "dependencies": { "core-util-is": "~1.0.0", "inherits": "~2.0.3", "isarray": "~1.0.0", "process-nextick-args": "~2.0.0", "safe-buffer": "~5.1.1", "string_decoder": "~1.1.1", "util-deprecate": "~1.0.1" } }, "sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA=="],
"readdirp": ["readdirp@3.6.0", "", { "dependencies": { "picomatch": "^2.2.1" } }, "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA=="],
"resolve": ["resolve@1.22.12", "", { "dependencies": { "es-errors": "^1.3.0", "is-core-module": "^2.16.1", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, "bin": { "resolve": "bin/resolve" } }, "sha512-TyeJ1zif53BPfHootBGwPRYT1RUt6oGWsaQr8UyZW/eAm9bKoijtvruSDEmZHm92CwS9nj7/fWttqPCgzep8CA=="],
"reusify": ["reusify@1.1.0", "", {}, "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw=="],
"run-parallel": ["run-parallel@1.2.0", "", { "dependencies": { "queue-microtask": "^1.2.2" } }, "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA=="],
"safe-buffer": ["safe-buffer@5.1.2", "", {}, "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="],
"scheduler": ["scheduler@0.25.0-rc-66855b96-20241106", "", {}, "sha512-HQXp/Mnp/MMRSXMQF7urNFla+gmtXW/Gr1KliuR0iboTit4KvZRY8KYaq5ccCTAOJiUqQh2rE2F3wgUekmgdlA=="],
"semver": ["semver@7.8.0", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-AcM7dV/5ul4EekoQ29Agm5vri8JNqRyj39o0qpX6vDF2GZrtutZl5RwgD1XnZjiTAfncsJhMI48QQH3sN87YNA=="],
"setimmediate": ["setimmediate@1.0.5", "", {}, "sha512-MATJdZp8sLqDl/68LfQmbP8zKPLQNV6BIZoIgrscFDQ+RsvK/BxeDQOgyxKKoh0y/8h3BqVFnCqQ/gd+reiIXA=="],
"sharp": ["sharp@0.33.5", "", { "dependencies": { "color": "^4.2.3", "detect-libc": "^2.0.3", "semver": "^7.6.3" }, "optionalDependencies": { "@img/sharp-darwin-arm64": "0.33.5", "@img/sharp-darwin-x64": "0.33.5", "@img/sharp-libvips-darwin-arm64": "1.0.4", "@img/sharp-libvips-darwin-x64": "1.0.4", "@img/sharp-libvips-linux-arm": "1.0.5", "@img/sharp-libvips-linux-arm64": "1.0.4", "@img/sharp-libvips-linux-s390x": "1.0.4", "@img/sharp-libvips-linux-x64": "1.0.4", "@img/sharp-libvips-linuxmusl-arm64": "1.0.4", "@img/sharp-libvips-linuxmusl-x64": "1.0.4", "@img/sharp-linux-arm": "0.33.5", "@img/sharp-linux-arm64": "0.33.5", "@img/sharp-linux-s390x": "0.33.5", "@img/sharp-linux-x64": "0.33.5", "@img/sharp-linuxmusl-arm64": "0.33.5", "@img/sharp-linuxmusl-x64": "0.33.5", "@img/sharp-wasm32": "0.33.5", "@img/sharp-win32-ia32": "0.33.5", "@img/sharp-win32-x64": "0.33.5" } }, "sha512-haPVm1EkS9pgvHrQ/F3Xy+hgcuMV0Wm9vfIBSiwZ05k+xgb0PkBQpGsAA/oWdDobNaZTH5ppvHtzCFbnSEwHVw=="],
"simple-swizzle": ["simple-swizzle@0.2.4", "", { "dependencies": { "is-arrayish": "^0.3.1" } }, "sha512-nAu1WFPQSMNr2Zn9PGSZK9AGn4t/y97lEm+MXTtUDwfP0ksAIX4nO+6ruD9Jwut4C49SB1Ws+fbXsm/yScWOHw=="],
"sonner": ["sonner@1.7.4", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-DIS8z4PfJRbIyfVFDVnK9rO3eYDtse4Omcm6bt0oEr5/jtLgysmjuBl1frJ9E/EQZrFmKx2A8m/s5s9CRXIzhw=="],
"source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
"streamsearch": ["streamsearch@1.1.0", "", {}, "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg=="],
"string_decoder": ["string_decoder@1.1.1", "", { "dependencies": { "safe-buffer": "~5.1.0" } }, "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg=="],
"styled-jsx": ["styled-jsx@5.1.6", "", { "dependencies": { "client-only": "0.0.1" }, "peerDependencies": { "@babel/core": "*", "babel-plugin-macros": "*", "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0 || ^19.0.0-0" }, "optionalPeers": ["@babel/core", "babel-plugin-macros"] }, "sha512-qSVyDTeMotdvQYoHWLNGwRFJHC+i+ZvdBRYosOFgC+Wg1vx4frN2/RG/NA7SYqqvKNLf39P2LSRA2pu6n0XYZA=="],
"sucrase": ["sucrase@3.35.1", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.2", "commander": "^4.0.0", "lines-and-columns": "^1.1.6", "mz": "^2.7.0", "pirates": "^4.0.1", "tinyglobby": "^0.2.11", "ts-interface-checker": "^0.1.9" }, "bin": { "sucrase": "bin/sucrase", "sucrase-node": "bin/sucrase-node" } }, "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw=="],
"supports-preserve-symlinks-flag": ["supports-preserve-symlinks-flag@1.0.0", "", {}, "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w=="],
"tailwind-merge": ["tailwind-merge@2.6.1", "", {}, "sha512-Oo6tHdpZsGpkKG88HJ8RR1rg/RdnEkQEfMoEk2x1XRI3F1AxeU+ijRXpiVUF4UbLfcxxRGw6TbUINKYdWVsQTQ=="],
"tailwindcss": ["tailwindcss@3.4.19", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "arg": "^5.0.2", "chokidar": "^3.6.0", "didyoumean": "^1.2.2", "dlv": "^1.1.3", "fast-glob": "^3.3.2", "glob-parent": "^6.0.2", "is-glob": "^4.0.3", "jiti": "^1.21.7", "lilconfig": "^3.1.3", "micromatch": "^4.0.8", "normalize-path": "^3.0.0", "object-hash": "^3.0.0", "picocolors": "^1.1.1", "postcss": "^8.4.47", "postcss-import": "^15.1.0", "postcss-js": "^4.0.1", "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0", "postcss-nested": "^6.2.0", "postcss-selector-parser": "^6.1.2", "resolve": "^1.22.8", "sucrase": "^3.35.0" }, "bin": { "tailwind": "lib/cli.js", "tailwindcss": "lib/cli.js" } }, "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ=="],
"tailwindcss-animate": ["tailwindcss-animate@1.0.7", "", { "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders" } }, "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA=="],
"thenify": ["thenify@3.3.1", "", { "dependencies": { "any-promise": "^1.0.0" } }, "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw=="],
"thenify-all": ["thenify-all@1.6.0", "", { "dependencies": { "thenify": ">= 3.1.0 < 4" } }, "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA=="],
"tinyglobby": ["tinyglobby@0.2.16", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-pn99VhoACYR8nFHhxqix+uvsbXineAasWm5ojXoN8xEwK5Kd3/TrhNn1wByuD52UxWRLy8pu+kRMniEi6Eq9Zg=="],
"to-regex-range": ["to-regex-range@5.0.1", "", { "dependencies": { "is-number": "^7.0.0" } }, "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ=="],
"ts-interface-checker": ["ts-interface-checker@0.1.13", "", {}, "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA=="],
"tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
"typescript": ["typescript@5.9.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw=="],
"undici-types": ["undici-types@6.21.0", "", {}, "sha512-iwDZqg0QAGrg9Rav5H4n0M64c3mkR59cJ6wQp+7C4nI0gsmExaedaYLNO44eT4AtBBwjbTiGPMlt2Md0T9H9JQ=="],
"update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
"use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
"use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
"util-deprecate": ["util-deprecate@1.0.2", "", {}, "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="],
"@radix-ui/react-collection/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
"@radix-ui/react-dialog/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
"@radix-ui/react-label/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.4", "", { "dependencies": { "@radix-ui/react-slot": "1.2.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-9hQc4+GNVtJAIEPEqlYqW5RiYdrr8ea5XQ0ZOnD6fgru+83kqT15mq2OCcbe8KnjRZl5vF3ks69AKz3kh1jrhg=="],
"@radix-ui/react-menu/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
"@radix-ui/react-popover/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
"@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
"@radix-ui/react-select/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
"@radix-ui/react-tooltip/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
"chokidar/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
"fast-glob/glob-parent": ["glob-parent@5.1.2", "", { "dependencies": { "is-glob": "^4.0.1" } }, "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow=="],
"next/postcss": ["postcss@8.4.31", "", { "dependencies": { "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" } }, "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ=="],
"react-rnd/tslib": ["tslib@2.6.2", "", {}, "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q=="],
"tinyglobby/picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
}
}
template/components.json
{
"$schema": "https://ui.shadcn.com/schema.json",
"style": "new-york",
"rsc": true,
"tsx": true,
"tailwind": {
"config": "tailwind.config.ts",
"css": "src/app/globals.css",
"baseColor": "neutral",
"cssVariables": true,
"prefix": ""
},
"aliases": {
"components": "@/components",
"utils": "@/lib/utils",
"ui": "@/components/ui",
"lib": "@/lib",
"hooks": "@/hooks"
},
"iconLibrary": "lucide"
}
template/next.config.mjs
/** @type {import('next').NextConfig} */
const nextConfig = {
reactStrictMode: false,
};
export default nextConfig;
template/package.json
{
"name": "app-store-screenshots",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"@dnd-kit/core": "^6.1.0",
"@dnd-kit/sortable": "^8.0.0",
"@dnd-kit/utilities": "^3.2.2",
"@radix-ui/react-dialog": "^1.1.2",
"@radix-ui/react-dropdown-menu": "^2.1.2",
"@radix-ui/react-label": "^2.1.0",
"@radix-ui/react-popover": "^1.1.2",
"@radix-ui/react-select": "^2.1.2",
"@radix-ui/react-slot": "^1.1.0",
"@radix-ui/react-tabs": "^1.1.1",
"@radix-ui/react-tooltip": "^1.1.4",
"class-variance-authority": "^0.7.0",
"clsx": "^2.1.1",
"html-to-image": "^1.11.11",
"jszip": "^3.10.1",
"lucide-react": "^0.460.0",
"next": "15.0.3",
"react": "19.0.0-rc-66855b96-20241106",
"react-dom": "19.0.0-rc-66855b96-20241106",
"react-rnd": "^10.5.3",
"sonner": "^1.7.0",
"tailwind-merge": "^2.5.4",
"tailwindcss-animate": "^1.0.7"
},
"devDependencies": {
"@types/node": "^22",
"@types/react": "^18",
"@types/react-dom": "^18",
"autoprefixer": "^10.4.20",
"postcss": "^8.4.49",
"tailwindcss": "^3.4.15",
"typescript": "^5.6.3"
}
}
template/postcss.config.mjs
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};
template/public/screenshots/android/phone/en/.gitkeep
template/public/screenshots/apple/ipad/en/.gitkeep
template/public/screenshots/apple/iphone/en/.gitkeep
template/README.md
# App Store Screenshots — Editor Template
A pre-built Next.js + ShadCN editor for generating App Store and Google Play screenshots. Scaffolded by the `app-store-screenshots` skill.
## Quick start
```bash
bun install # or pnpm / yarn / npm
bun dev # http://localhost:3000
```
## What's inside
- **Connected canvas editor** (`src/components/editor/`) — every screen sits on one horizontal canvas, so phones, captions, and other elements can be dragged across screen boundaries and exported as split crops when Connected mode is enabled.
- **Screen controls** — drag-to-reorder screens, click-to-edit text, screenshot drop targets, per-screen layout switcher, dark/light toggle.
- **Device frames** (`src/components/editor/device-frames.tsx`) — iPhone (PNG mockup), iPad, Android phone, Android tablet (portrait + landscape), feature graphic.
- **Auto-save (git-trackable)** — every change is persisted within ~600ms to **`app-store-screenshots.json`** at the project root (via `/api/project`) **and** mirrored to `localStorage` as an instant-paint cache. Commit `app-store-screenshots.json` and you can `git clone` to another machine and resume exactly where you left off.
- **Multi-device decks** — iOS and Android slide decks live side by side; switching the platform tab preserves both.
- **One-click export** — bulk PNG export at any required App Store / Play Store resolution using `html-to-image`; each PNG is rendered from the current connected or isolated deck mode.
- **Project migration** — older `app-store-screenshots.json` files are migrated on load. Existing per-slide transforms remain valid, and connected crops become available without rewriting the deck by hand.
- **Legacy-safe mode** — pre-v2 projects opened directly in the editor start in isolated-screen mode first, then can opt into connected crops with the toolbar's Connected/Isolated control. Skill-run in-place migrations keep legacy decks isolated unless the project had already explicitly opted into connected canvas.
## Adding screenshots
Two ways:
1. **Drop a file in the inspector** — drag-and-drop or click Pick. The file is sent to `/api/upload`, hashed, and written to `public/screenshots/uploaded/<hash>.png`. The slide stores the resulting `/screenshots/uploaded/...` path, so commit those files alongside `app-store-screenshots.json` and the screenshots survive a `git clone`.
2. **Reference a static file** — put PNGs under `public/screenshots/{platform}/{device}/{locale}/` and reference them by path. Default sample slides expect:
- `public/screenshots/apple/iphone/en/...`
- `public/screenshots/android/phone/en/...`
- `public/screenshots/apple/ipad/en/...`
Update the matching `screenshot` fields in `app-store-screenshots.json` to point at whatever filenames you choose.
## Exporting
The toolbar dropdown lists every Apple/Google-required size for the current device. Click **Export bundle** to download a zip. In Connected mode, each PNG is clipped from the connected canvas, so an element that straddles two screens appears split exactly where you placed it. In Isolated mode, each screen clips its own elements and legacy offscreen content cannot leak into neighboring exports.
## Customizing
| Where | What |
|-------|------|
| `src/lib/constants.ts` | Canvas dimensions, export sizes, frame ratios, themes, locales |
| `app-store-screenshots.json` | Canonical starter project: app name, current device, connected-canvas mode, slide copy, screenshots, and transforms |
| `src/lib/defaults.ts` | Fallback/reset state used when no project file or local cache exists |
| `src/components/editor/slide-canvas.tsx` | Add new layouts and connected-canvas element rendering |
| `src/components/editor/device-frames.tsx` | Tweak device chrome (bezel radii, camera dots) |
| `src/app/layout.tsx` | Swap the font (`next/font/google`) |
## Notes
- `mockup.png` is the iPhone bezel overlay; replacing it requires re-measuring the `PHONE_SCREEN` constants.
- Image preloading converts every static path to a base64 data URI before exports run, and export retries paths that were previously missing — this prevents the html-to-image race where some slide screenshots come out black.
- Reset via the toolbar's circular arrow icon clears in-memory state and reloads the default screens. To wipe disk state too, delete `app-store-screenshots.json`.
- **Persistence model** — the canonical state lives in `app-store-screenshots.json` (git-tracked). On load, the editor reads localStorage first for instant paint, then overwrites with the file contents if present; if the file endpoint is unavailable, autosave is blocked so stale cache cannot overwrite disk. On save, both are written. If you ever see a conflict, the file always wins.
- **Migration model** — schema v1 projects do not need a manual conversion. On first load, the editor upgrades localized text and transform records, writes `schemaVersion: 2`, preserves all existing screens, and keeps `connectedCanvas: false` so old offscreen/clipped elements export exactly as isolated screens. Turn on **Connected** in the toolbar when you want elements to cross screen edges. Explicit skill migrations preserve an existing `connectedCanvas` choice, otherwise they keep legacy decks isolated too.
- **Custom themes** — if a project file references a theme id that is not present in `src/lib/constants.ts`, the editor falls back to `clean-light` and shows a warning. Merge custom `THEMES` entries during in-place upgrades.
template/src/app/api/project/route.ts
import { promises as fs } from "node:fs";
import path from "node:path";
import { NextResponse } from "next/server";
export const dynamic = "force-dynamic";
const PROJECT_FILE = "app-store-screenshots.json";
function filePath() {
return path.join(process.cwd(), PROJECT_FILE);
}
export async function GET() {
try {
const raw = await fs.readFile(filePath(), "utf8");
const parsed = JSON.parse(raw);
return NextResponse.json({ ok: true, state: parsed });
} catch (e) {
const code = (e as NodeJS.ErrnoException).code;
if (code === "ENOENT") {
return NextResponse.json({ ok: true, state: null });
}
return NextResponse.json(
{ ok: false, error: e instanceof Error ? e.message : String(e) },
{ status: 500 },
);
}
}
export async function POST(req: Request) {
let body: unknown;
try {
body = await req.json();
} catch {
return NextResponse.json({ ok: false, error: "Invalid JSON" }, { status: 400 });
}
try {
const pretty = JSON.stringify(body, null, 2) + "\n";
await fs.writeFile(filePath(), pretty, "utf8");
return NextResponse.json({ ok: true });
} catch (e) {
return NextResponse.json(
{ ok: false, error: e instanceof Error ? e.message : String(e) },
{ status: 500 },
);
}
}
template/src/app/api/upload/route.ts
import { createHash } from "node:crypto";
import { promises as fs } from "node:fs";
import path from "node:path";
import { NextResponse } from "next/server";
export const dynamic = "force-dynamic";
const UPLOAD_DIR_REL = path.join("public", "screenshots", "uploaded");
const PUBLIC_PREFIX = "/screenshots/uploaded";
const MIME_EXT: Record<string, string> = {
"image/png": "png",
"image/jpeg": "jpg",
"image/jpg": "jpg",
};
function parseDataUrl(dataUrl: string): { mime: string; bytes: Buffer } | null {
const m = /^data:([^;]+);base64,(.+)$/.exec(dataUrl);
if (!m) return null;
const mime = m[1].toLowerCase();
const bytes = Buffer.from(m[2], "base64");
return { mime, bytes };
}
export async function POST(req: Request) {
let body: { dataUrl?: string };
try {
body = (await req.json()) as { dataUrl?: string };
} catch {
return NextResponse.json({ ok: false, error: "Invalid JSON" }, { status: 400 });
}
if (!body?.dataUrl || typeof body.dataUrl !== "string") {
return NextResponse.json({ ok: false, error: "Missing dataUrl" }, { status: 400 });
}
const parsed = parseDataUrl(body.dataUrl);
if (!parsed) {
return NextResponse.json({ ok: false, error: "Unsupported data URL" }, { status: 400 });
}
const ext = MIME_EXT[parsed.mime];
if (!ext) {
return NextResponse.json(
{ ok: false, error: `Unsupported mime: ${parsed.mime}` },
{ status: 400 },
);
}
if (parsed.bytes.byteLength > 8 * 1024 * 1024) {
return NextResponse.json({ ok: false, error: "Image too large (>8MB)" }, { status: 413 });
}
const hash = createHash("sha1").update(parsed.bytes).digest("hex").slice(0, 16);
const filename = `${hash}.${ext}`;
const absDir = path.join(process.cwd(), UPLOAD_DIR_REL);
const absFile = path.join(absDir, filename);
try {
await fs.mkdir(absDir, { recursive: true });
try {
await fs.access(absFile);
} catch {
await fs.writeFile(absFile, parsed.bytes);
}
return NextResponse.json({ ok: true, path: `${PUBLIC_PREFIX}/${filename}` });
} catch (e) {
return NextResponse.json(
{ ok: false, error: e instanceof Error ? e.message : String(e) },
{ status: 500 },
);
}
}
template/src/app/globals.css
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 240 14% 99%;
--foreground: 240 10% 10%;
--card: 240 14% 99%;
--card-foreground: 240 10% 10%;
--popover: 240 16% 99%;
--popover-foreground: 240 10% 10%;
--primary: 240 8% 12%;
--primary-foreground: 240 14% 98%;
--secondary: 240 9% 95%;
--secondary-foreground: 240 8% 14%;
--muted: 240 9% 95%;
--muted-foreground: 240 5% 32%;
--accent: 240 9% 94%;
--accent-foreground: 240 8% 14%;
--destructive: 0 78% 56%;
--destructive-foreground: 240 14% 98%;
--border: 240 9% 90%;
--input: 240 9% 90%;
--ring: 240 6% 62%;
--radius: 0.625rem;
}
.dark {
--background: 240 12% 5%;
--foreground: 240 12% 96%;
--card: 240 12% 5%;
--card-foreground: 240 12% 96%;
--popover: 240 12% 6%;
--popover-foreground: 240 12% 96%;
--primary: 240 12% 96%;
--primary-foreground: 240 10% 10%;
--secondary: 240 8% 16%;
--secondary-foreground: 240 12% 96%;
--muted: 240 8% 14%;
--muted-foreground: 240 6% 75%;
--accent: 240 8% 16%;
--accent-foreground: 240 12% 96%;
--destructive: 0 70% 38%;
--destructive-foreground: 240 12% 96%;
--border: 240 8% 16%;
--input: 240 8% 16%;
--ring: 240 8% 70%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
[contenteditable]:empty::before {
content: attr(data-placeholder);
opacity: 0.4;
}
}
/* react-rnd editable element hint: subtle outline + visible resize handles on hover */
.rnd-editable {
cursor: move;
outline: 2px dashed transparent;
outline-offset: 4px;
transition: outline-color 120ms ease;
}
.rnd-editable:hover {
outline-color: rgba(91, 124, 250, 0.55);
}
.rnd-editable:focus-within,
.rnd-editable.rnd-selected {
outline-color: rgba(91, 124, 250, 0.9);
outline-style: solid;
}
.rnd-rotate-handle {
position: absolute;
right: -14px;
top: -14px;
z-index: 20;
display: flex;
height: 28px;
width: 28px;
align-items: center;
justify-content: center;
border-radius: 999px;
border: 1px solid rgba(91, 124, 250, 0.65);
background: rgba(255, 255, 255, 0.92);
color: rgba(30, 41, 59, 0.92);
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.2);
cursor: grab;
opacity: 0;
transition:
opacity 120ms ease,
transform 120ms ease;
}
.rnd-editable:hover .rnd-rotate-handle,
.rnd-editable.rnd-selected .rnd-rotate-handle,
.rnd-rotate-handle:focus-visible {
opacity: 1;
}
.rnd-rotate-handle:hover,
.rnd-rotate-handle:focus-visible {
transform: scale(1.05);
}
.rnd-rotate-handle:active {
cursor: grabbing;
}
/* Show a visible cursor outline on contenteditable text inside Rnd while focused. */
.rnd-editable [contenteditable]:focus {
box-shadow: 0 0 0 2px rgba(91, 124, 250, 0.45);
border-radius: 2px;
}
template/src/app/layout.tsx
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./globals.css";
const font = Inter({ subsets: ["latin"] });
export const metadata: Metadata = {
title: "App Store Screenshots",
description: "Design and export App Store + Google Play screenshots.",
};
export default function RootLayout({ children }: { children: React.ReactNode }) {
return (
<html lang="en">
<body className={font.className}>{children}</body>
</html>
);
}
template/src/app/page.tsx
import { ScreenshotEditor } from "@/components/editor/screenshot-editor";
export default function Page() {
return <ScreenshotEditor />;
}
template/src/components/editor/device-frames.tsx
"use client";
import * as React from "react";
import { PHONE_SCREEN } from "@/lib/constants";
import { img } from "@/lib/image-cache";
type FrameProps = {
src: string;
alt?: string;
style?: React.CSSProperties;
/** When true, hide EmptySlot placeholder (so it doesn't bake into exports). */
hideEmpty?: boolean;
};
// iPhone — uses pre-measured mockup.png overlay
export function Phone({ src, alt = "", style, hideEmpty }: FrameProps) {
const resolved = img(src);
return (
<div style={{ position: "relative", aspectRatio: "1022 / 2082", ...style }}>
<img
src={img("/mockup.png")}
alt=""
style={{ display: "block", width: "100%", height: "100%" }}
draggable={false}
/>
<div
style={{
position: "absolute",
zIndex: 10,
overflow: "hidden",
left: `${PHONE_SCREEN.L}%`,
top: `${PHONE_SCREEN.T}%`,
width: `${PHONE_SCREEN.W}%`,
height: `${PHONE_SCREEN.H}%`,
borderRadius: `${PHONE_SCREEN.RX}% / ${PHONE_SCREEN.RY}%`,
background: "#111",
}}
>
{resolved ? (
<img
src={resolved}
alt={alt}
style={{ display: "block", width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }}
draggable={false}
/>
) : hideEmpty ? null : (
<EmptySlot />
)}
</div>
</div>
);
}
export function AndroidPhone({ src, alt = "", style, hideEmpty }: FrameProps) {
const resolved = img(src);
return (
<div style={{ position: "relative", aspectRatio: "9 / 19.5", ...style }}>
<div
style={{
width: "100%",
height: "100%",
borderRadius: "8% / 4%",
background: "linear-gradient(160deg, #2a2a2e 0%, #18181b 100%)",
boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 40px rgba(0,0,0,0.55)",
position: "relative",
overflow: "hidden",
}}
>
<div
style={{
position: "absolute",
top: "1.5%",
left: "50%",
transform: "translateX(-50%)",
width: "3%",
height: "1.4%",
borderRadius: "50%",
background: "#0d0d0f",
border: "1px solid rgba(255,255,255,0.06)",
zIndex: 20,
}}
/>
<div
style={{
position: "absolute",
left: "3.5%",
top: "2%",
width: "93%",
height: "96%",
borderRadius: "5.5% / 2.6%",
overflow: "hidden",
background: "#000",
}}
>
{resolved ? (
<img
src={resolved}
alt={alt}
style={{ display: "block", width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }}
draggable={false}
/>
) : hideEmpty ? null : (
<EmptySlot />
)}
</div>
</div>
</div>
);
}
export function AndroidTabletP({ src, alt = "", style, hideEmpty }: FrameProps) {
const resolved = img(src);
return (
<div style={{ position: "relative", aspectRatio: "5 / 8", ...style }}>
<div
style={{
width: "100%",
height: "100%",
borderRadius: "4.5% / 2.8%",
background: "linear-gradient(160deg, #2a2a2e 0%, #18181b 100%)",
boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 48px rgba(0,0,0,0.6)",
position: "relative",
overflow: "hidden",
}}
>
<div
style={{
position: "absolute",
top: "1.2%",
left: "50%",
transform: "translateX(-50%)",
width: "1.4%",
height: "0.88%",
borderRadius: "50%",
background: "#0d0d0f",
zIndex: 20,
}}
/>
<div
style={{
position: "absolute",
left: "3.5%",
top: "2.2%",
width: "93%",
height: "95.6%",
borderRadius: "2.5% / 1.6%",
overflow: "hidden",
background: "#000",
}}
>
{resolved ? (
<img
src={resolved}
alt={alt}
style={{ display: "block", width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }}
draggable={false}
/>
) : hideEmpty ? null : (
<EmptySlot />
)}
</div>
</div>
</div>
);
}
export function AndroidTabletL({ src, alt = "", style, hideEmpty }: FrameProps) {
const resolved = img(src);
return (
<div style={{ position: "relative", aspectRatio: "8 / 5", ...style }}>
<div
style={{
width: "100%",
height: "100%",
borderRadius: "2.8% / 4.5%",
background: "linear-gradient(160deg, #2a2a2e 0%, #18181b 100%)",
boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.08), 0 8px 48px rgba(0,0,0,0.6)",
position: "relative",
overflow: "hidden",
}}
>
<div
style={{
position: "absolute",
left: "1.2%",
top: "50%",
transform: "translateY(-50%)",
width: "0.88%",
height: "1.4%",
borderRadius: "50%",
background: "#0d0d0f",
zIndex: 20,
}}
/>
<div
style={{
position: "absolute",
left: "2.2%",
top: "3.5%",
width: "95.6%",
height: "93%",
borderRadius: "1.6% / 2.5%",
overflow: "hidden",
background: "#000",
}}
>
{resolved ? (
<img
src={resolved}
alt={alt}
style={{ display: "block", width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }}
draggable={false}
/>
) : hideEmpty ? null : (
<EmptySlot />
)}
</div>
</div>
</div>
);
}
export function IPad({ src, alt = "", style, hideEmpty }: FrameProps) {
const resolved = img(src);
return (
<div style={{ position: "relative", aspectRatio: "770 / 1000", ...style }}>
<div
style={{
width: "100%",
height: "100%",
borderRadius: "5% / 3.6%",
background: "linear-gradient(180deg, #2C2C2E 0%, #1C1C1E 100%)",
position: "relative",
overflow: "hidden",
boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1), 0 8px 40px rgba(0,0,0,0.6)",
}}
>
<div
style={{
position: "absolute",
top: "1.2%",
left: "50%",
transform: "translateX(-50%)",
width: "0.9%",
height: "0.65%",
borderRadius: "50%",
background: "#111113",
zIndex: 20,
}}
/>
<div
style={{
position: "absolute",
left: "4%",
top: "2.8%",
width: "92%",
height: "94.4%",
borderRadius: "2.2% / 1.6%",
overflow: "hidden",
background: "#000",
}}
>
{resolved ? (
<img
src={resolved}
alt={alt}
style={{ display: "block", width: "100%", height: "100%", objectFit: "cover", objectPosition: "top" }}
draggable={false}
/>
) : hideEmpty ? null : (
<EmptySlot />
)}
</div>
</div>
</div>
);
}
function EmptySlot() {
return (
<div
style={{
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
color: "rgba(255,255,255,0.4)",
fontSize: "min(2vw, 14px)",
background: "linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%)",
textAlign: "center",
padding: "4%",
}}
>
Drop a screenshot here
</div>
);
}
template/src/components/editor/inspector.tsx
"use client";
import * as React from "react";
import {
AlignCenter,
AlignLeft,
AlignRight,
ArrowDownToLine,
ArrowUpToLine,
ChevronDown,
ChevronUp,
Plus,
RotateCw,
Trash2,
Type,
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Textarea } from "@/components/ui/textarea";
import { LAYOUT_HINT, LAYOUT_LABEL } from "@/lib/constants";
import { nid } from "@/lib/defaults";
import {
isBuiltInElementId,
isTextElementId,
textElementKey,
toTextElementId,
} from "@/lib/elements";
import { pickText, writeLocalized } from "@/lib/locale";
import type {
BuiltInElementId,
Device,
ElementId,
ElementTransform,
Orientation,
Slide,
SlideLayout,
TextElement,
} from "@/lib/types";
import { ScreenshotPicker } from "./screenshot-picker";
import { getCanvas, getElementTransform } from "./slide-canvas";
type Props = {
slide: Slide;
device: Device;
orientation: Orientation;
locale: string;
selectedElementId: ElementId | null;
onChange: (patch: Partial<Slide>) => void;
onSelectElement: (id: ElementId | null) => void;
};
const ELEMENT_LABEL: Record<BuiltInElementId, string> = {
caption: "Headline",
device: "Device",
deviceSecondary: "Back device",
};
export function Inspector({
slide,
device,
orientation,
locale,
selectedElementId,
onChange,
onSelectElement,
}: Props) {
const isFeatureGraphic = device === "feature-graphic" || slide.layout === "feature-graphic";
const isNoDevice = slide.layout === "no-device";
const layoutValue = device === "feature-graphic" ? "feature-graphic" : slide.layout;
const layoutOptions = Object.entries(LAYOUT_LABEL).filter(([layout]) =>
device === "feature-graphic" ? layout === "feature-graphic" : layout !== "feature-graphic",
);
const localeLabel = slide.label?.[locale] ?? "";
const localeHeadline = slide.headline?.[locale] ?? "";
// When the active locale is empty, surface the fallback (typically en) as
// the placeholder so the user sees what they're translating from.
const headlineDefault = isFeatureGraphic ? "Your tagline." : "One idea\nper slide.";
const labelPlaceholder = localeLabel ? "FEATURE 01" : pickText(slide.label, locale) || "FEATURE 01";
const headlinePlaceholder = localeHeadline
? headlineDefault
: pickText(slide.headline, locale) || headlineDefault;
function setLocaleField(key: "label" | "headline", value: string) {
onChange({ [key]: writeLocalized(slide[key], locale, value) } as Partial<Slide>);
}
React.useEffect(() => {
if (device === "feature-graphic" && slide.layout !== "feature-graphic") {
onChange({ layout: "feature-graphic", transforms: undefined, screenshotSecondary: undefined });
}
}, [device, onChange, slide.layout]);
return (
<div className="flex h-full flex-col">
<div className="border-b p-3">
<div className="flex items-baseline justify-between gap-2">
<h2 className="text-sm font-semibold">Screen settings</h2>
<span className="text-[10px] uppercase tracking-wide text-muted-foreground">
editing · {locale.toUpperCase()}
</span>
</div>
<p className="text-xs text-muted-foreground">{LAYOUT_HINT[layoutValue]}</p>
</div>
<div className="flex-1 space-y-4 overflow-y-auto p-3">
<div className="space-y-1.5">
<Label className="text-xs">Layout</Label>
<Select
value={layoutValue}
onValueChange={(layout) => {
const next = layout as SlideLayout;
onChange({
layout: next,
transforms: undefined,
screenshotSecondary:
next === "two-devices" ? slide.screenshotSecondary || slide.screenshot : undefined,
});
}}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{layoutOptions.map(([layout, label]) => (
<SelectItem key={layout} value={layout}>
{label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
{!isFeatureGraphic && (
<div className="space-y-1.5">
<Label className="text-xs">Label</Label>
<Input
value={localeLabel}
onChange={(e) => setLocaleField("label", e.target.value)}
placeholder={labelPlaceholder}
/>
</div>
)}
<div className="space-y-1.5">
<div className="flex items-baseline justify-between">
<Label className="text-xs">{isFeatureGraphic ? "Tagline" : "Headline"}</Label>
<span className="text-[10px] text-muted-foreground">newline = break</span>
</div>
<Textarea
value={localeHeadline}
onChange={(e) => setLocaleField("headline", e.target.value)}
rows={3}
placeholder={headlinePlaceholder}
/>
</div>
{!isFeatureGraphic && !isNoDevice && (
<div className="space-y-1.5">
<Label className="text-xs">
{slide.layout === "two-devices" ? "Front device screenshot" : "Screenshot"}
</Label>
<ScreenshotPicker
label="Primary"
value={slide.screenshot}
locale={locale}
onChange={(v) => onChange({ screenshot: v })}
/>
</div>
)}
{slide.layout === "two-devices" && (
<div className="space-y-1.5">
<Label className="text-xs">Back device screenshot</Label>
<ScreenshotPicker
label="Secondary (back layer)"
value={slide.screenshotSecondary || ""}
locale={locale}
onChange={(v) => onChange({ screenshotSecondary: v })}
/>
</div>
)}
{!isFeatureGraphic && (
<ElementTransformControls
slide={slide}
device={device}
orientation={orientation}
locale={locale}
selectedElementId={selectedElementId}
onChange={onChange}
onSelectElement={onSelectElement}
/>
)}
{isFeatureGraphic && (
<p className="rounded-md border bg-muted/40 p-3 text-[11px] leading-relaxed text-muted-foreground">
Shows app icon + name + tagline. Drop an icon at <span className="rounded bg-background px-1 py-0.5 font-mono text-[10px] text-foreground">/public/app-icon.png</span> (or leave blank — the app initial will be used). Name is set in the toolbar.
</p>
)}
</div>
</div>
);
}
function ElementTransformControls({
slide,
device,
orientation,
locale,
selectedElementId,
onChange,
onSelectElement,
}: {
slide: Slide;
device: Device;
orientation: Orientation;
locale: string;
selectedElementId: ElementId | null;
onChange: (patch: Partial<Slide>) => void;
onSelectElement: (id: ElementId | null) => void;
}) {
const present: ElementId[] = ["caption"];
if (slide.layout !== "no-device") present.push("device");
if (slide.layout === "two-devices") present.push("deviceSecondary");
for (const element of slide.textElements || []) present.push(toTextElementId(element.id));
const transforms = slide.transforms || {};
const activeId =
selectedElementId && present.includes(selectedElementId) ? selectedElementId : null;
const activeTransform = activeId
? getElementTransform(slide, device, orientation, activeId)
: undefined;
const activeTextElement =
activeId && isTextElementId(activeId)
? slide.textElements?.find((element) => element.id === textElementKey(activeId))
: null;
function getTransform(id: ElementId) {
return getElementTransform(slide, device, orientation, id);
}
function patchElement(id: ElementId, patch: Partial<ElementTransform>) {
const cur = getTransform(id);
if (!cur) return;
if (isTextElementId(id)) {
const textId = textElementKey(id);
onChange({
textElements: (slide.textElements || []).map((element) =>
element.id === textId
? { ...element, transform: { ...element.transform, ...patch } }
: element,
),
});
return;
}
if (!isBuiltInElementId(id)) return;
onChange({
transforms: { ...transforms, [id]: { ...cur, ...patch } },
});
}
function patchTextElement(id: string, patch: Partial<TextElement>) {
onChange({
textElements: (slide.textElements || []).map((element) =>
element.id === id ? { ...element, ...patch } : element,
),
});
}
function setTextElementValue(element: TextElement, value: string) {
patchTextElement(element.id, { text: writeLocalized(element.text, locale, value) });
}
function deleteTextElement(element: TextElement) {
const nextTextElements = (slide.textElements || []).filter((item) => item.id !== element.id);
onChange({
textElements: nextTextElements.length > 0 ? nextTextElements : undefined,
});
onSelectElement(null);
}
function addTextElement() {
const { cW, cH } = getCanvas(device, orientation);
const id = nid();
const zIndex =
Math.max(
5,
...present.map((elementId) => getTransform(elementId)?.zIndex ?? defaultZ(elementId)),
) + 1;
const element: TextElement = {
id,
text: writeLocalized({}, locale, "New text"),
transform: {
x: cW * 0.18,
y: cH * 0.42,
width: cW * 0.64,
height: cH * 0.12,
rotation: 0,
zIndex,
},
fontSize: Math.round(Math.min(cW, cH) * 0.065),
fontWeight: 800,
align: "center",
};
onChange({ textElements: [...(slide.textElements || []), element] });
onSelectElement(toTextElementId(id));
}
// Z-order: re-rank zIndex among present elements so they remain contiguous.
function reorder(id: ElementId, dir: "front" | "back" | "up" | "down") {
const ranked = [...present].sort((a, b) => {
const za = getTransform(a)?.zIndex ?? defaultZ(a);
const zb = getTransform(b)?.zIndex ?? defaultZ(b);
return za - zb;
});
const idx = ranked.indexOf(id);
if (idx === -1) return;
let target = idx;
if (dir === "front") target = ranked.length - 1;
else if (dir === "back") target = 0;
else if (dir === "up") target = Math.min(ranked.length - 1, idx + 1);
else if (dir === "down") target = Math.max(0, idx - 1);
if (target === idx) return;
ranked.splice(idx, 1);
ranked.splice(target, 0, id);
const nextTransforms = { ...transforms };
const nextTextElements = (slide.textElements || []).map((element) => ({
...element,
transform: { ...element.transform },
}));
ranked.forEach((eid, i) => {
const cur = getTransform(eid);
if (!cur) return;
if (isTextElementId(eid)) {
const textId = textElementKey(eid);
const textElement = nextTextElements.find((element) => element.id === textId);
if (textElement) textElement.transform = { ...textElement.transform, zIndex: i + 1 };
} else if (isBuiltInElementId(eid)) {
nextTransforms[eid] = { ...cur, zIndex: i + 1 };
}
});
onChange({ transforms: nextTransforms, textElements: nextTextElements });
}
return (
<div className="space-y-3 rounded-md border bg-muted/30 p-3">
<div className="flex items-start justify-between gap-2">
<div>
<Label className="text-xs font-semibold">Elements</Label>
<p className="text-[11px] text-muted-foreground">
{activeId
? "Fine-tune the selected element's rotation and stacking."
: "Click an element on the canvas to fine-tune its rotation and stacking."}
</p>
</div>
<Button
type="button"
variant="outline"
size="sm"
className="h-7 shrink-0 px-2 text-xs"
onClick={addTextElement}
>
<Plus className="h-3.5 w-3.5" />
Text
</Button>
</div>
{activeId ? (
<ActiveElementPanel
activeId={activeId}
transform={activeTransform}
textElement={activeTextElement || undefined}
locale={locale}
onRotate={(rotation) => patchElement(activeId, { rotation })}
onReorder={(dir) => reorder(activeId, dir)}
onTextChange={(value) => {
if (activeTextElement) setTextElementValue(activeTextElement, value);
}}
onTextPatch={(patch) => {
if (activeTextElement) patchTextElement(activeTextElement.id, patch);
}}
onDeleteText={() => {
if (activeTextElement) deleteTextElement(activeTextElement);
}}
/>
) : (
<div className="rounded border border-dashed bg-background/40 p-4 text-center text-[11px] text-muted-foreground">
No element selected
</div>
)}
</div>
);
}
function ActiveElementPanel({
activeId,
transform,
textElement,
locale,
onRotate,
onReorder,
onTextChange,
onTextPatch,
onDeleteText,
}: {
activeId: ElementId;
transform: ElementTransform | undefined;
textElement?: TextElement;
locale: string;
onRotate: (rotation: number) => void;
onReorder: (dir: "front" | "back" | "up" | "down") => void;
onTextChange: (value: string) => void;
onTextPatch: (patch: Partial<TextElement>) => void;
onDeleteText: () => void;
}) {
const engaged = !!transform;
const rotation = transform?.rotation ?? 0;
const label = elementLabel(activeId);
return (
<div className="space-y-2 rounded border bg-background/60 p-2.5">
<div className="flex items-center justify-between">
<span className="flex items-center gap-1 text-xs font-medium">
{textElement && <Type className="h-3.5 w-3.5" />}
{label}
</span>
{textElement ? (
<Button
type="button"
variant="ghost"
size="icon"
className="h-6 w-6 hover:text-destructive"
onClick={onDeleteText}
title="Delete text element"
aria-label="Delete text element"
>
<Trash2 className="h-3.5 w-3.5" />
</Button>
) : !engaged ? (
<span className="text-[10px] text-muted-foreground">drag to enable</span>
) : null}
</div>
{textElement && (
<TextElementPanel
element={textElement}
locale={locale}
onTextChange={onTextChange}
onTextPatch={onTextPatch}
/>
)}
<div className="space-y-1">
<div className="flex items-center justify-between">
<Label className="flex items-center gap-1 text-[11px] text-muted-foreground">
<RotateCw className="h-3 w-3" /> Rotation
</Label>
<span className="text-[11px] tabular-nums text-muted-foreground">
{rotation}°
</span>
</div>
<input
type="range"
min={-180}
max={180}
step={1}
value={rotation}
disabled={!engaged}
onChange={(e) => onRotate(Number(e.target.value))}
className="w-full disabled:opacity-50"
aria-label={`${label} rotation`}
/>
</div>
<div className="space-y-1">
<Label className="text-[11px] text-muted-foreground">Layer</Label>
<div className="grid grid-cols-4 gap-1">
<LayerButton disabled={!engaged} onClick={() => onReorder("back")} label="Send to back">
<ArrowDownToLine className="h-3.5 w-3.5" />
</LayerButton>
<LayerButton disabled={!engaged} onClick={() => onReorder("down")} label="Send backward">
<ChevronDown className="h-3.5 w-3.5" />
</LayerButton>
<LayerButton disabled={!engaged} onClick={() => onReorder("up")} label="Bring forward">
<ChevronUp className="h-3.5 w-3.5" />
</LayerButton>
<LayerButton disabled={!engaged} onClick={() => onReorder("front")} label="Bring to front">
<ArrowUpToLine className="h-3.5 w-3.5" />
</LayerButton>
</div>
</div>
</div>
);
}
function TextElementPanel({
element,
locale,
onTextChange,
onTextPatch,
}: {
element: TextElement;
locale: string;
onTextChange: (value: string) => void;
onTextPatch: (patch: Partial<TextElement>) => void;
}) {
const text = element.text?.[locale] ?? pickText(element.text, locale);
return (
<div className="space-y-2 rounded border bg-muted/30 p-2">
<div className="space-y-1">
<Label className="text-[11px] text-muted-foreground">Text</Label>
<Textarea
value={text}
rows={2}
onChange={(event) => onTextChange(event.target.value)}
placeholder="Overlay text"
/>
</div>
<div className="grid grid-cols-[1fr_76px] gap-2">
<div className="space-y-1">
<Label className="text-[11px] text-muted-foreground">Size</Label>
<Input
type="number"
min={12}
max={400}
value={Math.round(element.fontSize || 72)}
onChange={(event) => onTextPatch({ fontSize: Number(event.target.value) || 72 })}
/>
</div>
<div className="space-y-1">
<Label className="text-[11px] text-muted-foreground">Color</Label>
<Input
type="color"
value={element.color || "#171717"}
className="h-9 p-1"
onChange={(event) => onTextPatch({ color: event.target.value })}
/>
</div>
</div>
<div className="grid grid-cols-3 gap-1">
<LayerButton
disabled={false}
onClick={() => onTextPatch({ align: "left" })}
label="Align left"
>
<AlignLeft className="h-3.5 w-3.5" />
</LayerButton>
<LayerButton
disabled={false}
onClick={() => onTextPatch({ align: "center" })}
label="Align center"
>
<AlignCenter className="h-3.5 w-3.5" />
</LayerButton>
<LayerButton
disabled={false}
onClick={() => onTextPatch({ align: "right" })}
label="Align right"
>
<AlignRight className="h-3.5 w-3.5" />
</LayerButton>
</div>
</div>
);
}
function LayerButton({
disabled,
onClick,
label,
children,
}: {
disabled: boolean;
onClick: () => void;
label: string;
children: React.ReactNode;
}) {
return (
<Button
type="button"
variant="outline"
size="sm"
className="h-7 px-0"
disabled={disabled}
onClick={onClick}
title={label}
aria-label={label}
>
{children}
</Button>
);
}
function elementLabel(id: ElementId): string {
if (isBuiltInElementId(id)) return ELEMENT_LABEL[id];
return "Text";
}
function defaultZ(id: ElementId): number {
if (isTextElementId(id)) return 5;
if (id === "deviceSecondary") return 2;
if (id === "device") return 3;
return 4; // caption on top
}
template/src/components/editor/preview-stage.tsx
"use client";
import * as React from "react";
import { Maximize2, ZoomIn, ZoomOut } from "lucide-react";
import { Button } from "@/components/ui/button";
import { DEVICE_LABEL, LAYOUT_LABEL } from "@/lib/constants";
import type {
Device,
ElementId,
ElementTransform,
Orientation,
SelectedElement,
Slide,
Theme,
} from "@/lib/types";
import { DeckCanvas, getCanvas } from "./slide-canvas";
type Props = {
slides: Slide[];
activeSlideId: string | null;
device: Device;
orientation: Orientation;
theme: Theme;
locale: string;
appName?: string;
appIcon?: string;
connectedCanvas: boolean;
selectedElement: SelectedElement | null;
onActiveSlideChange: (id: string) => void;
onLabelChange: (slide: Slide, v: string) => void;
onHeadlineChange: (slide: Slide, v: string) => void;
onTextElementTextChange: (slideId: string, id: string, v: string) => void;
onElementChange: (slideId: string, id: ElementId, t: ElementTransform) => void;
onSelectElement: (element: SelectedElement | null) => void;
};
// Fits one full-resolution screen inside the viewport while keeping the whole
// deck horizontally scrollable as one connected canvas.
export function PreviewStage({
slides,
activeSlideId,
device,
orientation,
theme,
locale,
appName,
appIcon,
connectedCanvas,
selectedElement,
onActiveSlideChange,
onLabelChange,
onHeadlineChange,
onTextElementTextChange,
onElementChange,
onSelectElement,
}: Props) {
const containerRef = React.useRef<HTMLDivElement>(null);
const scrollerRef = React.useRef<HTMLDivElement>(null);
const suppressNextActiveScreenPanRef = React.useRef(false);
const [fitScale, setFitScale] = React.useState(0.2);
const [zoom, setZoom] = React.useState(1);
const { cW, cH } = getCanvas(device, orientation);
const totalW = Math.max(1, slides.length) * cW;
const scale = fitScale * zoom;
const activeIndex = Math.max(0, slides.findIndex((slide) => slide.id === activeSlideId));
const activeSlide = slides[activeIndex] || slides[0] || null;
React.useEffect(() => {
const el = containerRef.current;
if (!el) return;
const update = () => {
const rect = el.getBoundingClientRect();
const sx = (rect.width - 96) / cW;
const sy = (rect.height - 96) / cH;
setFitScale(Math.max(0.05, Math.min(sx, sy)));
};
update();
const ro = new ResizeObserver(update);
ro.observe(el);
return () => ro.disconnect();
}, [cW, cH]);
React.useEffect(() => {
setZoom(1);
}, [device, orientation]);
React.useEffect(() => {
if (suppressNextActiveScreenPanRef.current) {
suppressNextActiveScreenPanRef.current = false;
return;
}
const scroller = scrollerRef.current;
if (!scroller || !activeSlide) return;
const screenLeft = activeIndex * cW * scale;
const screenWidth = cW * scale;
const targetLeft = Math.max(0, screenLeft - (scroller.clientWidth - screenWidth) / 2);
scroller.scrollTo({ left: targetLeft, behavior: "smooth" });
}, [activeIndex, activeSlide, cW, scale]);
const handleCanvasActiveSlideChange = React.useCallback(
(id: string) => {
if (id !== activeSlideId) {
suppressNextActiveScreenPanRef.current = true;
}
onActiveSlideChange(id);
},
[activeSlideId, onActiveSlideChange],
);
return (
<div
ref={containerRef}
className="relative h-full w-full overflow-hidden bg-[radial-gradient(70%_70%_at_50%_35%,_hsl(var(--background))_0%,_hsl(var(--muted))_100%)]"
>
<div ref={scrollerRef} className="h-full w-full overflow-auto p-12">
<div
style={{
width: totalW * scale,
height: cH * scale,
position: "relative",
flexShrink: 0,
filter: "drop-shadow(0 32px 42px rgba(15, 23, 42, 0.18))",
}}
>
<div
style={{
width: totalW,
height: cH,
transform: `scale(${scale})`,
transformOrigin: "top left",
}}
>
<DeckCanvas
slides={slides}
device={device}
orientation={orientation}
theme={theme}
locale={locale}
appName={appName}
appIcon={appIcon}
connectedCanvas={connectedCanvas}
editable
previewScale={scale}
selectedElement={selectedElement}
activeSlideId={activeSlide?.id || null}
showGuides
edit={{
onLabelChange: (slideId, value) => {
const slide = slides.find((s) => s.id === slideId);
if (slide) onLabelChange(slide, value);
},
onHeadlineChange: (slideId, value) => {
const slide = slides.find((s) => s.id === slideId);
if (slide) onHeadlineChange(slide, value);
},
onTextElementTextChange,
onElementChange,
onSelectElement,
onSelectScreen: handleCanvasActiveSlideChange,
}}
/>
</div>
</div>
</div>
<div className="pointer-events-none absolute left-4 top-4 flex items-center gap-1.5 rounded-md bg-background/80 px-2 py-1 text-[11px] text-muted-foreground shadow-sm backdrop-blur">
<span className="font-medium text-foreground">{DEVICE_LABEL[device]}</span>
{activeSlide && (
<>
<span aria-hidden>·</span>
<span>Screen {activeIndex + 1}</span>
<span aria-hidden>·</span>
<span>{LAYOUT_LABEL[activeSlide.layout]}</span>
</>
)}
{orientation === "landscape" && (
<>
<span aria-hidden>·</span>
<span>landscape</span>
</>
)}
{!connectedCanvas && (
<>
<span aria-hidden>·</span>
<span>isolated</span>
</>
)}
</div>
<div className="absolute bottom-4 right-4 flex items-center gap-1.5 rounded-md bg-background/85 px-1.5 py-1 text-[10px] tabular-nums text-muted-foreground shadow-sm backdrop-blur">
<span className="px-1">{slides.length}× {cW}×{cH}</span>
<span aria-hidden className="text-border">|</span>
<Button
type="button"
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => setZoom((value) => Math.max(0.25, Number((value - 0.1).toFixed(2))))}
disabled={zoom <= 0.25}
title="Zoom out"
aria-label="Zoom out"
>
<ZoomOut className="h-3.5 w-3.5" />
</Button>
<span className="min-w-10 text-center">{(scale * 100).toFixed(0)}%</span>
<Button
type="button"
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => setZoom((value) => Math.min(2, Number((value + 0.1).toFixed(2))))}
disabled={zoom >= 2}
title="Zoom in"
aria-label="Zoom in"
>
<ZoomIn className="h-3.5 w-3.5" />
</Button>
<Button
type="button"
variant="ghost"
size="icon"
className="h-6 w-6"
onClick={() => setZoom(1)}
title="Fit active screen"
aria-label="Fit active screen"
>
<Maximize2 className="h-3.5 w-3.5" />
</Button>
</div>
</div>
);
}
template/src/components/editor/screenshot-editor.tsx
"use client";
import * as React from "react";
import JSZip from "jszip";
import { toPng } from "html-to-image";
import { Toaster, toast } from "sonner";
import {
getExportSizes,
hasTheme,
supportsLandscape,
themeById,
} from "@/lib/constants";
import { detectPlatform, nid } from "@/lib/defaults";
import { isBuiltInElementId, isTextElementId, textElementKey } from "@/lib/elements";
import { preloadImages } from "@/lib/image-cache";
import { resolveScreenshot, writeLocalized } from "@/lib/locale";
import { useProject } from "@/lib/storage";
import type {
BuiltInElementId,
Device,
ElementId,
ElementTransform,
SelectedElement,
Slide,
} from "@/lib/types";
import { Inspector } from "./inspector";
import { PreviewStage } from "./preview-stage";
import { Sidebar } from "./sidebar";
import { DeckCanvas, getCanvas } from "./slide-canvas";
import { Toolbar } from "./toolbar";
export function ScreenshotEditor() {
const { state, setState, hydrated, savedAt, saveError, reset, resetDevice, undo, redo } = useProject();
const [activeSlideId, setActiveSlideId] = React.useState<string | null>(null);
const [selectedElement, setSelectedElement] = React.useState<SelectedElement | null>(null);
const [exporting, setExporting] = React.useState<string | null>(null);
const [ready, setReady] = React.useState(false);
const [exportLocaleOverride, setExportLocaleOverride] = React.useState<string | null>(null);
const [exportSlideIndex, setExportSlideIndex] = React.useState(0);
const exportRef = React.useRef<HTMLDivElement | null>(null);
const currentSlides = state.slidesByDevice[state.device] || [];
const activeSlide =
currentSlides.find((s) => s.id === activeSlideId) || currentSlides[0] || null;
const theme = themeById(state.themeId);
React.useEffect(() => {
if (selectedElement && selectedElement.slideId !== activeSlide?.id) {
setSelectedElement(null);
}
}, [activeSlide?.id, selectedElement]);
React.useEffect(() => {
if (!hydrated) return;
if (!activeSlide && currentSlides.length > 0) {
setActiveSlideId(currentSlides[0].id);
}
}, [hydrated, currentSlides, activeSlide]);
React.useEffect(() => {
if (!supportsLandscape(state.device) && state.orientation !== "portrait") {
setState((p) => ({ ...p, orientation: "portrait" }));
}
}, [state.device, state.orientation, setState]);
React.useEffect(() => {
if (hydrated && state.themeId && !hasTheme(state.themeId)) {
toast.warning("Using fallback theme", {
description: `Theme "${state.themeId}" is not defined in src/lib/constants.ts.`,
duration: 8000,
});
}
}, [hydrated, state.themeId]);
const assetPaths = React.useMemo(() => {
const paths = new Set<string>();
paths.add("/mockup.png");
if (state.appIcon) paths.add(state.appIcon);
// Preload every locale variant so bulk export doesn't race image loads.
const allSlides: Slide[] = Object.values(state.slidesByDevice).flat();
for (const s of allSlides) {
for (const raw of [s.screenshot, s.screenshotSecondary]) {
if (!raw || raw.startsWith("data:")) continue;
if (raw.includes("{locale}")) {
for (const loc of state.locales) paths.add(resolveScreenshot(raw, loc));
} else {
paths.add(raw);
}
}
}
return Array.from(paths).sort();
}, [state.slidesByDevice, state.appIcon, state.locales]);
const assetSig = assetPaths.join("|");
React.useEffect(() => {
if (!hydrated) return;
preloadImages(assetPaths).finally(() => setReady(true));
// assetPaths is derived from assetSig; depending on the string keeps the
// effect from re-firing when slidesByDevice churns without path changes.
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [hydrated, assetSig]);
// Surface storage failures (quota exceeded etc.) so the user knows their work isn't safe.
React.useEffect(() => {
if (saveError) {
toast.error("Couldn't load or save project file", {
description: saveError,
duration: 8000,
});
}
}, [saveError]);
// ---------- Mutations ----------
const patchSlide = React.useCallback(
(id: string, patch: Partial<Slide>) => {
setState((prev) => ({
...prev,
slidesByDevice: {
...prev.slidesByDevice,
[prev.device]: (prev.slidesByDevice[prev.device] || []).map((s) =>
s.id === id ? { ...s, ...patch } : s,
),
},
}));
},
[setState],
);
const reorderSlides = React.useCallback(
(next: Slide[]) => {
setState((prev) => ({
...prev,
slidesByDevice: { ...prev.slidesByDevice, [prev.device]: next },
}));
},
[setState],
);
const deleteSlide = React.useCallback(
(id: string) => {
const dev = state.device;
const slides = state.slidesByDevice[dev] || [];
const idx = slides.findIndex((s) => s.id === id);
if (idx === -1) return;
const snap = slides[idx];
const fallback = slides[idx + 1] || slides[idx - 1] || null;
setState((prev) => {
const cur = prev.slidesByDevice[dev] || [];
return {
...prev,
slidesByDevice: { ...prev.slidesByDevice, [dev]: cur.filter((s) => s.id !== id) },
};
});
setActiveSlideId((cur) => (cur === id ? fallback?.id || null : cur));
toast("Screen deleted", {
action: {
label: "Undo",
onClick: () => {
setState((prev) => {
const cur = prev.slidesByDevice[dev] || [];
if (cur.some((s) => s.id === snap.id)) return prev;
const restored = [...cur.slice(0, idx), snap, ...cur.slice(idx)];
return {
...prev,
slidesByDevice: { ...prev.slidesByDevice, [dev]: restored },
};
});
setActiveSlideId(snap.id);
},
},
duration: 6000,
});
},
[setState, state.device, state.slidesByDevice],
);
const addSlide = React.useCallback(
(slide: Slide) => {
setState((prev) => ({
...prev,
slidesByDevice: {
...prev.slidesByDevice,
[prev.device]: [...(prev.slidesByDevice[prev.device] || []), slide],
},
}));
setActiveSlideId(slide.id);
},
[setState],
);
const patchLocalized = React.useCallback(
(slide: Slide, key: "label" | "headline", value: string) => {
patchSlide(slide.id, {
[key]: writeLocalized(slide[key], state.locale, value),
} as Partial<Slide>);
},
[patchSlide, state.locale],
);
const patchElementTransform = React.useCallback(
(slideId: string, elementId: ElementId, transform: ElementTransform) => {
setState((prev) => ({
...prev,
slidesByDevice: {
...prev.slidesByDevice,
[prev.device]: (prev.slidesByDevice[prev.device] || []).map((slide) => {
if (slide.id !== slideId) return slide;
if (isTextElementId(elementId)) {
const textId = textElementKey(elementId);
return {
...slide,
textElements: (slide.textElements || []).map((element) =>
element.id === textId ? { ...element, transform } : element,
),
};
}
if (!isBuiltInElementId(elementId)) return slide;
return {
...slide,
transforms: {
...(slide.transforms || {}),
[elementId]: transform,
} as Partial<Record<BuiltInElementId, ElementTransform>>,
};
}),
},
}));
},
[setState],
);
const patchTextElementText = React.useCallback(
(slideId: string, textId: string, value: string) => {
setState((prev) => ({
...prev,
slidesByDevice: {
...prev.slidesByDevice,
[prev.device]: (prev.slidesByDevice[prev.device] || []).map((slide) =>
slide.id === slideId
? {
...slide,
textElements: (slide.textElements || []).map((element) =>
element.id === textId
? { ...element, text: writeLocalized(element.text, prev.locale, value) }
: element,
),
}
: slide,
),
},
}));
},
[setState],
);
const duplicateSlide = React.useCallback(
(id: string) => {
let newId: string | null = null;
setState((prev) => {
const slides = prev.slidesByDevice[prev.device] || [];
const idx = slides.findIndex((s) => s.id === id);
if (idx === -1) return prev;
const src = slides[idx];
newId = nid();
const copy: Slide = {
...src,
id: newId,
label: { ...src.label },
headline: { ...src.headline },
transforms: src.transforms
? Object.fromEntries(
Object.entries(src.transforms).map(([key, value]) => [key, { ...value }]),
)
: undefined,
textElements: src.textElements?.map((element) => ({
...element,
id: nid(),
text: { ...element.text },
transform: { ...element.transform },
})),
};
const next = [...slides.slice(0, idx + 1), copy, ...slides.slice(idx + 1)];
return {
...prev,
slidesByDevice: { ...prev.slidesByDevice, [prev.device]: next },
};
});
if (newId) setActiveSlideId(newId);
},
[setState],
);
// ---------- Keyboard shortcuts ----------
React.useEffect(() => {
function onKey(e: KeyboardEvent) {
const target = e.target as HTMLElement | null;
const inEditable =
target &&
(target.tagName === "INPUT" ||
target.tagName === "TEXTAREA" ||
(target as HTMLElement).isContentEditable);
if (exporting) return;
if (e.key === "Escape") {
setSelectedElement(null);
if (target && "blur" in target && typeof target.blur === "function") target.blur();
return;
}
// Let focused inputs and contenteditable text keep their native undo,
// redo, selection, and deletion behavior.
if (inEditable) return;
if ((e.metaKey || e.ctrlKey) && (e.key === "z" || e.key === "Z")) {
e.preventDefault();
if (e.shiftKey) redo();
else undo();
return;
}
if ((e.metaKey || e.ctrlKey) && (e.key === "y" || e.key === "Y")) {
e.preventDefault();
redo();
return;
}
if (!currentSlides.length) return;
const idx = activeSlide ? currentSlides.findIndex((s) => s.id === activeSlide.id) : -1;
if (e.key === "ArrowDown" || (e.key === "j" && !e.metaKey && !e.ctrlKey)) {
e.preventDefault();
const next = currentSlides[Math.min(currentSlides.length - 1, idx + 1)];
if (next) setActiveSlideId(next.id);
} else if (e.key === "ArrowUp" || (e.key === "k" && !e.metaKey && !e.ctrlKey)) {
e.preventDefault();
const next = currentSlides[Math.max(0, idx - 1)];
if (next) setActiveSlideId(next.id);
} else if ((e.key === "d" || e.key === "D") && (e.metaKey || e.ctrlKey)) {
if (activeSlide) {
e.preventDefault();
duplicateSlide(activeSlide.id);
}
} else if ((e.key === "Backspace" || e.key === "Delete") && (e.metaKey || e.ctrlKey)) {
if (activeSlide) {
e.preventDefault();
deleteSlide(activeSlide.id);
}
}
}
window.addEventListener("keydown", onKey);
return () => window.removeEventListener("keydown", onKey);
}, [activeSlide, currentSlides, duplicateSlide, deleteSlide, exporting, undo, redo]);
// ---------- Export ----------
// Wait two animation frames so React's render → browser layout/paint of the
// off-screen container settles before html-to-image snapshots it. One frame
// is occasionally not enough on slower machines.
const waitForPaint = () =>
new Promise<void>((resolve) => {
requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
});
async function exportAll() {
if (!currentSlides.length) {
toast.error("No screens to export");
return;
}
const sizes = getExportSizes(state.device, state.orientation);
if (!sizes.length) {
toast.error("Nothing to export");
return;
}
const locales = state.locales;
await preloadImages(assetPaths, { retryFailed: true });
await waitForPaint();
const missingScreens = currentSlides
.map((slide, index) => ({ slide, index }))
.filter(({ slide }) => slideNeedsScreenshot(state.device, slide) && !slide.screenshot);
const reusedBackScreens = currentSlides
.map((slide, index) => ({ slide, index }))
.filter(
({ slide }) =>
state.device !== "feature-graphic" &&
slide.layout === "two-devices" &&
slide.screenshot &&
!slide.screenshotSecondary,
);
if (missingScreens.length > 0 || reusedBackScreens.length > 0) {
const details = [
missingScreens.length
? `${missingScreens.length} screen${missingScreens.length === 1 ? "" : "s"} will export with an empty device.`
: null,
reusedBackScreens.length
? `${reusedBackScreens.length} two-device screen${reusedBackScreens.length === 1 ? "" : "s"} will reuse the primary screenshot in back.`
: null,
].filter(Boolean);
toast.warning("Export includes placeholder screenshots", {
description: details.join(" "),
duration: 7000,
});
}
// Make sure custom fonts are loaded before snapshot so typography in PNG
// matches what's on screen.
if (typeof document !== "undefined" && document.fonts && document.fonts.ready) {
try {
await document.fonts.ready;
} catch {
/* ignore */
}
}
const { cW, cH } = getCanvas(state.device, state.orientation);
const platform = detectPlatform(state.device);
const zip = new JSZip();
const totalUnits = sizes.length * locales.length * currentSlides.length;
let unit = 0;
let okCount = 0;
let failed = 0;
const errors: string[] = [];
for (const locale of locales) {
setExportLocaleOverride(locale);
await waitForPaint();
for (const size of sizes) {
for (let i = 0; i < currentSlides.length; i++) {
const slide = currentSlides[i];
unit += 1;
setExporting(`${unit}/${totalUnits}`);
setExportSlideIndex(i);
await waitForPaint();
const el = exportRef.current;
if (!el) {
failed += 1;
errors.push(`${locale} ${size.w}×${size.h} screen ${i + 1}: render target missing`);
continue;
}
try {
const dataUrl = await captureSlide(el, cW, cH, size.w, size.h);
const base64 = dataUrl.split(",")[1] || "";
const filename = `${String(i + 1).padStart(2, "0")}-${slide.layout}.png`;
const path = `${platform}/${state.device}/${size.w}x${size.h}/${locale}/${filename}`;
zip.file(path, base64, { base64: true });
okCount += 1;
} catch (e) {
failed += 1;
const msg = e instanceof Error ? e.message : String(e);
errors.push(`${locale} ${size.w}×${size.h} screen ${i + 1}: ${msg}`);
console.error("Export failed", { slideId: slide.id, locale, size }, e);
}
}
}
}
setExportLocaleOverride(null);
setExporting(null);
if (okCount > 0) {
try {
const blob = await zip.generateAsync({ type: "blob" });
const url = URL.createObjectURL(blob);
const a = document.createElement("a");
a.href = url;
a.download = `${slugify(state.appName)}-${platform}-${state.device}-${stamp()}.zip`;
a.click();
setTimeout(() => URL.revokeObjectURL(url), 5000);
} catch (e) {
toast.error("Couldn't bundle export");
console.error(e);
return;
}
}
const summary = `${locales.length} locale${locales.length === 1 ? "" : "s"} × ${sizes.length} size${sizes.length === 1 ? "" : "s"}`;
if (failed === 0) {
toast.success(`Exported ${okCount} PNGs (${summary})`);
} else if (okCount === 0) {
toast.error(`All ${failed} renders failed`, {
description: errors.slice(0, 3).join("\n"),
});
} else {
toast.error(`${failed} of ${totalUnits} renders failed`, {
description: errors.slice(0, 3).join("\n"),
});
}
}
async function captureSlide(
el: HTMLElement,
sourceW: number,
sourceH: number,
exportW: number,
exportH: number,
) {
// html-to-image needs the node at (0,0). Let the library scale the source
// canvas into the requested output dimensions; CSS transforms leave
// transparent gutters when export aspect ratios differ by a few pixels.
const prev = {
left: el.style.left,
top: el.style.top,
position: el.style.position,
transform: el.style.transform,
transformOrigin: el.style.transformOrigin,
zIndex: el.style.zIndex,
};
el.style.left = "0px";
el.style.top = "0px";
el.style.position = "absolute";
el.style.transform = "none";
el.style.transformOrigin = "top left";
el.style.zIndex = "-1";
try {
const dataUrl = await toPng(el, {
width: sourceW,
height: sourceH,
canvasWidth: exportW,
canvasHeight: exportH,
pixelRatio: 1,
cacheBust: false,
backgroundColor: "#ffffff",
});
return dataUrl;
} finally {
el.style.left = prev.left || "-99999px";
el.style.top = prev.top || "0px";
el.style.position = prev.position || "absolute";
el.style.transform = prev.transform;
el.style.transformOrigin = prev.transformOrigin;
el.style.zIndex = prev.zIndex;
}
}
// ---------- Render ----------
if (!hydrated || !ready) {
return (
<div className="flex h-screen items-center justify-center">
<div className="flex flex-col items-center gap-2 text-muted-foreground">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-current border-t-transparent" />
<p className="text-sm">Loading editor…</p>
</div>
</div>
);
}
const { cW, cH } = getCanvas(state.device, state.orientation);
const busy = !!exporting;
return (
<div className="flex h-screen flex-col overflow-hidden bg-background">
<Toaster position="top-right" richColors closeButton />
<Toolbar
appName={state.appName}
setAppName={(v) => setState((p) => ({ ...p, appName: v }))}
connectedCanvas={state.connectedCanvas}
setConnectedCanvas={(v) => setState((p) => ({ ...p, connectedCanvas: v }))}
locale={state.locale}
setLocale={(v) => setState((p) => ({ ...p, locale: v }))}
locales={state.locales}
device={state.device}
setDevice={(v) => setState((p) => ({ ...p, device: v }))}
orientation={state.orientation}
setOrientation={(v) => setState((p) => ({ ...p, orientation: v }))}
onExport={exportAll}
onResetAll={() => {
reset();
setActiveSlideId(null);
toast.success("Reset all devices to defaults");
}}
onResetDevice={() => {
resetDevice(state.device);
setActiveSlideId(null);
toast.success(`Reset ${state.device} to defaults`);
}}
exporting={exporting}
savedAt={savedAt}
saveError={saveError}
busy={busy}
/>
<div className="flex flex-1 overflow-hidden md:flex-row flex-col">
<aside className="md:w-72 w-full shrink-0 border-r bg-card md:max-h-none max-h-64 overflow-hidden">
<Sidebar
slides={currentSlides}
activeId={activeSlide?.id || null}
device={state.device}
orientation={state.orientation}
theme={theme}
locale={state.locale}
appName={state.appName}
appIcon={state.appIcon}
connectedCanvas={state.connectedCanvas}
disabled={busy}
onReorder={reorderSlides}
onSelect={setActiveSlideId}
onDelete={deleteSlide}
onDuplicate={duplicateSlide}
onAdd={addSlide}
/>
</aside>
<main className="flex flex-1 items-stretch overflow-hidden min-h-0">
{activeSlide && currentSlides.length > 0 ? (
<PreviewStage
slides={currentSlides}
activeSlideId={activeSlide.id}
device={state.device}
orientation={state.orientation}
theme={theme}
locale={state.locale}
appName={state.appName}
appIcon={state.appIcon}
connectedCanvas={state.connectedCanvas}
selectedElement={selectedElement}
onActiveSlideChange={setActiveSlideId}
onLabelChange={(slide, v) => patchLocalized(slide, "label", v)}
onHeadlineChange={(slide, v) => patchLocalized(slide, "headline", v)}
onTextElementTextChange={patchTextElementText}
onElementChange={patchElementTransform}
onSelectElement={setSelectedElement}
/>
) : (
<div className="flex flex-1 flex-col items-center justify-center gap-2 p-8 text-center text-sm text-muted-foreground">
<p className="font-medium text-foreground">No screen selected</p>
<p>Add a screen on the left to get started.</p>
</div>
)}
</main>
<aside className="md:w-80 w-full shrink-0 border-l bg-card md:max-h-none max-h-96 overflow-hidden">
{activeSlide ? (
<Inspector
slide={activeSlide}
device={state.device}
orientation={state.orientation}
locale={state.locale}
selectedElementId={
selectedElement?.slideId === activeSlide.id ? selectedElement.elementId : null
}
onChange={(patch) => patchSlide(activeSlide.id, patch)}
onSelectElement={(elementId) =>
setSelectedElement(
elementId ? { slideId: activeSlide.id, elementId } : null,
)
}
/>
) : (
<div className="flex h-full flex-col items-center justify-center gap-2 p-6 text-center text-sm text-muted-foreground">
<p className="font-medium text-foreground">Nothing to inspect</p>
<p className="text-xs">Screen settings will appear here once you add or select one.</p>
</div>
)}
</aside>
</div>
{/* Off-screen export container — full-resolution canvases for html-to-image. */}
<div
aria-hidden
style={{
position: "absolute",
left: -99999,
top: 0,
pointerEvents: "none",
}}
>
{currentSlides.length > 0 && (
<div
ref={exportRef}
style={{
width: cW,
height: cH,
overflow: "hidden",
position: "absolute",
left: -99999,
top: 0,
}}
>
<div
style={{
position: "absolute",
left: -exportSlideIndex * cW,
top: 0,
width: cW * currentSlides.length,
height: cH,
}}
>
<DeckCanvas
slides={currentSlides}
device={state.device}
orientation={state.orientation}
theme={theme}
locale={exportLocaleOverride ?? state.locale}
appName={state.appName}
appIcon={state.appIcon}
connectedCanvas={state.connectedCanvas}
hideEmpty
/>
</div>
</div>
)}
</div>
</div>
);
}
function slugify(s: string) {
return (
s
.toLowerCase()
.replace(/[^a-z0-9]+/g, "-")
.replace(/(^-|-$)/g, "") || "screenshots"
);
}
function slideNeedsScreenshot(device: Device, slide: Slide) {
if (device === "feature-graphic") return false;
return slide.layout !== "no-device" && slide.layout !== "feature-graphic";
}
function stamp() {
const d = new Date();
const pad = (n: number) => String(n).padStart(2, "0");
return `${d.getFullYear()}${pad(d.getMonth() + 1)}${pad(d.getDate())}-${pad(d.getHours())}${pad(d.getMinutes())}`;
}
template/src/components/editor/screenshot-picker.tsx
"use client";
import * as React from "react";
import { Image as ImageIcon, Upload, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import { didFail, img, setImage } from "@/lib/image-cache";
import { resolveScreenshot } from "@/lib/locale";
type Props = {
label: string;
value: string;
locale?: string;
onChange: (v: string) => void;
};
const ACCEPTED = ["image/png", "image/jpeg"];
async function fileToDataUrl(file: File): Promise<string> {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result as string);
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
async function uploadDataUrl(dataUrl: string): Promise<string | null> {
try {
const resp = await fetch("/api/upload", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify({ dataUrl }),
});
if (!resp.ok) return null;
const json = (await resp.json()) as { ok: boolean; path?: string };
return json.ok && json.path ? json.path : null;
} catch {
return null;
}
}
export function ScreenshotPicker({ label, value, locale, onChange }: Props) {
const inputRef = React.useRef<HTMLInputElement>(null);
const [dragging, setDragging] = React.useState(false);
const [error, setError] = React.useState<string | null>(null);
const [uploading, setUploading] = React.useState(false);
React.useEffect(() => {
setError(null);
}, [value, locale]);
async function handleFile(file: File) {
setError(null);
if (!ACCEPTED.includes(file.type)) {
setError("Use PNG or JPG (App Store rejects other formats)");
return;
}
if (file.size > 8 * 1024 * 1024) {
setError("Image too large (>8MB)");
return;
}
let dataUrl: string;
try {
dataUrl = await fileToDataUrl(file);
} catch {
setError("Failed to read file");
return;
}
// Try to persist to disk so the screenshot survives a git clone.
// If the upload endpoint is unreachable (e.g. static export), fall back
// to the inline data URI — still works in the current session.
setUploading(true);
const uploadedPath = await uploadDataUrl(dataUrl);
setUploading(false);
if (uploadedPath) {
setImage(uploadedPath, dataUrl);
onChange(uploadedPath);
} else {
setImage(dataUrl, dataUrl);
onChange(dataUrl);
}
}
const hasValue = !!value;
const isData = hasValue && value.startsWith("data:");
const resolvedValue = hasValue && !isData && locale ? resolveScreenshot(value, locale) : value;
const previewSrc = isData ? value : hasValue ? img(resolvedValue) : "";
// Only flag "image not found" when the path is a real URL that we tried and failed.
const knownMissing = hasValue && !isData && didFail(resolvedValue);
const valueLabel = uploading
? "saving…"
: !hasValue
? "drop image, or click Pick"
: isData
? "uploaded image (not on disk)"
: value.replace(/^.*\/(?=[^/]+\/[^/]+$)/, "…/");
return (
<div className="space-y-1">
<div
className={`flex items-center gap-3 rounded-md border p-2 transition-colors ${
dragging ? "border-primary bg-accent ring-2 ring-primary/30" : "border-input"
}`}
onDragOver={(e) => {
e.preventDefault();
if (!dragging) setDragging(true);
}}
onDragLeave={(e) => {
if (e.currentTarget === e.target) setDragging(false);
}}
onDrop={async (e) => {
e.preventDefault();
setDragging(false);
const file = e.dataTransfer.files?.[0];
if (file) await handleFile(file);
}}
>
<div className="flex h-12 w-12 shrink-0 items-center justify-center overflow-hidden rounded-md border bg-muted">
{previewSrc ? (
// eslint-disable-next-line @next/next/no-img-element
<img
src={previewSrc}
alt=""
className="h-full w-full object-cover"
draggable={false}
onError={() => setError("Image failed to load")}
/>
) : (
<ImageIcon className="h-4 w-4 text-muted-foreground" />
)}
</div>
<div className="flex min-w-0 flex-1 flex-col">
<span className="truncate text-xs font-medium">{label}</span>
<span className="truncate text-[10px] text-muted-foreground">
{dragging ? "Drop to upload" : valueLabel}
</span>
</div>
<input
ref={inputRef}
type="file"
accept="image/png,image/jpeg"
className="hidden"
onChange={async (e) => {
const input = e.currentTarget;
const file = input.files?.[0];
if (file) await handleFile(file);
input.value = "";
}}
/>
<Button
type="button"
variant="outline"
size="sm"
className="h-8"
onClick={() => inputRef.current?.click()}
>
<Upload className="h-3.5 w-3.5" />
Pick
</Button>
{hasValue && (
<Button
type="button"
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => {
onChange("");
setError(null);
}}
aria-label="Clear screenshot"
title="Clear"
>
<X className="h-4 w-4" />
</Button>
)}
</div>
{error ? (
<p className="text-[11px] text-destructive">{error}</p>
) : knownMissing ? (
<p className="text-[11px] text-destructive">Image not found at {resolvedValue}</p>
) : null}
</div>
);
}
template/src/components/editor/sidebar.tsx
"use client";
import * as React from "react";
import {
DndContext,
KeyboardSensor,
PointerSensor,
closestCenter,
useSensor,
useSensors,
type DragEndEvent,
} from "@dnd-kit/core";
import {
SortableContext,
arrayMove,
sortableKeyboardCoordinates,
verticalListSortingStrategy,
} from "@dnd-kit/sortable";
import { Plus } from "lucide-react";
import { Button } from "@/components/ui/button";
import type { Device, Orientation, Slide, Theme } from "@/lib/types";
import { newSlide } from "@/lib/defaults";
import { SlideThumb } from "./slide-thumb";
type Props = {
slides: Slide[];
activeId: string | null;
device: Device;
orientation: Orientation;
theme: Theme;
locale: string;
appName?: string;
appIcon?: string;
connectedCanvas: boolean;
disabled?: boolean;
onReorder: (next: Slide[]) => void;
onSelect: (id: string) => void;
onDelete: (id: string) => void;
onDuplicate: (id: string) => void;
onAdd: (slide: Slide) => void;
};
export function Sidebar({
slides,
activeId,
device,
orientation,
theme,
locale,
appName,
appIcon,
connectedCanvas,
disabled,
onReorder,
onSelect,
onDelete,
onDuplicate,
onAdd,
}: Props) {
const sensors = useSensors(
useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
);
const handleDragEnd = (e: DragEndEvent) => {
const { active, over } = e;
if (!over || active.id === over.id) return;
const oldIdx = slides.findIndex((s) => s.id === active.id);
const newIdx = slides.findIndex((s) => s.id === over.id);
if (oldIdx === -1 || newIdx === -1) return;
onReorder(arrayMove(slides, oldIdx, newIdx));
};
return (
<div className="flex h-full flex-col">
<div className="border-b p-3">
<h2 className="text-sm font-semibold">Screens</h2>
<p className="text-xs text-muted-foreground">
{slides.length} screen{slides.length === 1 ? "" : "s"} · drag to reorder
</p>
</div>
<div className="flex-1 overflow-y-auto p-2">
<DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
<SortableContext items={slides.map((s) => s.id)} strategy={verticalListSortingStrategy}>
<div className="space-y-1.5">
{slides.map((slide, i) => (
<SlideThumb
key={slide.id}
slide={slide}
slides={slides}
index={i}
active={slide.id === activeId}
device={device}
orientation={orientation}
theme={theme}
locale={locale}
appName={appName}
appIcon={appIcon}
connectedCanvas={connectedCanvas}
onSelect={() => onSelect(slide.id)}
onDelete={() => onDelete(slide.id)}
onDuplicate={() => onDuplicate(slide.id)}
/>
))}
{slides.length === 0 && (
<div className="rounded-lg border border-dashed p-6 text-center">
<p className="text-xs font-medium text-foreground">No screens yet</p>
<p className="mt-1 text-[11px] text-muted-foreground">
Click <span className="font-semibold">Add screen</span> to get started.
</p>
</div>
)}
</div>
</SortableContext>
</DndContext>
</div>
<div className="border-t bg-card p-3">
<Button
type="button"
className="w-full"
variant="default"
onClick={() => onAdd(newSlide(device === "feature-graphic" ? "feature-graphic" : "device-bottom"))}
disabled={disabled}
>
<Plus className="h-4 w-4" /> Add screen
</Button>
</div>
</div>
);
}
template/src/components/editor/slide-canvas.tsx
"use client";
import * as React from "react";
import { Rnd } from "react-rnd";
import { RotateCw } from "lucide-react";
import type {
BuiltInElementId,
Device,
ElementId,
ElementTransform,
Orientation,
SelectedElement,
Slide,
TextElement,
Theme,
} from "@/lib/types";
import {
CANVAS,
IPAD_RATIO,
MK_RATIO,
ipadW,
phoneW,
phoneWSmall,
tabletLW,
tabletPW,
} from "@/lib/constants";
import { toTextElementId } from "@/lib/elements";
import { img } from "@/lib/image-cache";
import { pickText, resolveScreenshot } from "@/lib/locale";
import {
AndroidPhone,
AndroidTabletL,
AndroidTabletP,
IPad,
Phone,
} from "./device-frames";
type FrameComp = React.ComponentType<{
src: string;
alt?: string;
style?: React.CSSProperties;
hideEmpty?: boolean;
}>;
export function getCanvas(device: Device, orientation: Orientation) {
const c = CANVAS[device];
if ((device === "android-7" || device === "android-10") && orientation === "landscape") {
return { cW: c.wL!, cH: c.hL! };
}
return { cW: c.w, cH: c.h };
}
// Aspect ratio (w/h) of each device frame — must match device-frames.tsx
function getFrameAspect(device: Device, orientation: Orientation) {
switch (device) {
case "iphone": return MK_RATIO;
case "android": return 9 / 19.5;
case "ipad": return IPAD_RATIO;
case "android-7":
case "android-10": return orientation === "landscape" ? 8 / 5 : 5 / 8;
default: return 1;
}
}
export function getFrameForDevice(device: Device, orientation: Orientation): {
Comp: FrameComp;
widthFn: (cW: number, cH: number) => number;
smallWidthFn: (cW: number, cH: number) => number;
} {
switch (device) {
case "iphone":
return { Comp: Phone, widthFn: phoneW, smallWidthFn: phoneWSmall };
case "ipad":
return { Comp: IPad, widthFn: ipadW, smallWidthFn: (cW, cH) => ipadW(cW, cH, 0.6) };
case "android":
return { Comp: AndroidPhone, widthFn: phoneW, smallWidthFn: phoneWSmall };
case "android-7":
case "android-10":
if (orientation === "landscape") {
return { Comp: AndroidTabletL, widthFn: tabletLW, smallWidthFn: (cW, cH) => tabletLW(cW, cH, 0.5) };
}
return { Comp: AndroidTabletP, widthFn: tabletPW, smallWidthFn: (cW, cH) => tabletPW(cW, cH, 0.62) };
default:
return { Comp: Phone, widthFn: phoneW, smallWidthFn: phoneWSmall };
}
}
type EditHandlers = {
onLabelChange?: (v: string) => void;
onHeadlineChange?: (v: string) => void;
onTextElementTextChange?: (id: string, v: string) => void;
onElementChange?: (id: ElementId, t: ElementTransform) => void;
onSelectElement?: (id: ElementId | null) => void;
};
type Props = {
slide: Slide;
device: Device;
orientation: Orientation;
theme: Theme;
locale: string;
appName?: string;
appIcon?: string;
editable?: boolean;
edit?: EditHandlers;
selectedElementId?: ElementId | null;
// Preview scale (1.0 = full size). Used so react-rnd maps drag deltas correctly
// when the canvas is rendered inside a CSS-transformed container.
previewScale?: number;
/** When true, suppress the "Drop a screenshot here" placeholder. Used for export. */
hideEmpty?: boolean;
};
type DeckEditHandlers = {
onLabelChange?: (slideId: string, v: string) => void;
onHeadlineChange?: (slideId: string, v: string) => void;
onTextElementTextChange?: (slideId: string, id: string, v: string) => void;
onElementChange?: (slideId: string, id: ElementId, t: ElementTransform) => void;
onSelectElement?: (element: SelectedElement | null) => void;
onSelectScreen?: (slideId: string) => void;
};
type DeckCanvasProps = {
slides: Slide[];
device: Device;
orientation: Orientation;
theme: Theme;
locale: string;
appName?: string;
appIcon?: string;
connectedCanvas?: boolean;
editable?: boolean;
edit?: DeckEditHandlers;
selectedElement?: SelectedElement | null;
activeSlideId?: string | null;
previewScale?: number;
hideEmpty?: boolean;
showGuides?: boolean;
};
// ---------- Editable text helpers ----------
function EditableText({
value,
editable,
onChange,
style,
multiline = false,
placeholder,
onFocus,
}: {
value: string;
editable?: boolean;
onChange?: (v: string) => void;
style?: React.CSSProperties;
multiline?: boolean;
placeholder?: string;
onFocus?: () => void;
}) {
const ref = React.useRef<HTMLDivElement>(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
const incoming = value || "";
if (el.textContent !== incoming && document.activeElement !== el) {
el.textContent = incoming;
}
}, [value]);
const handleInput = (e: React.FormEvent<HTMLDivElement>) => {
if (!onChange) return;
const text = (e.currentTarget.innerText || "").replace(/\u00a0/g, " ");
onChange(multiline ? text : text.replace(/\n/g, ""));
};
return (
<div
ref={ref}
contentEditable={editable}
suppressContentEditableWarning
data-placeholder={placeholder}
onInput={handleInput}
onFocus={() => onFocus?.()}
onKeyDown={(e) => {
if (!multiline && e.key === "Enter") {
e.preventDefault();
e.currentTarget.blur();
}
}}
onMouseDown={(e) => {
// Allow text editing without starting an Rnd drag.
if (editable) {
e.stopPropagation();
onFocus?.();
}
}}
onPointerDown={(e) => {
if (editable) e.stopPropagation();
}}
style={{
outline: "none",
whiteSpace: multiline ? "pre-wrap" : "nowrap",
cursor: editable ? "text" : "default",
...style,
}}
/>
);
}
// ---------- Caption (label + headline) ----------
function Caption({
cW,
cH,
slide,
theme,
locale,
editable,
edit,
align = "center",
inverted,
onFocus,
}: {
cW: number;
cH: number;
slide: Slide;
theme: Theme;
locale: string;
editable?: boolean;
edit?: EditHandlers;
align?: "center" | "left";
inverted?: boolean;
onFocus?: () => void;
}) {
const fg = inverted ? theme.fgAlt : theme.fg;
const accent = theme.accent;
// Scale typography off the *shorter* dimension so landscape layouts don't
// produce headlines so tall they overlap the device frame.
const unit = Math.min(cW, cH);
return (
<div style={{ textAlign: align, position: "relative", width: "100%" }}>
<EditableText
value={pickText(slide.label, locale)}
editable={editable}
onChange={edit?.onLabelChange}
onFocus={onFocus}
placeholder="LABEL"
style={{
fontSize: unit * 0.028,
fontWeight: 600,
letterSpacing: unit * 0.0015,
color: accent,
textTransform: "uppercase",
marginBottom: unit * 0.018,
minHeight: unit * 0.03,
}}
/>
<EditableText
value={pickText(slide.headline, locale)}
editable={editable}
multiline
onChange={edit?.onHeadlineChange}
onFocus={onFocus}
placeholder="Headline goes here"
style={{
fontSize: unit * 0.092,
fontWeight: 700,
lineHeight: 0.96,
letterSpacing: -unit * 0.001,
color: fg,
}}
/>
</div>
);
}
// ---------- Background ----------
function backgroundFor(theme: Theme, inverted?: boolean) {
if (inverted) {
return `linear-gradient(160deg, ${theme.bgAlt} 0%, ${shade(theme.bgAlt, -8)} 100%)`;
}
return `linear-gradient(160deg, ${theme.bg} 0%, ${shade(theme.bg, -6)} 100%)`;
}
function shade(hex: string, percent: number) {
const c = hex.replace("#", "");
const num = parseInt(c.length === 3 ? c.split("").map((x) => x + x).join("") : c, 16);
let r = (num >> 16) & 0xff;
let g = (num >> 8) & 0xff;
let b = num & 0xff;
const amt = Math.round((255 * percent) / 100);
r = Math.max(0, Math.min(255, r + amt));
g = Math.max(0, Math.min(255, g + amt));
b = Math.max(0, Math.min(255, b + amt));
return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, "0")}`;
}
// ---------- Decorative blob ----------
function Blob({
cW,
color,
x,
y,
size,
opacity = 0.4,
}: {
cW: number;
color: string;
x: number;
y: number;
size: number;
opacity?: number;
}) {
return (
<div
style={{
position: "absolute",
left: `${x}%`,
top: `${y}%`,
width: `${size}%`,
aspectRatio: "1 / 1",
background: color,
borderRadius: "50%",
filter: `blur(${cW * 0.06}px)`,
opacity,
pointerEvents: "none",
}}
/>
);
}
// ---------- Default element rects per layout ----------
type Rect = { x: number; y: number; width: number; height: number };
type LayoutRects = {
caption?: Rect & { align?: "center" | "left" };
device?: Rect;
deviceSecondary?: Rect;
};
function getDefaultRects(
layout: Slide["layout"],
cW: number,
cH: number,
frameAspect: number,
fwFrac: number,
fwSmallFrac: number,
): LayoutRects {
const deviceW = fwFrac * cW;
const deviceH = deviceW / frameAspect;
const smallW = fwSmallFrac * cW;
const smallH = smallW / frameAspect;
const capW = cW * 0.84;
const capH = cH * 0.28;
switch (layout) {
case "hero":
return {
caption: { x: cW * 0.08, y: cH * 0.09, width: capW, height: capH, align: "center" },
device: {
x: (cW - deviceW) / 2,
y: cH - deviceH + deviceH * 0.15,
width: deviceW,
height: deviceH,
},
};
case "device-bottom":
return {
caption: { x: cW * 0.08, y: cH * 0.08, width: capW, height: capH, align: "center" },
device: {
x: (cW - deviceW) / 2,
y: cH - deviceH - cH * 0.02,
width: deviceW,
height: deviceH,
},
};
case "device-top":
return {
caption: { x: cW * 0.08, y: cH * 0.65, width: capW, height: capH, align: "center" },
device: {
x: (cW - deviceW) / 2,
y: -cH * 0.1,
width: deviceW,
height: deviceH,
},
};
case "two-devices":
return {
caption: { x: cW * 0.08, y: cH * 0.08, width: capW, height: capH, align: "center" },
deviceSecondary: {
x: -cW * 0.06,
y: cH - smallH - cH * 0.05,
width: smallW,
height: smallH,
},
device: {
x: cW - deviceW * 0.9 + cW * 0.06,
y: cH - deviceH * 0.9 - cH * 0.02,
width: deviceW * 0.9,
height: (deviceW * 0.9) / frameAspect,
},
};
case "no-device":
return {
caption: {
x: cW * 0.1,
y: cH * 0.35,
width: cW * 0.8,
height: cH * 0.3,
align: "center",
},
};
case "split-landscape":
return {
caption: {
x: cW * 0.05,
y: cH * 0.25,
width: cW * 0.38,
height: cH * 0.5,
align: "left",
},
device: {
x: cW - deviceW + cW * 0.03,
y: (cH - deviceH) / 2,
width: deviceW,
height: deviceH,
},
};
default:
return {};
}
}
function rectFor(
id: BuiltInElementId,
slide: Slide,
defaults: LayoutRects,
): (Rect & { align?: "center" | "left" }) | undefined {
const saved = slide.transforms?.[id];
const def = defaults[id];
if (!def && !saved) return undefined;
if (!saved) return def;
return {
x: saved.x,
y: saved.y,
width: saved.width,
height: saved.height,
align: (def as { align?: "center" | "left" } | undefined)?.align,
};
}
function getSlideGeometry(slide: Slide, device: Device, orientation: Orientation) {
const { cW, cH } = getCanvas(device, orientation);
const { Comp: Frame, widthFn, smallWidthFn } = getFrameForDevice(device, orientation);
const frameAspect = getFrameAspect(device, orientation);
const fwFrac = widthFn(cW, cH);
const fwSmallFrac = smallWidthFn(cW, cH);
const defaults = getDefaultRects(slide.layout, cW, cH, frameAspect, fwFrac, fwSmallFrac);
return { cW, cH, Frame, frameAspect, defaults };
}
export function getElementTransform(
slide: Slide,
device: Device,
orientation: Orientation,
id: ElementId,
): ElementTransform | undefined {
if (id.startsWith("text:")) {
const textId = id.slice("text:".length);
const textElement = slide.textElements?.find((element) => element.id === textId);
return textElement?.transform;
}
const { defaults } = getSlideGeometry(slide, device, orientation);
const rect = rectFor(id as BuiltInElementId, slide, defaults);
if (!rect) return undefined;
const saved = slide.transforms?.[id as BuiltInElementId];
return {
x: rect.x,
y: rect.y,
width: rect.width,
height: rect.height,
rotation: saved?.rotation ?? 0,
zIndex: saved?.zIndex ?? defaultElementZ(id as BuiltInElementId),
};
}
function defaultElementZ(id: BuiltInElementId): number {
if (id === "deviceSecondary") return 2;
if (id === "device") return 3;
return 4;
}
// ---------- Main single-screen canvas ----------
export function SlideCanvas({
slide,
device,
orientation,
theme,
locale,
appName,
appIcon,
editable,
edit,
selectedElementId = null,
previewScale = 1,
hideEmpty,
}: Props) {
const { cW, cH } = getCanvas(device, orientation);
if (slide.layout === "feature-graphic" || device === "feature-graphic") {
return (
<FeatureGraphicCanvas
slide={slide}
cW={cW}
theme={theme}
locale={locale}
appName={appName}
appIcon={appIcon}
editable={editable}
edit={edit}
/>
);
}
const handleBackgroundMouseDown = editable
? (e: React.MouseEvent<HTMLDivElement>) => {
if (e.target === e.currentTarget) edit?.onSelectElement?.(null);
}
: undefined;
return (
<div
onMouseDown={handleBackgroundMouseDown}
style={{
width: "100%",
height: "100%",
position: "relative",
overflow: "hidden",
}}
>
<SlideBackground slide={slide} cW={cW} cH={cH} theme={theme} />
<SlideElements
slide={slide}
device={device}
orientation={orientation}
theme={theme}
locale={locale}
editable={editable}
edit={edit}
selectedElementId={selectedElementId}
previewScale={previewScale}
hideEmpty={hideEmpty}
screenX={0}
boundsW={cW}
boundsH={cH}
allowCrossScreen={false}
/>
</div>
);
}
// ---------- Connected deck canvas ----------
export function DeckCanvas({
slides,
device,
orientation,
theme,
locale,
appName,
appIcon,
connectedCanvas = true,
editable,
edit,
selectedElement = null,
activeSlideId = null,
previewScale = 1,
hideEmpty,
showGuides = false,
}: DeckCanvasProps) {
const { cW, cH } = getCanvas(device, orientation);
const totalW = Math.max(1, slides.length) * cW;
return (
<div
style={{
width: totalW,
height: cH,
position: "relative",
overflow: "hidden",
}}
>
{slides.map((slide, index) => {
const screenX = index * cW;
const active = activeSlideId === slide.id;
if (slide.layout === "feature-graphic" || device === "feature-graphic") {
return (
<div
key={`${slide.id}-feature`}
onMouseDown={(e) => {
if (!editable || e.defaultPrevented) return;
edit?.onSelectScreen?.(slide.id);
edit?.onSelectElement?.(null);
}}
style={{
position: "absolute",
left: screenX,
top: 0,
width: cW,
height: cH,
overflow: "hidden",
}}
>
<FeatureGraphicCanvas
slide={slide}
cW={cW}
theme={theme}
locale={locale}
appName={appName}
appIcon={appIcon}
editable={editable}
edit={{
onHeadlineChange: (v) => edit?.onHeadlineChange?.(slide.id, v),
}}
/>
{showGuides && <ScreenGuide cW={cW} cH={cH} index={index} active={active} />}
</div>
);
}
return (
<div
key={`${slide.id}-bg`}
onMouseDown={(e) => {
if (!editable || e.defaultPrevented) return;
edit?.onSelectScreen?.(slide.id);
edit?.onSelectElement?.(null);
}}
style={{
position: "absolute",
left: screenX,
top: 0,
width: cW,
height: cH,
overflow: "hidden",
}}
>
<SlideBackground slide={slide} cW={cW} cH={cH} theme={theme} />
{showGuides && <ScreenGuide cW={cW} cH={cH} index={index} active={active} />}
</div>
);
})}
{slides.map((slide, index) => {
if (slide.layout === "feature-graphic" || device === "feature-graphic") return null;
const selectedElementId =
selectedElement?.slideId === slide.id ? selectedElement.elementId : null;
const perSlideEdit: EditHandlers | undefined = editable
? {
onLabelChange: (v) => edit?.onLabelChange?.(slide.id, v),
onHeadlineChange: (v) => edit?.onHeadlineChange?.(slide.id, v),
onTextElementTextChange: (id, v) => edit?.onTextElementTextChange?.(slide.id, id, v),
onElementChange: (id, t) => edit?.onElementChange?.(slide.id, id, t),
onSelectElement: (id) => {
edit?.onSelectScreen?.(slide.id);
edit?.onSelectElement?.(id ? { slideId: slide.id, elementId: id } : null);
},
}
: undefined;
const elements = (
<SlideElements
key={`${slide.id}-elements`}
slide={slide}
device={device}
orientation={orientation}
theme={theme}
locale={locale}
editable={editable}
edit={perSlideEdit}
selectedElementId={selectedElementId}
previewScale={previewScale}
hideEmpty={hideEmpty}
screenX={connectedCanvas ? index * cW : 0}
boundsW={connectedCanvas ? totalW : cW}
boundsH={cH}
allowCrossScreen={connectedCanvas}
/>
);
if (connectedCanvas) return elements;
return (
<div
key={`${slide.id}-elements-isolated`}
style={{
position: "absolute",
left: index * cW,
top: 0,
width: cW,
height: cH,
overflow: "hidden",
}}
>
{elements}
</div>
);
})}
</div>
);
}
function SlideBackground({
slide,
cW,
cH,
theme,
}: {
slide: Slide;
cW: number;
cH: number;
theme: Theme;
}) {
const inverted = !!slide.inverted;
return (
<div
style={{
position: "absolute",
inset: 0,
overflow: "hidden",
background: backgroundFor(theme, inverted),
color: inverted ? theme.fgAlt : theme.fg,
}}
>
<Blob cW={cW} color={theme.accent} x={-15} y={-10} size={55} opacity={inverted ? 0.25 : 0.32} />
<Blob cW={cW} color={theme.accent} x={70} y={75} size={45} opacity={inverted ? 0.18 : 0.25} />
</div>
);
}
function ScreenGuide({
cW,
cH,
index,
active,
}: {
cW: number;
cH: number;
index: number;
active: boolean;
}) {
return (
<div
aria-hidden
style={{
position: "absolute",
inset: 0,
pointerEvents: "none",
outline: `${active ? Math.max(4, cW * 0.003) : Math.max(2, cW * 0.0015)}px solid ${
active ? "rgba(91, 124, 250, 0.95)" : "rgba(15, 23, 42, 0.22)"
}`,
outlineOffset: active ? -Math.max(4, cW * 0.003) : -Math.max(2, cW * 0.0015),
boxShadow: active
? "inset 0 0 0 9999px rgba(91, 124, 250, 0.03)"
: "inset 0 0 0 1px rgba(255, 255, 255, 0.22)",
}}
>
<div
style={{
position: "absolute",
left: cW * 0.035,
top: cH * 0.024,
borderRadius: cW * 0.018,
padding: `${cH * 0.006}px ${cW * 0.018}px`,
background: active ? "rgba(91, 124, 250, 0.92)" : "rgba(15, 23, 42, 0.72)",
color: "white",
fontSize: Math.max(24, cW * 0.022),
lineHeight: 1,
fontWeight: 700,
letterSpacing: 0,
}}
>
{index + 1}
</div>
</div>
);
}
function FeatureGraphicCanvas({
slide,
cW,
theme,
locale,
appName,
appIcon,
editable,
edit,
}: {
slide: Slide;
cW: number;
theme: Theme;
locale: string;
appName?: string;
appIcon?: string;
editable?: boolean;
edit?: EditHandlers;
}) {
return (
<div
style={{
width: "100%",
height: "100%",
position: "relative",
overflow: "hidden",
background: `linear-gradient(135deg, ${theme.bgAlt} 0%, ${shade(theme.bgAlt, -10)} 50%, ${theme.accent} 200%)`,
display: "flex",
alignItems: "center",
padding: `0 ${cW * 0.06}px`,
color: theme.fgAlt,
}}
>
<Blob cW={cW} color={theme.accent} x={70} y={20} size={50} opacity={0.45} />
<div style={{ display: "flex", alignItems: "center", gap: cW * 0.03, zIndex: 2 }}>
{appIcon && img(appIcon) ? (
<img
src={img(appIcon)}
alt=""
style={{
width: cW * 0.13,
height: cW * 0.13,
borderRadius: cW * 0.022,
boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
}}
draggable={false}
/>
) : (
<div
aria-hidden
style={{
width: cW * 0.13,
height: cW * 0.13,
borderRadius: cW * 0.022,
background: `linear-gradient(135deg, ${theme.accent}55, ${theme.accent})`,
display: "flex",
alignItems: "center",
justifyContent: "center",
color: theme.fgAlt,
fontWeight: 800,
fontSize: cW * 0.07,
boxShadow: "0 4px 16px rgba(0,0,0,0.3)",
}}
>
{(appName || "A").slice(0, 1).toUpperCase()}
</div>
)}
<div>
<div style={{ fontSize: cW * 0.06, fontWeight: 800, lineHeight: 1.05 }}>{appName || "App"}</div>
<EditableText
value={pickText(slide.headline, locale)}
editable={editable}
multiline
onChange={edit?.onHeadlineChange}
style={{
fontSize: cW * 0.028,
color: "rgba(255,255,255,0.85)",
marginTop: cW * 0.012,
lineHeight: 1.25,
}}
/>
</div>
</div>
</div>
);
}
function SlideElements({
slide,
device,
orientation,
theme,
locale,
editable,
edit,
selectedElementId,
previewScale,
hideEmpty,
screenX,
boundsW,
boundsH,
allowCrossScreen,
}: {
slide: Slide;
device: Device;
orientation: Orientation;
theme: Theme;
locale: string;
editable?: boolean;
edit?: EditHandlers;
selectedElementId: ElementId | null;
previewScale: number;
hideEmpty?: boolean;
screenX: number;
boundsW: number;
boundsH: number;
allowCrossScreen: boolean;
}) {
const screenshot = resolveScreenshot(slide.screenshot, locale);
const screenshotSecondary = resolveScreenshot(slide.screenshotSecondary, locale);
const { cW, cH, Frame, frameAspect, defaults } = getSlideGeometry(slide, device, orientation);
const inverted = !!slide.inverted;
const captionRect = rectFor("caption", slide, defaults);
const deviceRect = rectFor("device", slide, defaults);
const secondaryRect = rectFor("deviceSecondary", slide, defaults);
function toGlobal(rect: Rect): Rect {
return { ...rect, x: rect.x + screenX };
}
function toLocal(t: ElementTransform): ElementTransform {
return { ...t, x: t.x - screenX };
}
function renderCaption() {
if (!captionRect) return null;
const saved = slide.transforms?.caption;
const rotation = saved?.rotation ?? 0;
const zIndex = saved?.zIndex ?? 4;
const inner = (
<Caption
cW={cW}
cH={cH}
slide={slide}
theme={theme}
locale={locale}
editable={editable}
edit={edit}
align={captionRect.align || "center"}
inverted={inverted}
onFocus={() => edit?.onSelectElement?.("caption")}
/>
);
return (
<Movable
rect={toGlobal(captionRect)}
boundsW={boundsW}
boundsH={boundsH}
editable={editable}
previewScale={previewScale}
rotation={rotation}
onChange={(t) =>
edit?.onElementChange?.(
"caption",
toLocal({
...t,
rotation: t.rotation ?? rotation,
zIndex: t.zIndex ?? zIndex,
}),
)
}
zIndex={zIndex}
selected={selectedElementId === "caption"}
onSelect={() => edit?.onSelectElement?.("caption")}
allowOverflow={allowCrossScreen}
>
<div style={{ width: "100%", height: "100%", display: "flex", alignItems: "flex-start" }}>
{inner}
</div>
</Movable>
);
}
function renderDevice(id: "device" | "deviceSecondary", rect: Rect, src: string, extraStyle?: React.CSSProperties) {
const saved = slide.transforms?.[id];
const rotation = saved?.rotation ?? 0;
const zIndex = saved?.zIndex ?? (id === "deviceSecondary" ? 2 : 3);
return (
<Movable
rect={toGlobal(rect)}
boundsW={boundsW}
boundsH={boundsH}
editable={editable}
previewScale={previewScale}
rotation={rotation}
onChange={(t) =>
edit?.onElementChange?.(
id,
toLocal({
...t,
rotation: t.rotation ?? rotation,
zIndex: t.zIndex ?? zIndex,
}),
)
}
lockAspectRatio={frameAspect}
zIndex={zIndex}
allowOverflow
selected={selectedElementId === id}
onSelect={() => edit?.onSelectElement?.(id)}
>
<Frame
src={src}
hideEmpty={hideEmpty}
style={{ width: "100%", height: "100%", ...extraStyle }}
/>
</Movable>
);
}
function renderTextElement(textElement: TextElement, index: number) {
const elementId = toTextElementId(textElement.id);
const rect = textElement.transform;
const rotation = rect.rotation ?? 0;
const zIndex = rect.zIndex ?? 5 + index;
const textColor = textElement.color || (inverted ? theme.fgAlt : theme.fg);
return (
<Movable
key={textElement.id}
rect={toGlobal(rect)}
boundsW={boundsW}
boundsH={boundsH}
editable={editable}
previewScale={previewScale}
rotation={rotation}
onChange={(t) =>
edit?.onElementChange?.(
elementId,
toLocal({
...t,
rotation: t.rotation ?? rotation,
zIndex: t.zIndex ?? zIndex,
}),
)
}
zIndex={zIndex}
selected={selectedElementId === elementId}
onSelect={() => edit?.onSelectElement?.(elementId)}
allowOverflow={allowCrossScreen}
>
<div
style={{
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent:
textElement.align === "right"
? "flex-end"
: textElement.align === "left"
? "flex-start"
: "center",
padding: `${Math.min(cW, cH) * 0.012}px`,
}}
>
<EditableText
value={pickText(textElement.text, locale)}
editable={editable}
multiline
onChange={(value) => edit?.onTextElementTextChange?.(textElement.id, value)}
onFocus={() => edit?.onSelectElement?.(elementId)}
placeholder="Text"
style={{
width: "100%",
color: textColor,
fontSize: textElement.fontSize ?? Math.min(cW, cH) * 0.06,
fontWeight: textElement.fontWeight ?? 700,
lineHeight: 1.05,
textAlign: textElement.align ?? "center",
textShadow: inverted ? "0 2px 18px rgba(0,0,0,0.22)" : "0 2px 18px rgba(255,255,255,0.2)",
}}
/>
</div>
</Movable>
);
}
return (
<>
{secondaryRect &&
renderDevice(
"deviceSecondary",
secondaryRect,
screenshotSecondary || screenshot,
{ opacity: 0.85 },
)}
{deviceRect && renderDevice("device", deviceRect, screenshot)}
{renderCaption()}
{(slide.textElements || []).map(renderTextElement)}
</>
);
}
// ---------- Movable wrapper ----------
// Fraction of an element's width/height that must remain inside the canvas
// when overflow is allowed. Keeps a graspable handle visible so the user can
// always drag the element back onto the canvas.
const MIN_VISIBLE_FRAC = 0.1;
function clampRect(
r: { x: number; y: number; width: number; height: number },
boundsW: number,
boundsH: number,
allowOverflow = false,
) {
if (allowOverflow) {
const width = r.width;
const height = r.height;
const minVisX = Math.max(8, width * MIN_VISIBLE_FRAC);
const minVisY = Math.max(8, height * MIN_VISIBLE_FRAC);
const x = Math.max(-(width - minVisX), Math.min(r.x, boundsW - minVisX));
const y = Math.max(-(height - minVisY), Math.min(r.y, boundsH - minVisY));
return { x, y, width, height };
}
const width = Math.min(r.width, boundsW);
const height = Math.min(r.height, boundsH);
const x = Math.max(0, Math.min(r.x, boundsW - width));
const y = Math.max(0, Math.min(r.y, boundsH - height));
return { x, y, width, height };
}
function Movable({
rect,
boundsW,
boundsH,
editable,
previewScale,
onChange,
children,
lockAspectRatio,
zIndex,
rotation = 0,
allowOverflow = false,
selected = false,
onSelect,
}: {
rect: Rect;
boundsW: number;
boundsH: number;
editable?: boolean;
previewScale: number;
onChange: (t: ElementTransform) => void;
children: React.ReactNode;
lockAspectRatio?: number | boolean;
zIndex?: number;
rotation?: number;
allowOverflow?: boolean;
selected?: boolean;
onSelect?: () => void;
}) {
const rotationRef = React.useRef(rotation);
React.useEffect(() => {
rotationRef.current = rotation;
}, [rotation]);
function startRotate(e: React.PointerEvent<HTMLButtonElement>) {
e.preventDefault();
e.stopPropagation();
onSelect?.();
const root = e.currentTarget.closest(".rnd-editable") as HTMLElement | null;
if (!root) return;
const box = root.getBoundingClientRect();
const centerX = box.left + box.width / 2;
const centerY = box.top + box.height / 2;
const startAngle = pointerAngle(e.clientX, e.clientY, centerX, centerY);
const startRotation = rotationRef.current;
const handleMove = (event: PointerEvent) => {
event.preventDefault();
const nextRotation = normalizeRotation(
startRotation + pointerAngle(event.clientX, event.clientY, centerX, centerY) - startAngle,
);
rotationRef.current = nextRotation;
onChange({
x: display.x,
y: display.y,
width: display.width,
height: display.height,
rotation: nextRotation,
zIndex,
});
};
const stopRotate = () => {
window.removeEventListener("pointermove", handleMove);
window.removeEventListener("pointerup", stopRotate);
window.removeEventListener("pointercancel", stopRotate);
};
window.addEventListener("pointermove", handleMove, { passive: false });
window.addEventListener("pointerup", stopRotate, { once: true });
window.addEventListener("pointercancel", stopRotate, { once: true });
}
// Rotation lives on the inner wrapper so the Rnd's axis-aligned rect remains
// the authoritative bounding box for drag/resize math. A bare mousedown
// listener (no stopPropagation — that would prevent react-rnd from starting
// a drag) marks the element as the current selection.
const rotated = (
<div
onMouseDown={() => {
if (editable) onSelect?.();
}}
style={{
width: "100%",
height: "100%",
transform: rotation ? `rotate(${rotation}deg)` : undefined,
transformOrigin: "center center",
}}
>
{children}
</div>
);
// Non-editable (export/thumb) path: plain absolute-positioned div, no Rnd.
if (!editable) {
return (
<div
style={{
position: "absolute",
left: rect.x,
top: rect.y,
width: rect.width,
height: rect.height,
zIndex,
}}
>
{rotated}
</div>
);
}
const display = clampRect(rect, boundsW, boundsH, allowOverflow);
const controlScale = Math.max(0.05, previewScale);
return (
<Rnd
bounds={allowOverflow ? undefined : "parent"}
scale={previewScale}
lockAspectRatio={lockAspectRatio}
position={{ x: display.x, y: display.y }}
size={{ width: display.width, height: display.height }}
onDragStart={() => onSelect?.()}
onResizeStart={() => onSelect?.()}
onDragStop={(_e, d) => {
const next = clampRect(
{ x: d.x, y: d.y, width: display.width, height: display.height },
boundsW,
boundsH,
allowOverflow,
);
onChange({ ...next, rotation, zIndex });
}}
onResizeStop={(_e, _dir, ref, _delta, position) => {
const next = clampRect(
{
x: position.x,
y: position.y,
width: parseFloat(ref.style.width),
height: parseFloat(ref.style.height),
},
boundsW,
boundsH,
allowOverflow,
);
onChange({ ...next, rotation, zIndex });
}}
style={{ zIndex }}
resizeHandleStyles={handleStyle}
className={selected ? "rnd-editable rnd-selected" : "rnd-editable"}
>
{rotated}
<button
type="button"
className="rnd-rotate-handle"
style={{
right: -14 / controlScale,
top: -14 / controlScale,
width: 28 / controlScale,
height: 28 / controlScale,
}}
onPointerDown={startRotate}
title="Rotate"
aria-label="Rotate element"
>
<RotateCw style={{ width: 14 / controlScale, height: 14 / controlScale }} />
</button>
</Rnd>
);
}
function pointerAngle(x: number, y: number, centerX: number, centerY: number) {
return (Math.atan2(y - centerY, x - centerX) * 180) / Math.PI;
}
function normalizeRotation(degrees: number) {
let next = degrees;
while (next > 180) next -= 360;
while (next < -180) next += 360;
return Math.round(next);
}
// Subtle resize handles (visible only on hover via globals.css).
const handleSize = 14;
const handleStyle: Record<string, React.CSSProperties> = {
top: { height: handleSize },
right: { width: handleSize },
bottom: { height: handleSize },
left: { width: handleSize },
topRight: { width: handleSize, height: handleSize },
bottomRight: { width: handleSize, height: handleSize },
bottomLeft: { width: handleSize, height: handleSize },
topLeft: { width: handleSize, height: handleSize },
};
template/src/components/editor/slide-thumb.tsx
"use client";
import * as React from "react";
import { useSortable } from "@dnd-kit/sortable";
import { CSS } from "@dnd-kit/utilities";
import { Copy, GripVertical, Trash2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { LAYOUT_LABEL } from "@/lib/constants";
import { pickText } from "@/lib/locale";
import type { Device, Orientation, Slide, Theme } from "@/lib/types";
import { cn } from "@/lib/utils";
import { DeckCanvas, SlideCanvas, getCanvas } from "./slide-canvas";
type Props = {
slide: Slide;
slides: Slide[];
index: number;
active: boolean;
device: Device;
orientation: Orientation;
theme: Theme;
locale: string;
appName?: string;
appIcon?: string;
connectedCanvas: boolean;
onSelect: () => void;
onDelete: () => void;
onDuplicate: () => void;
};
// Thumb tile target width (pixels). Height is derived from device aspect.
const THUMB_W = 60;
export function SlideThumb({
slide,
slides,
index,
active,
device,
orientation,
theme,
locale,
appName,
appIcon,
connectedCanvas,
onSelect,
onDelete,
onDuplicate,
}: Props) {
const headline = pickText(slide.headline, locale);
const label = pickText(slide.label, locale);
const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
id: slide.id,
});
const { cW, cH } = getCanvas(device, orientation);
const aspect = cW / cH;
const tileH = Math.max(34, Math.min(120, Math.round(THUMB_W / aspect)));
const scale = THUMB_W / cW;
const start = connectedCanvas ? Math.max(0, index - 1) : index;
const visibleSlides = connectedCanvas ? slides.slice(start, Math.min(slides.length, index + 2)) : [slide];
const localIndex = index - start;
const style: React.CSSProperties = {
transform: CSS.Transform.toString(transform),
transition,
opacity: isDragging ? 0.5 : 1,
};
return (
<div
ref={setNodeRef}
style={style}
className={cn(
"group relative flex items-stretch gap-2 rounded-lg border bg-card p-1.5 transition-all hover:border-foreground/30 hover:bg-accent",
active && "border-primary ring-1 ring-primary",
)}
>
<button
type="button"
className="flex w-3 cursor-grab items-center justify-center text-muted-foreground/60 hover:text-foreground focus-visible:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring active:cursor-grabbing"
{...attributes}
{...listeners}
aria-label={`Reorder screen ${index + 1} (press space, then arrow keys)`}
>
<GripVertical className="h-4 w-4" />
</button>
<button
type="button"
onClick={onSelect}
className="flex flex-1 items-center gap-3 overflow-hidden text-left"
>
<div
aria-hidden
className="relative shrink-0 overflow-hidden rounded border bg-muted"
style={{ width: THUMB_W, height: tileH }}
>
<div
style={{
width: cW * visibleSlides.length,
height: cH,
position: "absolute",
top: 0,
left: -localIndex * cW * scale,
transformOrigin: "top left",
transform: `scale(${scale})`,
pointerEvents: "none",
}}
>
{connectedCanvas ? (
<DeckCanvas
slides={visibleSlides}
device={device}
orientation={orientation}
theme={theme}
locale={locale}
appName={appName}
appIcon={appIcon}
connectedCanvas
editable={false}
/>
) : (
<SlideCanvas
slide={slide}
device={device}
orientation={orientation}
theme={theme}
locale={locale}
appName={appName}
appIcon={appIcon}
editable={false}
/>
)}
</div>
</div>
<div className="flex min-w-0 flex-1 flex-col">
<span className="truncate text-[10px] uppercase tracking-wide text-muted-foreground">
{`Screen ${index + 1} · ${LAYOUT_LABEL[slide.layout]}`}
</span>
<span className="truncate text-sm font-medium leading-tight">
{headline.split("\n")[0] || (
<em className="font-normal text-muted-foreground">Untitled</em>
)}
</span>
{label ? (
<span className="truncate text-[10px] uppercase tracking-wide text-muted-foreground">
{label}
</span>
) : null}
</div>
</button>
{/* Always visible on touch (no hover); fades in on hover on desktop. */}
<div className="flex flex-col items-center justify-center gap-0.5 opacity-60 transition-opacity focus-within:opacity-100 group-hover:opacity-100 md:opacity-0">
<Button
type="button"
size="icon"
variant="ghost"
className="h-6 w-6"
onClick={onDuplicate}
aria-label={`Duplicate screen ${index + 1}`}
title="Duplicate screen"
>
<Copy className="h-3.5 w-3.5" />
</Button>
<Button
type="button"
size="icon"
variant="ghost"
className="h-6 w-6 hover:text-destructive"
onClick={onDelete}
aria-label={`Delete screen ${index + 1}`}
title="Delete screen (undoable)"
>
<Trash2 className="h-3.5 w-3.5" />
</Button>
</div>
</div>
);
}
template/src/components/editor/toolbar.tsx
"use client";
import * as React from "react";
import { AlertTriangle, Check, Cloud, Download, UnfoldHorizontal, RotateCcw } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import {
DEVICE_LABEL,
supportsLandscape,
} from "@/lib/constants";
import { detectPlatform } from "@/lib/defaults";
import type { Device, Orientation } from "@/lib/types";
type Props = {
appName: string;
setAppName: (v: string) => void;
connectedCanvas: boolean;
setConnectedCanvas: (v: boolean) => void;
locale: string;
setLocale: (v: string) => void;
locales: string[];
device: Device;
setDevice: (v: Device) => void;
orientation: Orientation;
setOrientation: (v: Orientation) => void;
onExport: () => void;
onResetAll: () => void;
onResetDevice: () => void;
exporting: string | null;
savedAt: number | null;
saveError: string | null;
busy: boolean;
};
export function Toolbar(props: Props) {
const platform = detectPlatform(props.device);
const hasLandscape = supportsLandscape(props.device);
const [resetOpen, setResetOpen] = React.useState(false);
// Track last device per platform so iOS/Android tabs preserve user's choice.
const lastByPlatform = React.useRef<{ ios: Device; android: Device }>({
ios: platform === "ios" ? props.device : "iphone",
android: platform === "android" ? props.device : "android",
});
React.useEffect(() => {
lastByPlatform.current[platform] = props.device;
}, [platform, props.device]);
const showLocale = props.locales.length > 1;
const deviceLabel = DEVICE_LABEL[props.device];
return (
<div className="flex flex-wrap items-center gap-x-2 gap-y-1.5 border-b bg-card/40 px-4 py-2">
<Input
value={props.appName}
onChange={(e) => props.setAppName(e.target.value)}
className="h-8 w-40 border-dashed text-sm font-semibold focus-visible:border-input focus-visible:border-solid focus-visible:bg-background"
placeholder="App name"
aria-label="App name"
title="App name (click to edit)"
disabled={props.busy}
/>
<span aria-hidden className="mx-1 h-5 w-px bg-border" />
<Button
type="button"
variant={props.connectedCanvas ? "secondary" : "outline"}
size="sm"
className="h-8 gap-1.5 px-2 text-xs"
onClick={() => props.setConnectedCanvas(!props.connectedCanvas)}
aria-pressed={props.connectedCanvas}
title={
props.connectedCanvas
? "Connected canvas enabled"
: "Isolated screens; turn on to let elements cross screen edges"
}
disabled={props.busy}
>
<UnfoldHorizontal className="h-3.5 w-3.5" />
{props.connectedCanvas ? "Connected" : "Isolated"}
</Button>
<span aria-hidden className="mx-1 h-5 w-px bg-border" />
<Tabs
value={platform}
onValueChange={(p) => {
if (props.busy) return;
const next = p === "ios" ? lastByPlatform.current.ios : lastByPlatform.current.android;
props.setDevice(next);
}}
>
<TabsList className="h-8 p-0.5">
<TabsTrigger value="ios" className="h-7 px-3 text-xs" disabled={props.busy}>
iOS
</TabsTrigger>
<TabsTrigger value="android" className="h-7 px-3 text-xs" disabled={props.busy}>
Android
</TabsTrigger>
</TabsList>
</Tabs>
<Select
value={props.device}
onValueChange={(v) => props.setDevice(v as Device)}
disabled={props.busy}
>
<SelectTrigger className="h-8 w-44 text-xs">
<SelectValue placeholder="Device">{deviceLabel}</SelectValue>
</SelectTrigger>
<SelectContent>
{platform === "ios" ? (
<>
<SelectItem value="iphone">{DEVICE_LABEL.iphone}</SelectItem>
<SelectItem value="ipad">{DEVICE_LABEL.ipad}</SelectItem>
</>
) : (
<>
<SelectItem value="android">{DEVICE_LABEL.android}</SelectItem>
<SelectItem value="android-7">{DEVICE_LABEL["android-7"]}</SelectItem>
<SelectItem value="android-10">{DEVICE_LABEL["android-10"]}</SelectItem>
<SelectItem value="feature-graphic">{DEVICE_LABEL["feature-graphic"]}</SelectItem>
</>
)}
</SelectContent>
</Select>
{hasLandscape && (
<Select
value={props.orientation}
onValueChange={(v) => props.setOrientation(v as Orientation)}
disabled={props.busy}
>
<SelectTrigger className="h-8 w-32 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="portrait">Portrait</SelectItem>
<SelectItem value="landscape">Landscape</SelectItem>
</SelectContent>
</Select>
)}
{showLocale && (
<Select value={props.locale} onValueChange={props.setLocale} disabled={props.busy}>
<SelectTrigger className="h-8 w-20 text-xs">
<SelectValue />
</SelectTrigger>
<SelectContent>
{props.locales.map((l) => (
<SelectItem key={l} value={l}>
{l.toUpperCase()}
</SelectItem>
))}
</SelectContent>
</Select>
)}
<div className="ml-auto flex shrink-0 items-center gap-2">
<SaveStatus savedAt={props.savedAt} saveError={props.saveError} />
<span aria-hidden className="h-5 w-px bg-border" />
<Button
variant="ghost"
size="icon"
className="h-8 w-8"
onClick={() => setResetOpen(true)}
title="Reset screens to defaults"
aria-label="Reset"
disabled={props.busy}
>
<RotateCcw className="h-4 w-4" />
</Button>
<Button
onClick={props.onExport}
disabled={!!props.exporting}
size="sm"
className="h-8"
title="Export every size × locale for this device as a zip"
>
<Download className="h-4 w-4" />
{props.exporting ? `Exporting ${props.exporting}` : "Export bundle"}
</Button>
</div>
<Dialog open={resetOpen} onOpenChange={setResetOpen}>
<DialogContent className="max-w-md">
<DialogHeader>
<DialogTitle>Reset to defaults?</DialogTitle>
<DialogDescription>
Choose whether to reset just <span className="font-medium">{deviceLabel}</span> or every device deck. Your canvas edits, uploaded screenshots, and copy will be lost.
</DialogDescription>
</DialogHeader>
<div className="flex flex-wrap justify-end gap-2">
<Button variant="ghost" size="sm" onClick={() => setResetOpen(false)}>
Cancel
</Button>
<Button
variant="outline"
size="sm"
onClick={() => {
setResetOpen(false);
props.onResetDevice();
}}
>
Reset {deviceLabel} only
</Button>
<Button
variant="destructive"
size="sm"
onClick={() => {
setResetOpen(false);
props.onResetAll();
}}
>
Reset all devices
</Button>
</div>
</DialogContent>
</Dialog>
</div>
);
}
function SaveStatus({ savedAt, saveError }: { savedAt: number | null; saveError: string | null }) {
const [, setTick] = React.useState(0);
React.useEffect(() => {
const t = setInterval(() => setTick((x) => x + 1), 60_000);
return () => clearInterval(t);
}, []);
if (saveError) {
return (
<span
className="flex items-center gap-1 text-xs text-destructive"
title={saveError}
>
<AlertTriangle className="h-3.5 w-3.5" /> save failed
</span>
);
}
if (!savedAt) {
return (
<span className="flex items-center gap-1 text-xs text-muted-foreground">
<Cloud className="h-3.5 w-3.5" /> not saved yet
</span>
);
}
const seconds = Math.max(0, Math.round((Date.now() - savedAt) / 1000));
const label =
seconds < 5
? "saved"
: seconds < 60
? `saved ${seconds}s ago`
: seconds < 3600
? `saved ${Math.round(seconds / 60)}m ago`
: `saved ${Math.round(seconds / 3600)}h ago`;
return (
<span className="flex items-center gap-1 text-xs text-muted-foreground">
<Check className="h-3.5 w-3.5 text-green-500" /> {label}
</span>
);
}
template/src/components/ui/button.tsx
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const buttonVariants = cva(
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
{
variants: {
variant: {
default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
ghost: "hover:bg-accent hover:text-accent-foreground",
link: "text-primary underline-offset-4 hover:underline",
},
size: {
default: "h-9 px-4 py-2",
sm: "h-8 rounded-md px-3 text-xs",
lg: "h-10 rounded-md px-8",
icon: "h-9 w-9",
},
},
defaultVariants: { variant: "default", size: "default" },
},
);
export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
return <Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />;
},
);
Button.displayName = "Button";
export { Button, buttonVariants };
template/src/components/ui/card.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn("rounded-xl border bg-card text-card-foreground shadow", className)} {...props} />
),
);
Card.displayName = "Card";
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
),
);
CardHeader.displayName = "CardHeader";
const CardTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => (
<div ref={ref} className={cn("font-semibold leading-none tracking-tight", className)} {...props} />
),
);
CardTitle.displayName = "CardTitle";
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
({ className, ...props }, ref) => <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />,
);
CardContent.displayName = "CardContent";
export { Card, CardHeader, CardTitle, CardContent };
template/src/components/ui/dialog.tsx
"use client";
import * as React from "react";
import * as DialogPrimitive from "@radix-ui/react-dialog";
import { X } from "lucide-react";
import { cn } from "@/lib/utils";
const Dialog = DialogPrimitive.Root;
const DialogTrigger = DialogPrimitive.Trigger;
const DialogPortal = DialogPrimitive.Portal;
const DialogClose = DialogPrimitive.Close;
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
)}
{...props}
/>
));
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 sm:rounded-lg",
className,
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
<X className="h-4 w-4" />
<span className="sr-only">Close</span>
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
));
DialogContent.displayName = DialogPrimitive.Content.displayName;
const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
);
DialogHeader.displayName = "DialogHeader";
const DialogTitle = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Title>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />
));
DialogTitle.displayName = DialogPrimitive.Title.displayName;
const DialogDescription = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Description>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />
));
DialogDescription.displayName = DialogPrimitive.Description.displayName;
export {
Dialog,
DialogPortal,
DialogOverlay,
DialogClose,
DialogTrigger,
DialogContent,
DialogHeader,
DialogTitle,
DialogDescription,
};
template/src/components/ui/dropdown-menu.tsx
"use client";
import * as React from "react";
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
import { Check } from "lucide-react";
import { cn } from "@/lib/utils";
const DropdownMenu = DropdownMenuPrimitive.Root;
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
const DropdownMenuContent = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<DropdownMenuPrimitive.Portal>
<DropdownMenuPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
className,
)}
{...props}
/>
</DropdownMenuPrimitive.Portal>
));
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
const DropdownMenuItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Item
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
{...props}
/>
));
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
const DropdownMenuCheckboxItem = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
>(({ className, children, checked, ...props }, ref) => (
<DropdownMenuPrimitive.CheckboxItem
ref={ref}
className={cn(
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground",
className,
)}
checked={checked}
{...props}
>
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
<DropdownMenuPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</DropdownMenuPrimitive.ItemIndicator>
</span>
{children}
</DropdownMenuPrimitive.CheckboxItem>
));
DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
const DropdownMenuSeparator = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Separator ref={ref} className={cn("-mx-1 my-1 h-px bg-muted", className)} {...props} />
));
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
const DropdownMenuLabel = React.forwardRef<
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
>(({ className, ...props }, ref) => (
<DropdownMenuPrimitive.Label
ref={ref}
className={cn("px-2 py-1.5 text-sm font-semibold", className)}
{...props}
/>
));
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
export {
DropdownMenu,
DropdownMenuTrigger,
DropdownMenuContent,
DropdownMenuItem,
DropdownMenuCheckboxItem,
DropdownMenuSeparator,
DropdownMenuLabel,
DropdownMenuGroup,
DropdownMenuPortal,
};
template/src/components/ui/input.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLInputElement>>(
({ className, type, ...props }, ref) => (
<input
type={type}
className={cn(
"flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
ref={ref}
{...props}
/>
),
);
Input.displayName = "Input";
export { Input };
template/src/components/ui/label.tsx
"use client";
import * as React from "react";
import * as LabelPrimitive from "@radix-ui/react-label";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";
const labelVariants = cva(
"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
);
const Label = React.forwardRef<
React.ElementRef<typeof LabelPrimitive.Root>,
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
>(({ className, ...props }, ref) => (
<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
));
Label.displayName = LabelPrimitive.Root.displayName;
export { Label };
template/src/components/ui/select.tsx
"use client";
import * as React from "react";
import * as SelectPrimitive from "@radix-ui/react-select";
import { Check, ChevronDown } from "lucide-react";
import { cn } from "@/lib/utils";
const Select = SelectPrimitive.Root;
const SelectGroup = SelectPrimitive.Group;
const SelectValue = SelectPrimitive.Value;
const SelectTrigger = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className,
)}
{...props}
>
{children}
<SelectPrimitive.Icon asChild>
<ChevronDown className="h-4 w-4 opacity-50" />
</SelectPrimitive.Icon>
</SelectPrimitive.Trigger>
));
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
const SelectContent = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
>(({ className, children, position = "popper", ...props }, ref) => (
<SelectPrimitive.Portal>
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,
)}
position={position}
{...props}
>
<SelectPrimitive.Viewport
className={cn(
"p-1",
position === "popper" &&
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]",
)}
>
{children}
</SelectPrimitive.Viewport>
</SelectPrimitive.Content>
</SelectPrimitive.Portal>
));
SelectContent.displayName = SelectPrimitive.Content.displayName;
const SelectItem = React.forwardRef<
React.ElementRef<typeof SelectPrimitive.Item>,
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
>(({ className, children, ...props }, ref) => (
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
className,
)}
{...props}
>
<span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
<SelectPrimitive.ItemIndicator>
<Check className="h-4 w-4" />
</SelectPrimitive.ItemIndicator>
</span>
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
</SelectPrimitive.Item>
));
SelectItem.displayName = SelectPrimitive.Item.displayName;
export { Select, SelectGroup, SelectValue, SelectTrigger, SelectContent, SelectItem };
template/src/components/ui/tabs.tsx
"use client";
import * as React from "react";
import * as TabsPrimitive from "@radix-ui/react-tabs";
import { cn } from "@/lib/utils";
const Tabs = TabsPrimitive.Root;
const TabsList = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.List>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
<TabsPrimitive.List
ref={ref}
className={cn(
"inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
className,
)}
{...props}
/>
));
TabsList.displayName = TabsPrimitive.List.displayName;
const TabsTrigger = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Trigger>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Trigger
ref={ref}
className={cn(
"inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
className,
)}
{...props}
/>
));
TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
const TabsContent = React.forwardRef<
React.ElementRef<typeof TabsPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
<TabsPrimitive.Content
ref={ref}
className={cn(
"mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
className,
)}
{...props}
/>
));
TabsContent.displayName = TabsPrimitive.Content.displayName;
export { Tabs, TabsList, TabsTrigger, TabsContent };
template/src/components/ui/textarea.tsx
import * as React from "react";
import { cn } from "@/lib/utils";
const Textarea = React.forwardRef<HTMLTextAreaElement, React.TextareaHTMLAttributes<HTMLTextAreaElement>>(
({ className, ...props }, ref) => (
<textarea
ref={ref}
className={cn(
"flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
/>
),
);
Textarea.displayName = "Textarea";
export { Textarea };
template/src/components/ui/tooltip.tsx
"use client";
import * as React from "react";
import * as TooltipPrimitive from "@radix-ui/react-tooltip";
import { cn } from "@/lib/utils";
const TooltipProvider = TooltipPrimitive.Provider;
const Tooltip = TooltipPrimitive.Root;
const TooltipTrigger = TooltipPrimitive.Trigger;
const TooltipContent = React.forwardRef<
React.ElementRef<typeof TooltipPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
>(({ className, sideOffset = 4, ...props }, ref) => (
<TooltipPrimitive.Content
ref={ref}
sideOffset={sideOffset}
className={cn(
"z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground animate-in fade-in-0 zoom-in-95",
className,
)}
{...props}
/>
));
TooltipContent.displayName = TooltipPrimitive.Content.displayName;
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
template/src/lib/constants.ts
import type { Device, Orientation, SlideLayout, Theme, ThemeId } from "./types";
// ---------- Canvas dimensions (design at largest required resolution) ----------
export const CANVAS: Record<Device, { w: number; h: number; wL?: number; hL?: number }> = {
iphone: { w: 1320, h: 2868 },
ipad: { w: 2064, h: 2752 },
android: { w: 1080, h: 1920 },
"android-7": { w: 1200, h: 1920, wL: 1920, hL: 1200 },
"android-10": { w: 1600, h: 2560, wL: 2560, hL: 1600 },
"feature-graphic": { w: 1024, h: 500 },
};
// ---------- Export sizes per device ----------
export type ExportSize = { label: string; w: number; h: number };
export const EXPORT_SIZES: Record<Device, ExportSize[]> = {
iphone: [
{ label: '6.9"', w: 1320, h: 2868 },
{ label: '6.5"', w: 1284, h: 2778 },
{ label: '6.3"', w: 1206, h: 2622 },
{ label: '6.1"', w: 1125, h: 2436 },
],
ipad: [
{ label: '13" iPad', w: 2064, h: 2752 },
{ label: '12.9" iPad Pro', w: 2048, h: 2732 },
],
android: [{ label: "Phone", w: 1080, h: 1920 }],
"android-7": [{ label: '7" Portrait', w: 1200, h: 1920 }],
"android-10": [{ label: '10" Portrait', w: 1600, h: 2560 }],
"feature-graphic": [{ label: "Feature Graphic", w: 1024, h: 500 }],
};
// Landscape sizes (tablets only)
export const EXPORT_SIZES_LANDSCAPE: Partial<Record<Device, ExportSize[]>> = {
"android-7": [{ label: '7" Landscape', w: 1920, h: 1200 }],
"android-10": [{ label: '10" Landscape', w: 2560, h: 1600 }],
};
export function supportsLandscape(device: Device): boolean {
return device in EXPORT_SIZES_LANDSCAPE;
}
export function getExportSizes(device: Device, orientation: Orientation): ExportSize[] {
if (orientation === "landscape") {
return EXPORT_SIZES_LANDSCAPE[device] || EXPORT_SIZES[device];
}
return EXPORT_SIZES[device];
}
// ---------- Frame aspect ratios ----------
export const MK_RATIO = 1022 / 2082; // iPhone PNG mockup
export const TAB_P_RATIO = 0.667; // tablet portrait
export const TAB_L_RATIO = 1.5; // tablet landscape
export const IPAD_RATIO = 0.770; // iPad
// iPhone mockup screen overlay (pre-measured)
export const PHONE_SCREEN = {
L: (52 / 1022) * 100,
T: (46 / 2082) * 100,
W: (918 / 1022) * 100,
H: (1990 / 2082) * 100,
RX: (126 / 918) * 100,
RY: (126 / 1990) * 100,
};
// ---------- Width formula helpers ----------
export function phoneW(cW: number, cH: number, clamp = 0.84) {
return Math.min(clamp, 0.72 * (cH / cW) * MK_RATIO);
}
export function phoneWSmall(cW: number, cH: number) {
return phoneW(cW, cH, 0.66);
}
export function tabletPW(cW: number, cH: number, clamp = 0.80) {
return Math.min(clamp, 0.72 * (cH / cW) * TAB_P_RATIO);
}
export function tabletLW(cW: number, cH: number, clamp = 0.62) {
return Math.min(clamp, 0.75 * (cH / cW) * TAB_L_RATIO);
}
export function ipadW(cW: number, cH: number, clamp = 0.75) {
return Math.min(clamp, 0.72 * (cH / cW) * IPAD_RATIO);
}
// ---------- Themes ----------
export const DEFAULT_THEME_ID: ThemeId = "clean-light";
export const THEMES: Record<string, Theme> = {
"clean-light": {
id: "clean-light",
name: "Clean Light",
bg: "#F6F1EA",
bgAlt: "#171717",
fg: "#171717",
fgAlt: "#F6F1EA",
accent: "#5B7CFA",
muted: "#6B7280",
},
"dark-bold": {
id: "dark-bold",
name: "Dark Bold",
bg: "#0B1020",
bgAlt: "#F8FAFC",
fg: "#F8FAFC",
fgAlt: "#0B1020",
accent: "#8B5CF6",
muted: "#94A3B8",
},
"warm-editorial": {
id: "warm-editorial",
name: "Warm Editorial",
bg: "#F7E8DA",
bgAlt: "#2B1D17",
fg: "#2B1D17",
fgAlt: "#F7E8DA",
accent: "#D97706",
muted: "#7C5A47",
},
"ocean-fresh": {
id: "ocean-fresh",
name: "Ocean Fresh",
bg: "#E0F2FE",
bgAlt: "#0C4A6E",
fg: "#0C4A6E",
fgAlt: "#E0F2FE",
accent: "#0284C7",
muted: "#475569",
},
"bloom-roast": {
id: "bloom-roast",
name: "Bloom Roast",
bg: "#F2ECE2",
bgAlt: "#24352F",
fg: "#1D2420",
fgAlt: "#FFF7EA",
accent: "#B8794A",
muted: "#65736B",
},
};
export function themeById(themeId: string | undefined): Theme {
return THEMES[themeId || ""] || THEMES[DEFAULT_THEME_ID];
}
export function hasTheme(themeId: string | undefined): boolean {
return !!themeId && !!THEMES[themeId];
}
export const STORAGE_KEY = "app-store-screenshots:project:v1";
export const PROJECT_SCHEMA_VERSION = 2;
export const DEVICE_LABEL: Record<Device, string> = {
iphone: "iPhone",
ipad: "iPad",
android: "Android Phone",
"android-7": 'Android 7" Tablet',
"android-10": 'Android 10" Tablet',
"feature-graphic": "Feature Graphic",
};
// Friendly labels for slide layouts (used in dropdowns)
export const LAYOUT_LABEL: Record<SlideLayout, string> = {
hero: "Hero",
"device-bottom": "Device bottom",
"device-top": "Device top",
"two-devices": "Two devices",
"no-device": "No device",
"split-landscape": "Split (landscape)",
"feature-graphic": "Feature graphic",
};
// Short description shown under each layout name
export const LAYOUT_HINT: Record<SlideLayout, string> = {
hero: "Headline above, device at bottom",
"device-bottom": "Headline top, device anchored below",
"device-top": "Flipped — device on top",
"two-devices": "Layered back + front phones",
"no-device": "Big standalone headline",
"split-landscape": "Caption left, device right",
"feature-graphic": "1024×500 Play Store banner",
};
template/src/lib/defaults.ts
import { DEFAULT_LOCALE } from "./locale";
import { DEFAULT_THEME_ID, PROJECT_SCHEMA_VERSION } from "./constants";
import type { Device, ProjectState, Slide } from "./types";
let _id = 0;
export const nid = () => `s_${Date.now().toString(36)}_${(_id++).toString(36)}`;
const en = (s: string) => ({ [DEFAULT_LOCALE]: s });
function makeStarterSlides(): Slide[] {
return [
{
id: nid(),
layout: "hero",
label: en("MEET YOUR APP"),
headline: en("Sell one\nidea per slide."),
screenshot: "",
},
{
id: nid(),
layout: "device-bottom",
label: en("FEATURE 01"),
headline: en("Your headline\nlives here."),
screenshot: "",
},
{
id: nid(),
layout: "two-devices",
label: en("FEATURE 02"),
headline: en("Show two\nscreens at once."),
screenshot: "",
screenshotSecondary: "",
},
{
id: nid(),
layout: "device-top",
label: en("FEATURE 03"),
headline: en("Flip the contrast\nfor visual rhythm."),
screenshot: "",
inverted: true,
},
{
id: nid(),
layout: "no-device",
label: en("MORE"),
headline: en("And so\nmuch more."),
screenshot: "",
},
];
}
function ipadStarter(): Slide[] {
return [
{
id: nid(),
layout: "hero",
label: en("MEET YOUR APP"),
headline: en("Made for\nthe big screen."),
screenshot: "",
},
{
id: nid(),
layout: "device-bottom",
label: en("FEATURE 01"),
headline: en("Built for\nfocus."),
screenshot: "",
},
{
id: nid(),
layout: "device-top",
label: en("FEATURE 02"),
headline: en("Always within reach."),
screenshot: "",
inverted: true,
},
];
}
function tabletStarter(kind: "7" | "10"): Slide[] {
return [
{
id: nid(),
layout: "hero",
label: en("MEET YOUR APP"),
headline: en(kind === "7" ? "Pocket-sized\npower." : "Made for\nthe big screen."),
screenshot: "",
},
{
id: nid(),
layout: "split-landscape",
label: en("FEATURE 01"),
headline: en("Wide canvas,\nbigger ideas."),
screenshot: "",
},
];
}
function fgStarter(): Slide[] {
return [
{
id: nid(),
layout: "feature-graphic",
label: {},
headline: en("Your tagline goes here."),
screenshot: "",
},
];
}
export const DEFAULT_PROJECT: ProjectState = {
schemaVersion: PROJECT_SCHEMA_VERSION,
appName: "My App",
themeId: DEFAULT_THEME_ID,
connectedCanvas: true,
locales: [DEFAULT_LOCALE],
locale: DEFAULT_LOCALE,
device: "iphone",
orientation: "portrait",
appIcon: "",
slidesByDevice: {
iphone: makeStarterSlides(),
android: makeStarterSlides(),
ipad: ipadStarter(),
"android-7": tabletStarter("7"),
"android-10": tabletStarter("10"),
"feature-graphic": fgStarter(),
},
};
export function newSlide(layout: Slide["layout"] = "device-bottom"): Slide {
return {
id: nid(),
layout,
label: en("NEW"),
headline: en("Edit this\nheadline."),
screenshot: "",
};
}
export function detectPlatform(device: Device): "ios" | "android" {
return device === "iphone" || device === "ipad" ? "ios" : "android";
}
template/src/lib/elements.ts
import type { BuiltInElementId, ElementId, TextElementId } from "./types";
export const BUILT_IN_ELEMENT_IDS: BuiltInElementId[] = [
"caption",
"device",
"deviceSecondary",
];
export const TEXT_ELEMENT_PREFIX = "text:";
export function isBuiltInElementId(id: ElementId | string): id is BuiltInElementId {
return (BUILT_IN_ELEMENT_IDS as string[]).includes(id);
}
export function isTextElementId(id: ElementId | string | null | undefined): id is TextElementId {
return typeof id === "string" && id.startsWith(TEXT_ELEMENT_PREFIX);
}
export function toTextElementId(id: string): TextElementId {
return `${TEXT_ELEMENT_PREFIX}${id}` as TextElementId;
}
export function textElementKey(id: TextElementId | ElementId): string {
return isTextElementId(id) ? id.slice(TEXT_ELEMENT_PREFIX.length) : id;
}
template/src/lib/image-cache.ts
"use client";
// Pre-loads images as base64 data URIs so html-to-image exports without
// non-deterministic image fetch races. Always use img(path) in render.
const cache = new Map<string, string>();
const failed = new Set<string>();
async function fetchAsDataUrl(path: string): Promise<string | null> {
try {
const resp = await fetch(path);
if (!resp.ok) return null;
const blob = await resp.blob();
return await new Promise<string>((resolve, reject) => {
const reader = new FileReader();
reader.onloadend = () => resolve(reader.result as string);
reader.onerror = reject;
reader.readAsDataURL(blob);
});
} catch {
return null;
}
}
export async function preloadImages(
paths: string[],
options: { retryFailed?: boolean } = {},
): Promise<void> {
await Promise.all(
paths
.filter(Boolean)
.filter((p) => !cache.has(p) && (options.retryFailed || !failed.has(p)))
.map(async (p) => {
const data = await fetchAsDataUrl(p);
if (data) {
cache.set(p, data);
failed.delete(p);
} else {
failed.add(p);
}
}),
);
}
export function img(path: string | undefined): string {
if (!path) return "";
if (path.startsWith("data:")) return path;
if (failed.has(path)) return "";
return cache.get(path) || path;
}
export function setImage(path: string, dataUrl: string) {
cache.set(path, dataUrl);
failed.delete(path);
}
export function didFail(path: string | undefined): boolean {
if (!path) return false;
if (path.startsWith("data:")) return false;
return failed.has(path);
}
template/src/lib/locale.ts
import type { LocalizedText } from "./types";
export const DEFAULT_LOCALE = "en";
// Read the value for `locale` from a localized field. Falls back to en, then to
// the first locale that has a non-empty value, then to empty string. Used by
// the canvas/preview/thumb so switching to a locale the user hasn't filled in
// shows the source copy instead of blanks.
export function pickText(field: LocalizedText | undefined, locale: string): string {
if (!field) return "";
const direct = field[locale];
if (direct && direct.length) return direct;
const en = field[DEFAULT_LOCALE];
if (en && en.length) return en;
for (const k of Object.keys(field)) {
const v = field[k];
if (v && v.length) return v;
}
return "";
}
// Replace `{locale}` placeholders in a screenshot path. Data URLs and empty
// strings pass through unchanged.
export function resolveScreenshot(path: string | undefined, locale: string): string {
if (!path) return "";
if (path.startsWith("data:")) return path;
if (!path.includes("{locale}")) return path;
return path.replace(/\{locale\}/g, locale);
}
// Convert legacy `string` headline/label fields to the per-locale shape. Safe
// to call on already-migrated data.
export function coerceLocalized(value: unknown): LocalizedText {
if (typeof value === "string") return { [DEFAULT_LOCALE]: value };
if (value && typeof value === "object") return value as LocalizedText;
return {};
}
// Set or clear the value for `locale` on a localized field. Empty values delete
// the key so the persisted JSON stays free of "" placeholders.
export function writeLocalized(
field: LocalizedText | undefined,
locale: string,
value: string,
): LocalizedText {
const next: LocalizedText = { ...(field || {}) };
if (value.length === 0) delete next[locale];
else next[locale] = value;
return next;
}
template/src/lib/storage.ts
"use client";
import { useCallback, useEffect, useRef, useState } from "react";
import { PROJECT_SCHEMA_VERSION, STORAGE_KEY } from "./constants";
import { DEFAULT_PROJECT } from "./defaults";
import { coerceLocalized } from "./locale";
import type { Device, ElementTransform, ProjectState, Slide, TextElement } from "./types";
const HISTORY_LIMIT = 50;
// Coalesce rapid edits (typing, slider drags) into a single undo step.
const COALESCE_MS = 500;
// Debounce file/localStorage writes — frequent enough to feel instant, infrequent enough not to thrash disk.
const SAVE_DEBOUNCE_MS = 600;
function cleanTransform(value: unknown): ElementTransform | undefined {
if (!value || typeof value !== "object") return undefined;
const raw = value as Partial<ElementTransform>;
const required = [raw.x, raw.y, raw.width, raw.height];
if (!required.every((n) => typeof n === "number" && Number.isFinite(n))) return undefined;
return {
x: raw.x!,
y: raw.y!,
width: Math.max(1, raw.width!),
height: Math.max(1, raw.height!),
...(typeof raw.rotation === "number" && Number.isFinite(raw.rotation)
? { rotation: raw.rotation }
: {}),
...(typeof raw.zIndex === "number" && Number.isFinite(raw.zIndex)
? { zIndex: raw.zIndex }
: {}),
};
}
function cleanTextElement(value: unknown): TextElement | undefined {
if (!value || typeof value !== "object") return undefined;
const raw = value as Partial<TextElement>;
if (typeof raw.id !== "string" || !raw.id.trim()) return undefined;
const transform = cleanTransform(raw.transform);
if (!transform) return undefined;
return {
id: raw.id,
text: coerceLocalized(raw.text as unknown),
transform,
...(typeof raw.fontSize === "number" && Number.isFinite(raw.fontSize)
? { fontSize: raw.fontSize }
: {}),
...(typeof raw.fontWeight === "number" && Number.isFinite(raw.fontWeight)
? { fontWeight: raw.fontWeight }
: {}),
...(typeof raw.color === "string" ? { color: raw.color } : {}),
...(raw.align === "left" || raw.align === "center" || raw.align === "right"
? { align: raw.align }
: {}),
};
}
// Migrate older projects into the current schema while keeping legacy decks
// visually stable until they explicitly opt into connected canvas.
function migrateSlide(slide: Slide): Slide {
const transforms = slide.transforms
? Object.fromEntries(
Object.entries(slide.transforms)
.map(([id, transform]) => [id, cleanTransform(transform)])
.filter((entry): entry is [string, ElementTransform] => !!entry[1]),
)
: undefined;
const textElements = Array.isArray(slide.textElements)
? slide.textElements.map(cleanTextElement).filter((t): t is TextElement => !!t)
: undefined;
return {
...slide,
label: coerceLocalized(slide.label as unknown),
headline: coerceLocalized(slide.headline as unknown),
...(transforms && Object.keys(transforms).length > 0 ? { transforms } : { transforms: undefined }),
...(textElements && textElements.length > 0 ? { textElements } : { textElements: undefined }),
};
}
function mergeWithDefaults(parsed: Partial<ProjectState>): ProjectState {
const connectedCanvas =
typeof parsed.connectedCanvas === "boolean"
? parsed.connectedCanvas
: false;
const themeId =
typeof parsed.themeId === "string" && parsed.themeId.trim()
? parsed.themeId
: DEFAULT_PROJECT.themeId;
const slidesByDevice = parsed.slidesByDevice
? Object.fromEntries(
Object.entries(parsed.slidesByDevice).map(([device, slides]) => [
device,
Array.isArray(slides) ? slides.map((slide) => migrateSlide(slide as Slide)) : [],
]),
)
: {};
const merged: ProjectState = {
...DEFAULT_PROJECT,
...parsed,
schemaVersion: PROJECT_SCHEMA_VERSION,
themeId,
connectedCanvas,
slidesByDevice: {
...DEFAULT_PROJECT.slidesByDevice,
...slidesByDevice,
} as ProjectState["slidesByDevice"],
};
// Clamp the active locale into the project's locale list so a stale
// `locale` (e.g. from a project that dropped languages) doesn't show blank.
if (!merged.locales || merged.locales.length === 0) {
merged.locales = [...DEFAULT_PROJECT.locales];
}
if (!merged.locales.includes(merged.locale)) {
merged.locale = merged.locales[0];
}
return merged;
}
function loadFromLocalStorage(): ProjectState | null {
if (typeof window === "undefined") return null;
try {
const raw = window.localStorage.getItem(STORAGE_KEY);
if (!raw) return null;
return mergeWithDefaults(JSON.parse(raw) as Partial<ProjectState>);
} catch {
return null;
}
}
async function loadFromFile(): Promise<
{ ok: true; state: ProjectState | null } | { ok: false; error: string }
> {
if (typeof window === "undefined") return { ok: false, error: "Window is not available" };
try {
const resp = await fetch("/api/project", { cache: "no-store" });
if (!resp.ok) return { ok: false, error: `HTTP ${resp.status}` };
const json = (await resp.json()) as { ok: boolean; state: Partial<ProjectState> | null };
if (!json.ok) return { ok: false, error: "Project response was not ok" };
if (!json.state) return { ok: true, state: null };
return { ok: true, state: mergeWithDefaults(json.state) };
} catch {
return { ok: false, error: "Project file could not be loaded" };
}
}
function saveToLocalStorage(state: ProjectState): { ok: true } | { ok: false; error: string } {
if (typeof window === "undefined") return { ok: true };
try {
window.localStorage.setItem(STORAGE_KEY, JSON.stringify(state));
return { ok: true };
} catch (e) {
const msg = e instanceof Error ? e.message : String(e);
return { ok: false, error: msg };
}
}
async function saveToFile(state: ProjectState): Promise<{ ok: true } | { ok: false; error: string }> {
if (typeof window === "undefined") return { ok: true };
try {
const resp = await fetch("/api/project", {
method: "POST",
headers: { "content-type": "application/json" },
body: JSON.stringify(state),
});
if (!resp.ok) {
return { ok: false, error: `HTTP ${resp.status}` };
}
const json = (await resp.json()) as { ok: boolean; error?: string };
if (!json.ok) return { ok: false, error: json.error || "Unknown error" };
return { ok: true };
} catch (e) {
return { ok: false, error: e instanceof Error ? e.message : String(e) };
}
}
type Updater = ProjectState | ((prev: ProjectState) => ProjectState);
function applyUpdater(updater: Updater, prev: ProjectState): ProjectState {
return typeof updater === "function" ? updater(prev) : updater;
}
export function useProject() {
const [state, _setState] = useState<ProjectState>(DEFAULT_PROJECT);
const [hydrated, setHydrated] = useState(false);
const [fileReady, setFileReady] = useState(false);
const [savedAt, setSavedAt] = useState<number | null>(null);
const [saveError, setSaveError] = useState<string | null>(null);
const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
// History stacks live in refs — they don't drive any rendered UI, so
// mutating them never needs to re-render.
const pastRef = useRef<ProjectState[]>([]);
const futureRef = useRef<ProjectState[]>([]);
const lastPushAt = useRef(0);
// Hydrate: prefer file (git-tracked) → localStorage (cache) → defaults.
// localStorage is consulted first for instant paint, then file overwrites if present.
useEffect(() => {
let cancelled = false;
const cached = loadFromLocalStorage();
if (cached) _setState(cached);
void (async () => {
const fromFile = await loadFromFile();
if (cancelled) return;
if (fromFile.ok) {
if (fromFile.state) {
_setState(fromFile.state);
} else {
_setState(DEFAULT_PROJECT);
}
setFileReady(true);
} else {
setFileReady(false);
setSaveError(fromFile.error);
}
pastRef.current = [];
futureRef.current = [];
lastPushAt.current = 0;
setHydrated(true);
})();
return () => {
cancelled = true;
};
}, []);
// Debounced autosave to BOTH localStorage (fast, offline) and file (git-trackable).
useEffect(() => {
if (!hydrated || !fileReady) return;
if (timer.current) clearTimeout(timer.current);
timer.current = setTimeout(() => {
const localResult = saveToLocalStorage(state);
void saveToFile(state).then((fileResult) => {
if (fileResult.ok && localResult.ok) {
setSavedAt(Date.now());
setSaveError(null);
} else if (!fileResult.ok && !localResult.ok) {
setSaveError(fileResult.error);
} else if (!fileResult.ok) {
// Local cache succeeded but file save failed — work isn't git-portable yet.
setSavedAt(Date.now());
setSaveError(`File save failed: ${fileResult.error}`);
} else {
setSavedAt(Date.now());
setSaveError(localResult.ok ? null : localResult.error);
}
});
}, SAVE_DEBOUNCE_MS);
return () => {
if (timer.current) clearTimeout(timer.current);
};
}, [state, hydrated, fileReady]);
const setState = useCallback((updater: Updater) => {
_setState((prev) => {
const next = applyUpdater(updater, prev);
if (next === prev) return prev;
const now = Date.now();
if (now - lastPushAt.current > COALESCE_MS) {
pastRef.current.push(prev);
if (pastRef.current.length > HISTORY_LIMIT) pastRef.current.shift();
futureRef.current.length = 0;
}
lastPushAt.current = now;
return next;
});
}, []);
const undo = useCallback(() => {
_setState((cur) => {
const prev = pastRef.current.pop();
if (prev === undefined) return cur;
futureRef.current.push(cur);
// Reset coalescing so the next edit after an undo creates a fresh history entry.
lastPushAt.current = 0;
return prev;
});
}, []);
const redo = useCallback(() => {
_setState((cur) => {
const next = futureRef.current.pop();
if (next === undefined) return cur;
pastRef.current.push(cur);
lastPushAt.current = 0;
return next;
});
}, []);
const reset = useCallback(() => {
setState(DEFAULT_PROJECT);
}, [setState]);
const resetDevice = useCallback((device: Device) => {
setState((prev) => ({
...prev,
slidesByDevice: {
...prev.slidesByDevice,
[device]: DEFAULT_PROJECT.slidesByDevice[device],
},
}));
}, [setState]);
return {
state,
setState,
hydrated,
savedAt,
saveError,
reset,
resetDevice,
undo,
redo,
};
}
template/src/lib/types.ts
export type Device =
| "iphone"
| "ipad"
| "android"
| "android-7"
| "android-10"
| "feature-graphic";
export type Orientation = "portrait" | "landscape";
export type Platform = "ios" | "android";
// Layouts the editor can render. Vary across slides for visual rhythm.
export type SlideLayout =
| "hero" // centered device, headline above
| "device-bottom" // headline top, device bottom-center
| "device-top" // device top, headline bottom (contrast)
| "two-devices" // back + front phones, headline above
| "no-device" // big headline + decorative blob, no device
| "split-landscape" // landscape tablets only: caption left + device right
| "feature-graphic"; // 1024×500 banner with icon + name + tagline
// Per-element rect in canvas pixel space. Optional rotation in degrees and zIndex.
export type ElementTransform = {
x: number;
y: number;
width: number;
height: number;
rotation?: number;
zIndex?: number;
};
export type BuiltInElementId = "caption" | "device" | "deviceSecondary";
export type TextElementId = `text:${string}`;
export type ElementId = BuiltInElementId | TextElementId;
export type SelectedElement = {
slideId: string;
elementId: ElementId;
};
// Per-locale text keyed by locale code (e.g. "en", "de"). A locale is absent
// if the user hasn't typed anything for it; renderers fall back to en (see
// lib/locale.ts). The set of locales a project targets lives on
// ProjectState.locales.
export type LocalizedText = Partial<Record<string, string>>;
export type TextElement = {
id: string;
text: LocalizedText;
transform: ElementTransform;
fontSize?: number;
fontWeight?: number;
color?: string;
align?: "left" | "center" | "right";
};
export type Slide = {
id: string;
layout: SlideLayout;
label: LocalizedText; // tiny uppercase caption above headline, per locale
headline: LocalizedText; // multi-line; newlines are intentional, per locale
screenshot: string; // path under /screenshots/ — may contain {locale}
screenshotSecondary?: string; // for two-devices layout — may contain {locale}
inverted?: boolean; // dark background variant
// Per-element overrides; when present, replaces layout default placement.
transforms?: Partial<Record<BuiltInElementId, ElementTransform>>;
textElements?: TextElement[];
};
export type ThemeId =
| "clean-light"
| "dark-bold"
| "warm-editorial"
| "ocean-fresh"
| "bloom-roast";
export type Theme = {
id: string;
name: string;
bg: string; // primary background
bgAlt: string; // inverted background
fg: string; // text on bg
fgAlt: string; // text on bgAlt
accent: string;
muted: string;
};
export type ProjectState = {
schemaVersion?: number;
appName: string;
themeId: string;
// v1 projects render as isolated screens until the user opts into connected crops.
connectedCanvas: boolean;
// Locales this project targets. Drives the toolbar dropdown and bulk export.
// Single-locale projects ship as ["en"] and hide the locale UI.
locales: string[];
locale: string;
device: Device;
orientation: Orientation;
// Per-device slide decks so platform switching preserves work
slidesByDevice: Record<Device, Slide[]>;
appIcon?: string; // path under /public (e.g. /app-icon.png)
};
template/src/lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}
template/tailwind.config.ts
import type { Config } from "tailwindcss";
const config: Config = {
darkMode: ["class"],
content: ["./src/**/*.{ts,tsx}"],
theme: {
container: { center: true, padding: "2rem", screens: { "2xl": "1400px" } },
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
},
borderRadius: {
lg: "var(--radius)",
md: "calc(var(--radius) - 2px)",
sm: "calc(var(--radius) - 4px)",
},
keyframes: {
"accordion-down": {
from: { height: "0" },
to: { height: "var(--radix-accordion-content-height)" },
},
"accordion-up": {
from: { height: "var(--radix-accordion-content-height)" },
to: { height: "0" },
},
},
animation: {
"accordion-down": "accordion-down 0.2s ease-out",
"accordion-up": "accordion-up 0.2s ease-out",
},
},
},
plugins: [require("tailwindcss-animate")],
};
export default config;
template/tsconfig.json
{
"compilerOptions": {
"target": "ES2022",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
"noEmit": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "bundler",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [{ "name": "next" }],
"paths": { "@/*": ["./src/*"] }
},
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
"exclude": ["node_modules"]
}