8e:I[903690,["/chat-static/_next/static/immutable/chunks/19n90nb5xxg2t.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/0ya0e_15z9yqp.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/22n9earcnx5_-.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/3lht6quipswa6.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0kjwkfpw9virb.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1fpx_rz9_3g_2.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/28gt91dhqr8rr.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"ExplicitChatIdProvider"] 8f:I[838238,["/chat-static/_next/static/immutable/chunks/19n90nb5xxg2t.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/0ya0e_15z9yqp.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/22n9earcnx5_-.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/3lht6quipswa6.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0kjwkfpw9virb.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1fpx_rz9_3g_2.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/28gt91dhqr8rr.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"SWRDataProvider"] 90:Tbc86,[V0_FILE]typescriptreact:file="/components/ad-studio.tsx" 'use client' import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react' import { Crop, Download, FolderArchive, Loader2, Palette, Sparkles, ArrowRight, } from 'lucide-react' import { suggestComposition } from '@/lib/ad-composition' import { buildBulkZip, batchFileCount } from '@/lib/bulk-export' import { AD_HEIGHT, AD_WIDTH, FORMATS, SURFACES, TYPEFACES, brandSurface, cssFamily, ensureFonts, renderAd, type AdConfig, type AdFormat, type AdSurface, type AdTypeface, } from '@/lib/ad-template' import { DEMO_KIT, NEUTRAL_PLACEMENT, ROLE_META, allSources, availableRoles, defaultPlacement, pickImage, resolveSource, type BrandKit, type ImageRole, type ShotPlacement, } from '@/lib/brand-kit' import { extractAccent, readableInk, tint } from '@/lib/color' import { ColorPicker } from '@/components/color-picker' import { MobileDock, type DockSection } from '@/components/mobile-dock' import { OnboardingDrawer } from '@/components/onboarding-drawer' import { OnboardingTour } from '@/components/onboarding-tour' import { Button } from '@/components/ui/button' import { saveImage, downloadBlob } from '@/lib/save-image' /** * ONE MOTION VOCABULARY for the studio, so nothing feels hand-tuned per element. * * Everything that animates here is a STATE change (selection, hover, progress): * it should respond instantly and decelerate, so those all use a quick ease-out. * * The one LAYOUT change — switching ad format — is deliberately NOT animated. See * the note on the preview stage: an aspect-ratio change has no honest in-between * shape, so tweening it can only stretch or letterbox the artwork while the frame * catches up. The frame changes in a single paint, and the moment is softened by * crossfading the ARTWORK instead, which is a property that does have a real * middle state. */ const DISSOLVE_MS = 150 const EASE_OUT = 'cubic-bezier(0.33, 1, 0.68, 1)' /** * `useLayoutEffect` that degrades to `useEffect` on the server. * * This component is imported directly by a server page, so it gets server- * rendered; calling useLayoutEffect there would log React's "does nothing on the * server" warning. Layout effects never run during SSR anyway, so picking the * hook per environment is safe and keeps the console clean. */ const useIsomorphicLayoutEffect = typeof window !== 'undefined' ? useLayoutEffect : useEffect /** * Height reserved at the TOP and BOTTOM of the desktop stage for the wordmark * and the CTA, which both sit out of flow. * * It has to be symmetric: the artboard centres inside the stage, so an uneven * reserve would pull that centre off the panel's true middle. 96px holds the * 48px CTA with ~24px of clear air on either side of it. */ const CHROME_RESERVE = 96 /** Product placement (drag offset + scale), stored per shot-style × format. */ type Placement = ShotPlacement type Concept = { angle: string headline: string subhead: string imageRole: ImageRole } function loadImage(src: string): Promise { return new Promise((resolve, reject) => { const img = new Image() img.crossOrigin = 'anonymous' img.onload = () => resolve(img) img.onerror = reject img.src = src }) } function slugify(input: string): string { return ( input .toLowerCase() .replace(/[^a-z0-9]+/g, '-') .replace(/(^-|-$)/g, '') .slice(0, 48) || 'ad-creative' ) } /** Render a subhead's **highlighted** words as accent-colored bold spans. */ function ConceptSubhead({ text, accent }: { text: string; accent: string }) { const parts = text.split(/(\*\*[^*]+\*\*)/g).filter(Boolean) return ( <> {parts.map((p, i) => p.startsWith('**') && p.endsWith('**') ? ( {p.slice(2, -2)} ) : ( {p} ), )} ) } /** Matches Tailwind's `lg` breakpoint — below it we render the mobile app shell. */ function useIsMobile() { const [mobile, setMobile] = useState(false) useEffect(() => { const mq = window.matchMedia('(max-width: 1023px)') const update = () => setMobile(mq.matches) update() mq.addEventListener('change', update) return () => mq.removeEventListener('change', update) }, []) return mobile } export function AdStudio() { const isMobile = useIsMobile() const canvasRef = useRef(null) const ghostRef = useRef(null) const stageRef = useRef(null) const rafRef = useRef(0) const dragRef = useRef<{ startX: number; startY: number; baseX: number; baseY: number } | null>(null) // --- Brand kit + theme --------------------------------------------------- const [kit] = useState(DEMO_KIT) const [accent, setAccent] = useState(DEMO_KIT.accent) // --- Copy + layout state (copy is written entirely by the AI) ------------ const [headline, setHeadline] = useState('Build a website\nwithout writing code') const [subhead, setSubhead] = useState( 'A beginner course on building **professional websites** with v0 in plain English.', ) const [format, setFormat] = useState(FORMATS[0]) const [typeface, setTypeface] = useState('sans') // The stage's own box — only changes when the panel resizes, never on a // format switch — so the display size can be derived synchronously. const [stageBox, setStageBox] = useState<{ w: number; h: number }>({ w: 0, h: 0 }) // On mobile, whether a slide-up sheet is open (so we shrink the preview up). const [dockOpen, setDockOpen] = useState(false) // --- Product image + placement ------------------------------------------- const [imageCache, setImageCache] = useState>(new Map()) const [activeImageId, setActiveImageId] = useState(kit.images[0].id) // The manual picker is gone, but this is still chosen per concept by imageRole // (see applyConcept), and both placement keys and per-format source resolution // are keyed by it. Falls back to the first shot so a stale id can't blank the ad. const activeImage = kit.images.find((i) => i.id === activeImageId) ?? kit.images[0] // Placement is stored PER shot-style × format (key = "shot:format"), so // nudging or resizing one shot on — say — the 1:1 never moves any other shot, // and never touches that same shot on the other formats. const [placements, setPlacements] = useState>({}) const placeKey = `${activeImageId}:${format.id}` // Each crop states its OWN starting size per format (a wide establishing shot // and a square crop need very different scales to sit right on the same // canvas), so an untouched slot falls back to the crop's default rather than // one global number. Edits still win — they're stored under placeKey. const activeDefault = useMemo( () => defaultPlacement(activeImage.defaults, format.id), [activeImage, format.id], ) const placement = placements[placeKey] ?? activeDefault const photoX = placement.x const photoY = placement.y const photoScale = placement.scale const setPlacement = useCallback( (patch: Partial | ((cur: Placement) => Partial)) => { setPlacements((prev) => { const cur = prev[placeKey] ?? activeDefault const next = typeof patch === 'function' ? patch(cur) : patch return { ...prev, [placeKey]: { ...cur, ...next } } }) }, [placeKey, activeDefault], ) // --- Surfaces (neutrals + one brand-accent "Bold") ----------------------- const surfaces: AdSurface[] = useMemo(() => { const boldS = brandSurface(accent, readableInk(accent)) return [SURFACES[0], SURFACES[1], boldS, SURFACES[3]] }, [accent]) const [surfaceId, setSurfaceId] = useState('bone') const surface = surfaces.find((s) => s.id === surfaceId) ?? surfaces[0] // Tint the background pattern with the brand accent (vs. a neutral ink). const [tintedPattern, setTintedPattern] = useState(false) // --- Concepts (AI copywriter) -------------------------------------------- const [concepts, setConcepts] = useState([]) const [activeConcept, setActiveConcept] = useState(null) const [generating, setGenerating] = useState(false) const [conceptError, setConceptError] = useState(null) const startedRef = useRef(false) // --- Misc ---------------------------------------------------------------- const [fontsReady, setFontsReady] = useState(false) const [downloading, setDownloading] = useState(false) // Onboarding / "work with us" wizard drawer (nested in the middle panel). const [guideOpen, setGuideOpen] = useState(false) // --- Bulk export (high-volume: every concept × every shot × every size) --- const [bulkBusy, setBulkBusy] = useState(false) const [bulkProgress, setBulkProgress] = useState<{ done: number; total: number }>({ done: 0, total: 0 }) // Preload the kit's product shots, then auto-extract the brand accent from // the hero shot so the whole tool themes itself to the product. useEffect(() => { let alive = true // Keyed by SRC, not shot id: a shot can carry a different file per format, // and formats that share a file should share one decoded image. Promise.all( allSources(kit).map(async (src) => [src, await loadImage(src).catch(() => null)] as const), ).then((entries) => { if (!alive) return const map = new Map() for (const [src, el] of entries) if (el) map.set(src, el) setImageCache(map) const hero = map.get(pickImage(kit, 'hero').src) if (hero && !kit.lockAccent) setAccent(extractAccent(hero, kit.accent)) }) return () => { alive = false } }, [kit]) useEffect(() => { let alive = true ensureFonts().then(() => { if (alive) setFontsReady(true) }) return () => { alive = false } }, []) // The active shot resolves to the file composed for the CURRENT format, so // switching size swaps in the crop framed for that canvas. const photo: HTMLImageElement | null = useMemo(() => { const img = kit.images.find((i) => i.id === activeImageId) if (!img) return null return imageCache.get(resolveSource(img, format.id)) ?? imageCache.get(img.src) ?? null }, [kit.images, activeImageId, format.id, imageCache]) const composition = useMemo( () => suggestComposition({ headline, subhead, format }), [headline, subhead, format], ) const config: AdConfig = useMemo( () => ({ headline, subhead, surface, format, typeface, headlineScale: composition.headline / 100, subheadScale: composition.subhead / 100, textOffsetY: composition.offset, // On the Bold (accent) surface the highlight would vanish; fall back to // the surface's own contrast ink there. highlight: surface.id === 'bold' ? undefined : accent, photo, photoScale, photoX, photoY, grounded: false, tintedPattern, }), [headline, subhead, surface, format, typeface, composition, accent, photo, photoScale, photoX, photoY, tintedPattern], ) const draw = useCallback(() => { const canvas = canvasRef.current if (!canvas) return renderAd(canvas, config) }, [config]) useEffect(() => { if (!fontsReady) return cancelAnimationFrame(rafRef.current) rafRef.current = requestAnimationFrame(draw) return () => cancelAnimationFrame(rafRef.current) // `isMobile` is included so the freshly-mounted canvas redraws when we // swap between the mobile shell and the desktop workspace. }, [draw, fontsReady, isMobile]) // The frame's new size is applied in the same commit as the format change, but // the redraw above is queued in a rAF from a passive effect — i.e. a frame // AFTER the browser paints. That one frame is enough to show the new frame // shape still holding the old artwork, which is the flicker that made a format // switch look broken. Drawing here instead, keyed on the canvas geometry, puts // the bitmap and the frame in the SAME paint. // // Only geometry changes take this path. Continuous edits (typing, dragging the // photo) stay on the rAF above, which coalesces them to one draw per frame — // routing those through a layout effect would block paint on every keystroke. // The rAF is cancelled first so the queued draw can't duplicate this one. // // The switch is also where the crossfade starts, and it has to be captured // HERE, in the same synchronous block, because `draw()` resizes the canvas and // resizing a canvas erases it — a frame later the outgoing artwork is simply // gone. Copying canvas-to-canvas (rather than toDataURL) keeps that cheap // enough to do before paint: it's a blit, not a PNG encode. const lastGeometry = useRef('') useIsomorphicLayoutEffect(() => { if (!fontsReady) return const geometry = `${format.width}x${format.height}` // A first paint has no previous artwork to fade FROM, so it just draws. This // also keeps the initial load from dissolving in, which would misread as the // page still loading. const isFirstDraw = lastGeometry.current === '' if (geometry === lastGeometry.current) return lastGeometry.current = geometry const main = canvasRef.current const ghost = ghostRef.current const ghostCtx = ghost?.getContext('2d') const dissolve = !isFirstDraw && main !== null && ghost !== null && ghostCtx != null && main.width > 0 && // Reduced motion gets the instant switch: the crossfade is decorative, and // the honest, already-correct result is a better answer than a damped one. !window.matchMedia('(prefers-reduced-motion: reduce)').matches if (dissolve) { ghost.width = main.width ghost.height = main.height ghostCtx.drawImage(main, 0, 0) ghost.style.transition = 'none' ghost.style.opacity = '1' } cancelAnimationFrame(rafRef.current) draw() if (dissolve) { // Reading a layout property flushes the style change above, so the browser // commits opacity:1 and can use it as the transition's start value. Without // that read, setting 1 and then 0 in one block collapses to a no-op — the // browser only ever sees the final value and there's nothing to animate. // // This is preferred over arming the fade in a requestAnimationFrame purely // because it's synchronous: the fade is set up in the same commit as the // resize, so the two can't drift apart. Measured, both approaches hold full // opacity for the same ~2 frames, since a transition's first frame IS its // start value — a dissolve has to begin on the outgoing image. void ghost.offsetHeight ghost.style.transition = `opacity ${DISSOLVE_MS}ms ${EASE_OUT}` ghost.style.opacity = '0' } }, [draw, fontsReady, format.width, format.height]) // Font-load safety net: a canvas frame can be drawn before the selected // typeface is actually usable by the 2D context, which makes measureText fall // back and collapses the type to its minimum size. Whenever the typeface // changes we force-load its real family and redraw AFTER it resolves — we do // NOT trust fonts.check() (it can report true before the canvas can use the // face), so we always schedule at least one post-load redraw. useEffect(() => { if (typeof document === 'undefined') return const family = cssFamily(typeface === 'serif' ? 'Source Serif 4' : 'Geist') let cancelled = false Promise.all([ document.fonts.load(`600 104px ${family}`), document.fonts.load(`500 50px ${family}`), document.fonts.load(`400 50px ${family}`), ]) .then(() => document.fonts.ready) .then(() => { if (!cancelled) requestAnimationFrame(draw) }) .catch(() => {}) return () => { cancelled = true } }, [typeface, draw]) // Measure only the stage box (independent of format) so switching formats // doesn't re-run the observer or lag a frame behind. useEffect(() => { const el = stageRef.current if (!el) return const measure = () => { const rect = el.getBoundingClientRect() if (rect.width && rect.height) setStageBox({ w: rect.width, h: rect.height }) } measure() const ro = new ResizeObserver(measure) ro.observe(el) return () => ro.disconnect() // Re-attach when swapping between the mobile shell and desktop workspace — // the stage is a different DOM node in each branch. }, [isMobile]) // Derive the display size synchronously from the stage box + format, so the // wrapper's width/height update in the SAME render as a format change and the // CSS transition animates once, cleanly — no snap, no lagging frame. const display = useMemo(() => { if (!stageBox.w || !stageBox.h) return { w: 0, h: 0 } // Hold the WIDTH constant across the PORTRAIT formats so switching between // them only animates the HEIGHT — a far cleaner CSS-grid morph. The width is // capped so even the tallest (9:16) still fits the stage height. const maxRatio = Math.max(...FORMATS.map((f) => f.height / f.width)) // The stage spans the WHOLE panel so the artboard centres on the panel's // exact vertical middle. The wordmark and CTA are out of flow, so their // room is reserved here instead — symmetrically, because an uneven reserve // would shift that centre. Reserving real pixels also beats the old blanket // 0.8 inset, which shrank the WIDTH too even though nothing sits beside the // creative. const availH = isMobile ? stageBox.h : Math.max(160, stageBox.h - CHROME_RESERVE * 2) const INSET = isMobile ? 0.94 : 0.96 const portraitW = Math.min(stageBox.w, availH / maxRatio) * INSET // A landscape format is WIDER than it is tall, so that shared portrait width // would leave it tiny in a mostly-empty stage. Let it use the full stage // width instead (still bounded by its own height so it can't overflow). const ratio = format.height / format.width const w = ratio < 1 ? Math.min(stageBox.w * INSET, (availH * INSET) / ratio) : portraitW const h = w * ratio return { w: Math.round(w), h: Math.round(h) } }, [stageBox, format, isMobile]) // --- Concept generation -------------------------------------------------- const generateConcepts = useCallback( async (more: boolean) => { setGenerating(true) setConceptError(null) try { const res = await fetch('/api/concepts', { method: 'POST', headers: { 'content-type': 'application/json' }, body: JSON.stringify({ productName: kit.productName, category: kit.category, description: kit.description, benefits: kit.benefits, regulated: kit.regulated, count: 10, roles: availableRoles(kit).map((r) => ({ role: r, brief: ROLE_META[r].brief })), exclude: more ? concepts.map((c) => c.angle) : [], }), }) const data = await res.json() if (!res.ok || !Array.isArray(data.concepts)) throw new Error(data?.error ?? 'failed') // A fresh batch always REPLACES the previous set ("more" only means the // old angles ride along as an exclude list so nothing repeats). setConcepts(data.concepts) setActiveConcept(null) } catch { setConceptError('Could not write concepts. Try again.') } finally { setGenerating(false) } }, [kit, concepts], ) // Auto-write the first batch on load so the tool opens full of ideas. useEffect(() => { if (startedRef.current) return startedRef.current = true generateConcepts(false) }, [generateConcepts]) const applyConcept = useCallback( (c: Concept, index: number) => { setHeadline(c.headline) setSubhead(c.subhead) // Placement is per shot-style × format, so we deliberately DON'T reset it // here — each shot keeps whatever position/size you last gave it. const img = pickImage(kit, c.imageRole) setActiveImageId(img.id) setActiveConcept(index) }, [kit], ) // The first time concepts land, load one onto the canvas automatically so the // studio always shows real, on-brand copy (there is no manual writing here). useEffect(() => { if (concepts.length > 0 && activeConcept === null) applyConcept(concepts[0], 0) }, [concepts, activeConcept, applyConcept]) // --- Export -------------------------------------------------------------- const download = useCallback(async () => { const canvas = canvasRef.current if (!canvas) return setDownloading(true) try { const blob = await new Promise((resolve) => canvas.toBlob(resolve, 'image/png')) if (!blob) return const angle = activeConcept != null ? concepts[activeConcept].angle : headline const filename = `${slugify(kit.productName)}_${slugify(angle)}_${format.label.replace(':', 'x')}_${format.width}x${format.height}.png` await saveImage(blob, filename) } finally { setDownloading(false) } }, [activeConcept, concepts, headline, kit.productName, format]) // High-volume batch: every concept × every source image, each in every size. const bulkAds = concepts.length * kit.images.length const bulkFiles = batchFileCount(concepts.length, kit.images.length) const runBulkExport = useCallback(async () => { if (bulkBusy || concepts.length === 0) return setBulkBusy(true) setBulkProgress({ done: 0, total: bulkFiles }) try { const blob = await buildBulkZip({ productName: kit.productName, surface, accent, typeface, tintedPattern, shots: kit.images.map((img) => ({ role: img.id, label: img.label, photo: imageCache.get(img.src) ?? null, // Give the batch the same per-format crops the preview uses. photos: Object.fromEntries( FORMATS.map((f) => [f.id, imageCache.get(resolveSource(img, f.id)) ?? null]), ), defaults: img.defaults, })), variants: concepts.map((c) => ({ angle: c.angle, headline: c.headline, subhead: c.subhead, })), onProgress: (done, total) => setBulkProgress({ done, total }), }) downloadBlob(blob, `${slugify(kit.productName)}-ads-${bulkAds}x${FORMATS.length}sizes.zip`) } finally { setBulkBusy(false) } }, [bulkBusy, concepts, bulkFiles, bulkAds, surface, accent, typeface, tintedPattern, kit, imageCache]) // Drag to reposition the product const onPointerDown = useCallback( (e: React.PointerEvent) => { if (!photo) return e.currentTarget.setPointerCapture(e.pointerId) dragRef.current = { startX: e.clientX, startY: e.clientY, baseX: photoX, baseY: photoY } }, [photo, photoX, photoY], ) const onPointerMove = useCallback((e: React.PointerEvent) => { const drag = dragRef.current if (!drag) return const rect = e.currentTarget.getBoundingClientRect() const scale = AD_WIDTH / rect.width setPlacement({ x: Math.round(drag.baseX + (e.clientX - drag.startX) * scale), y: Math.round(drag.baseY + (e.clientY - drag.startY) * scale), }) }, [setPlacement]) const onPointerUp = useCallback(() => { dragRef.current = null }, []) // The live canvas stage — shared by both the desktop panel and the mobile // full-bleed preview (only one branch mounts, so the single ref is safe). const previewStage = (

{/* A FORMAT SWITCH IS INSTANT, AND DELIBERATELY SO. It used to tween the frame's size over 420ms, which looked cheap for a reason worth keeping: changing 9:16 to 16:9 is not a uniform scale, so there is no honest in-between shape. Every intermediate frame either stretches the artwork or letterboxes it — and since the canvas re-renders at the new resolution immediately, what actually happened was the artwork snapping to its new shape while the frame crawled to catch up, with bands of background opening between them. Three parts (frame, artwork, and the CTA below, whose spacer is derived from the same size) each moved on their own clock, which is exactly why it read as separate pieces. Resizing an artboard is a discrete change, like switching frames in a design tool — those don't animate either. Everything now lands in ONE paint: the size is derived synchronously, and the bitmap is redrawn in a layout effect before the browser paints, so no frame ever shows the new shape holding the old artwork. What softens the moment is a crossfade of the ARTWORK (see the ghost layer below), never of the frame. Opacity has a real middle state; an aspect ratio does not. So the artboard is the new size on the first frame and the old design simply melts off it, which reads as the size having always been right rather than as something resizing. object-contain + bg-background stay as a cheap guarantee: if a redraw were ever a frame behind, the artwork would sit letterboxed at uniform scale on a solid fill rather than stretching or letting the dotted stage show through. At rest the frame matches the bitmap's aspect exactly, so contain is identical to fill. */} {/* data-tour sits on the ARTWORK, not the panel: the tour's first beat is about the ad itself, and spotlighting the whole column dims almost nothing, so the highlight has to hug the creative to mean anything. */}

) const formatCard = (

{/* No heading: the rows show a real canvas shape each, so a label above them only spends vertical room the pinned CTA needs. The radiogroup's aria-label carries the name for screen readers. */} {/* A radio LIST, not a grid of filled tiles. Two reasons it reads lighter: the selected row is marked by a small dot instead of a tinted block (a filled panel is a lot of visual weight to spend on "which of four"), and a vertical list gives each row room for the placement it's actually for, which the 2x2 had no space to say. The thumbnail sits on a white tile at the size's TRUE aspect ratio, so the row previews a real ad canvas — its shape and where the subject sits. Every source file is cut to its format's exact ratio, so object-cover fills the tile without cropping or distorting anything. */}

{FORMATS.map((f) => { const on = format.id === f.id const src = activeImage ? resolveSource(activeImage, f.id) : '' return ( ) })}

Typeface {/* Same radio-list treatment as Ad size — one selection pattern per card, so neither reads as more important than the other. */}

{TYPEFACES.map((tf) => { const on = typeface === tf.id return ( ) })}

) // The two primary actions are PINNED to the bottom of their panel as a // FULL-WIDTH BAR, with the panel's content scrolling behind them. Both are the // end of a long list (styling controls, ten concepts), so at any scroll // position the next step stays in reach instead of having to be hunted for. // // Why each piece is load-bearing: // - `-mx-4` cancels the aside's own gutter so the bar spans the panel edge to // edge and reads as part of the frame instead of a floating card. It lands // exactly on the padding box, so it never creates horizontal scroll, and the // aside's overflow clips its corners to the panel's radius for free. // - `p-4` matches the panel's own 16px gutter, so the button lines up with the // cards above it on every edge — the bar is full width, the button is not. // The button is shortened to absorb the extra inset, so the bar stays about // the same height as it was at 8px. // - the aside supplies NO bottom padding, so `bottom-0` alone sits flush; a // negative bottom margin would push the bar's border box below the // scrollport and get its lower edge clipped. // - `mt-auto` holds the bar on the bottom edge when content is short; sticky // takes over once it overflows. // - translucent + blur is what makes content read as passing BEHIND the bar // rather than stopping at an opaque wall. const pinnedCta = isMobile ? 'rounded-xl border border-border bg-card p-4' : 'sticky bottom-0 z-10 -mx-4 mt-auto border-t border-border bg-card/90 p-4 backdrop-blur-md' const exportCta = (

{bulkBusy && (

Rendering {bulkProgress.done}/{bulkProgress.total}…

)}

) const colorCard = (

{surfaces.map((s) => { const on = surface.id === s.id return ( ) })}

{/* Accent-tinted background pattern toggle */}

) const conceptsCard = (

{/* No heading — the concept cards are self-evidently copy, and dropping the label lets the list start higher so the CTA below it keeps its air. */} {generating && concepts.length === 0 ? (

{[0, 1, 2, 3].map((i) => (

))}

) : (

{concepts.map((c, i) => { const on = activeConcept === i return ( ) })}

)} {conceptError &&

{conceptError}

}

) const conceptsCta = (

{/* Black, like every other CTA in the template. This used to wear the eyedropper accent, which meant the one button colour on screen changed with the brand and no two exports of the template looked alike. The accent's job is the CREATIVE; the chrome stays constant. */}

) const mobileSections: DockSection[] = [ { id: 'copy', label: 'Copy', icon: Sparkles, // In a dock sheet the CTA isn't pinned (pinnedCta is empty on mobile), so // the two cards simply stack in reading order. node: (

{conceptsCard} {conceptsCta}

), dot: concepts.length > 0, }, { id: 'color', label: 'Color', icon: Palette, node: colorCard }, { id: 'format', label: 'Format', icon: Crop, node: formatCard }, { id: 'export', label: 'Export', icon: FolderArchive, node: exportCta }, ] const logoMark = ( // 20.7px = 15% up from text-lg's 18px. An arbitrary value rather than // text-xl (20px, only 11% up) so the step is exactly the one asked for. Stadics ) return (

{isMobile ? ( /* ---------- MOBILE: full-bleed preview + app dock + slide-up sheets ---------- */

{!dockOpen && {logoMark}} {previewStage}

) : ( /* ---------- DESKTOP: three-column workspace ---------- */

{/* The stage wears the same grey as the side panels so all three read as one set, and the same p-4 so the artboard is inset by exactly the amount the cards are in the other two. */}

{/* Out of flow, like the CTA below it. In flow it pushed the stage down, so the artboard centred on the space UNDER the wordmark rather than on the panel — reading as bottom-heavy. Its room is reserved inside the display calc instead. */}

{logoMark}

{previewStage} {/* The CTA is taken OUT of flow and centered in the band between the artboard's bottom edge and the panel's inner edge. In flow it sat hard against the bottom while the artboard kept equal slack above and below it, which read as bottom-heavy. No extra measurement is needed: the artboard is centered inside the measured stage box, so that band is exactly half the stage's leftover height — the same gap you see above the artboard. The floor keeps the button from ever overflowing up onto the artwork if the viewport gets short enough to leave no slack. */}

setGuideOpen(false)} accent={accent} isMobile={isMobile} />

)} {/* First-run spotlight tour (desktop only — that's where the CTA/drawer live) */}

) }87:["$","$L8e",null,{"chatId":"BRAwBtbEqlq","children":["$","$L8f",null,{"data":{"@\"active-block\",\"BRAwBtbEqlq\",":{"id":"b_apjLglmO3IA","messageId":"qwsn0t2ovNj2RMaYxZP6R7byPHKH6aC6","source":"$90","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","taskNameActive":"Correcting comment","taskNameComplete":"Corrected comment"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"BRAwBtbEqlq\",":true,"/chat/api/snapshots/proxy?blockId=b_apjLglmO3IA&v=v2":null},"children":"$L91"}]}]

About

Tags

Share

About

Tags

Share

More Templates Like This