/* postcards.jsx — A Shade Above neighbor postcard, 6x11 EDDM jumbo (landscape) Three FRONT variations + one shared BACK with subtle accents per variation. Renders into a 11.25" × 6.25" canvas (with 0.125" bleed on each side). */ /* Wedding-invite ampersand — splits a string on " & " and renders the ampersand with a stylized italic span (.amp class). Returns React children, so use anywhere user copy gets rendered as text. */ // True when this campaign is NMB-only (single myrtle showroom). Drives // front-of-card subhead copy + the coastal team block on the back. function isNmbCampaign(s) { return Array.isArray(s.showrooms) && s.showrooms.length === 1 && s.showrooms[0] === 'myrtle'; } function withAmp(text) { if (!text) return text; const str = String(text); if (str.indexOf(' & ') === -1) return str; const parts = str.split(' & '); const out = []; parts.forEach((p, i) => { if (i > 0) out.push(React.createElement('span', { className: 'amp', key: 'a' + i }, '&')); out.push(p); }); return out; } const SC = 72; // px per inch (display) const TRIM = { w: 11 * SC, h: 6 * SC }; // 792 × 432 const BLEED = 0.125 * SC; // 9 const SAFE = 0.25 * SC; // 18 const FULL = { w: TRIM.w + BLEED * 2, h: TRIM.h + BLEED * 2 }; // 810 × 450 /* Showroom data — Charlotte/Matthews HQ and Southpark are the same operation; only Southpark shows. */ const SHOWROOMS = { southpark: { name: 'SouthPark', addr: '721 Gov Morrison St, Suite F-110B', sub: 'Charlotte, NC 28211', phone: '704-541-1200', note: 'By Appointment Only' }, cornelius: { name: 'Lake Norman', addr: '19924 Jetton Rd, Suite 103', sub: 'Cornelius, NC 28031', phone: '704-541-1200', note: 'Call for an Appointment' }, matthews: { name: 'Matthews', addr: '1253 Matthews-Mint Hill Rd', sub: 'Matthews, NC 28105', phone: '704-541-1200', note: 'By Appointment Only' }, // NMB-only: storefront photo + walk-in hours. The other showrooms // are by-appointment HQ spaces, so we don't display photos for them. myrtle: { name: 'N. Myrtle Beach', addr: '1730 Hwy 17 N, Cherry Grove', sub: 'N. Myrtle Beach, SC 29582', phone: '704-541-1200', note: 'Walk-ins welcome', hours: '10am–4pm · Mon–Fri', photo: 'assets/photos/a-shade-above-north-myrtle-beach-storefront.jpg' }, }; // Per-campaign phone routing. Each variant has a default tracking number // and a separate one for North-Myrtle-Beach territory. Used both for the // main contact display on the front and the showroom list on the back. function getShowroomPhone(variant, showroomId) { const isJustSold = variant === 'justSold'; const isMyrtle = showroomId === 'myrtle'; if (isJustSold) return isMyrtle ? '843-612-8669' : '704-610-5962'; return isMyrtle ? '843-474-6422' : '704-508-9444'; } // NMB territory uses a separate brand domain (asacoastal.com); everywhere // else uses asacharlotte.com. Used both for the front contact line and any // per-showroom display. function getShowroomWeb(showroomId) { return showroomId === 'myrtle' ? 'asacoastal.com' : 'asacharlotte.com'; } const ALL_SHOWROOMS = Object.keys(SHOWROOMS); /* Admin-curated default offer (always In-Home Design Consultation when not running a promo) */ const DEFAULT_OFFER_TEXT = 'Design Consultation'; /* photo defaults — email-blast PNGs as approximations until user drops real shots */ const PHOTO_DEFAULTS = { /* shades */ motorized_shades: { src: 'assets/photos/halfoff_powerview.png', position: '50% 12%' }, roller_shades: { src: 'assets/photos/halfoff_powerview.png', position: '50% 25%' }, honeycomb_shades: { src: 'assets/photos/halfoff_powerview.png', position: '50% 35%' }, shades: { src: 'assets/photos/halfoff_powerview.png', position: '50% 30%' }, roman_shades: { src: 'assets/photos/halfoff_powerview.png', position: '50% 40%' }, /* drapery */ drapery: { src: 'assets/photos/freeliterise.png', position: '50% 47%' }, motorized_drapery: { src: 'assets/photos/freeliterise.png', position: '50% 40%' }, drapery_roman: { src: 'assets/photos/freeliterise.png', position: '50% 45%' }, drapery_roller: { src: 'assets/photos/freeliterise.png', position: '50% 50%' }, drapery_cornices: { src: 'assets/photos/freeliterise.png', position: '50% 35%' }, /* shutters */ shutters: { src: 'assets/photos/magnatrack.png', position: '50% 60%' }, /* blinds */ blinds: { src: 'assets/photos/halfoff_powerview.png', position: '50% 50%' }, /* exterior */ exterior_patio_shades: { src: 'assets/photos/magnatrack.png', position: '50% 50%' }, motorized_screen_shades: { src: 'assets/photos/magnatrack.png', position: '50% 40%' }, }; /* HeroImg / ThumbImg — read uploaded src from state, fall back to category default */ /* Parse "X% Y%" objectPosition string into [x, y] floats. */ function parsePos(p) { const m = String(p || '').match(/(-?\d+(?:\.\d+)?)%\s+(-?\d+(?:\.\d+)?)%/); return m ? [parseFloat(m[1]), parseFloat(m[2])] : [50, 50]; } /* Hint badge shown over draggable photos. */ function DragHint({ small }) { return (
Drag to reposition
); } /* DraggablePhoto — generic wrapper. Reads position from s[posKey], writes back via setState. */ function DraggablePhoto({ src, position, onChange, alt = '', children, hintSmall = false, draggable = true }) { const wrapRef = React.useRef(null); const [drag, setDrag] = React.useState(null); const [hover, setHover] = React.useState(false); const [px, py] = parsePos(position); const onPointerDown = (e) => { if (!draggable || !onChange) return; e.preventDefault(); e.currentTarget.setPointerCapture?.(e.pointerId); const rect = wrapRef.current?.getBoundingClientRect(); if (!rect) return; setDrag({ startX: e.clientX, startY: e.clientY, px, py, w: rect.width, h: rect.height }); }; const onPointerMove = (e) => { if (!drag) return; const dx = (e.clientX - drag.startX) / drag.w * 100; const dy = (e.clientY - drag.startY) / drag.h * 100; const nx = Math.max(0, Math.min(100, drag.px - dx)); const ny = Math.max(0, Math.min(100, drag.py - dy)); onChange(`${nx.toFixed(1)}% ${ny.toFixed(1)}%`); }; const onPointerUp = () => setDrag(null); return (
setHover(true)} onMouseLeave={() => setHover(false)} style={{ position: 'absolute', inset: 0, overflow: 'hidden', cursor: draggable && onChange ? (drag ? 'grabbing' : 'grab') : 'default', touchAction: 'none', }} > {src && ( // with object-fit:cover + object-position is the only // mode that gives true CSS-cover behavior under user drag — // no whitespace at any drag extreme because the image is // always scaled to fully cover the container. The SVG // approach was scaling the image to viewbox dimensions and // then translating it, which revealed empty SVG canvas at // the edges. Print quality through html2canvas 1.4.1 is // fine now that Flux Kontext Pro outputs 2048×2048 native — // the source has enough pixels to absorb any minor downsample. {alt} )} {children} {draggable && onChange && (
)} {/* subtle ring on hover */} {draggable && onChange && (hover || drag) && (
)}
); } /* HeroImg / ThumbImg — read uploaded src from state. If no src, render a quiet placeholder motif instead of a stock photo. */ function PhotoPlaceholder({ label = 'Upload an install photo' }) { return (
{label}
); } function HeroImg({ s, set, fallbackPosition, hintSmall }) { const src = s.heroSrc; const pos = s.heroPosition || fallbackPosition || '50% 50%'; if (!src) { return ; } return ( set({ heroPosition: v }) : null} hintSmall={hintSmall} /> ); } function ThumbImg({ src, placeholder, set, position, posKey }) { if (!src) { return ; } return ( set({ [posKey]: v }) : null} hintSmall={true} /> ); } /* Two-tier product taxonomy: TYPE → list of subcategories. The user picks a TYPE first, then a subcategory. First entry per type is the DEFAULT for that type. */ const CATEGORY_TYPES = { shutters: { label: 'Shutters', subs: ['shutters', 'custom_shutters', 'specialty_shape_shutters'] }, shades: { label: 'Shades', subs: ['shades', 'motorized_shades', 'roller_shades', 'honeycomb_shades', 'roman_shades', 'woven_wood_shades', 'silhouette_sheer_shadings', 'pirouette_window_shadings', 'luminette_privacy_sheers'] }, blinds: { label: 'Blinds', subs: ['blinds'] }, drapery: { label: 'Drapery', subs: ['drapery', 'motorized_drapery', 'drapery_roman', 'drapery_roller', 'drapery_cornices'] }, exterior: { label: 'Exterior Shades', subs: ['exterior_patio_shades', 'motorized_screen_shades'] }, }; const CATEGORY_TYPE_LIST = ['shutters', 'shades', 'blinds', 'drapery', 'exterior']; /* Display-ready label, plus a short eyebrow form for tracked-caps usage */ const CATEGORY_LABEL = { shutters: 'Locally Made Shutters', custom_shutters: 'Custom Shutters', specialty_shape_shutters: 'Specialty Shape Shutters', shades: 'Custom Shades', motorized_shades: 'Motorized Shades', roller_shades: 'Roller Shades', honeycomb_shades: 'Honeycomb Shades', roman_shades: 'Roman Shades', woven_wood_shades: 'Woven Wood Shades', silhouette_sheer_shadings: 'Silhouette® Sheer Shadings', pirouette_window_shadings: 'Pirouette® Window Shadings', luminette_privacy_sheers: 'Luminette® Privacy Sheers', blinds: 'Blinds', drapery: 'Drapery', motorized_drapery: 'Motorized Drapery', drapery_roman: 'Drapery Panels & Roman Shades', drapery_roller: 'Drapery Panels & Roller Shades', drapery_cornices: 'Drapery & Fabric Cornices', exterior_patio_shades: 'Patio Shades', motorized_screen_shades: 'Motorized Screen Shades', }; const CATEGORY_SHORT = { shutters: 'Shutters', custom_shutters: 'Custom Shutters', specialty_shape_shutters: 'Specialty Shape', shades: 'Custom Shades', motorized_shades: 'Motorized Shades', roller_shades: 'Roller Shades', honeycomb_shades: 'Honeycomb', roman_shades: 'Roman Shades', woven_wood_shades: 'Woven Wood', silhouette_sheer_shadings: 'Silhouette®', pirouette_window_shadings: 'Pirouette®', luminette_privacy_sheers: 'Luminette®', blinds: 'Blinds', drapery: 'Drapery', motorized_drapery: 'Motorized Drapery', drapery_roman: 'Drapery + Roman', drapery_roller: 'Drapery + Roller', drapery_cornices: 'Drapery + Cornices', exterior_patio_shades: 'Patio Shades', motorized_screen_shades: 'Motorized Screen', }; /* Reverse lookup: which TYPE does a subcategory belong to? */ const CATEGORY_TYPE_OF = (() => { const m = {}; for (const t of CATEGORY_TYPE_LIST) for (const s of CATEGORY_TYPES[t].subs) m[s] = t; return m; })(); /* Intelligent product-name helper for body copy. - If no/unknown category, returns 'custom window treatments' (or 'Custom Window Treatments' for headline case) - Strips leading qualifiers like "Locally Made " so prose reads naturally - Always normalizes registered marks (PowerView®) preserved - Casing options: 'lower' (mid-sentence), 'sentence' (Capitalized first word), 'title' (Headline), 'asis' */ function productCopy(category, mode = 'lower') { let raw = (CATEGORY_LABEL[category] || '').trim(); if (!raw) raw = mode === 'asis' ? 'Custom Window Treatments' : 'custom window treatments'; if (mode === 'asis') return raw; // Strip qualifier prefixes for prose: raw = raw.replace(/^Locally Made /i, '').replace(/^Stunning New /i, '').replace(/^Brand New /i, ''); if (mode === 'title') { // Capitalize each word but preserve & and prepositions lowercased const small = new Set(['and','&','of','for','the','with','to','in','on']); return raw.split(/(\s+|&)/).map((w, i) => { if (!w.trim()) return w; if (w === '&') return w; const lw = w.toLowerCase(); if (i > 0 && small.has(lw)) return lw; return w[0].toUpperCase() + w.slice(1); }).join(''); } if (mode === 'sentence') { const lower = raw.toLowerCase(); return lower[0].toUpperCase() + lower.slice(1); } // 'lower' — full lowercase EXCEPT preserve registered/trademark caps and acronyms return raw.toLowerCase().replace(/powerview/gi, 'PowerView'); } /* Strip a leading house number from a street address so only the street name itself prints. "1234 Cloister Dr" → "Cloister Dr". Used everywhere the card displays a location credit — full numeric address is a privacy liability for the homeowner being credited. */ function streetName(addr) { const t = String(addr || '').trim(); if (!t) return ''; // Drop leading digits (and any "1234A" / "1234-1/2" variants), then any // residual leading whitespace or punctuation. return t.replace(/^\s*\d+[\dA-Za-z\-/.]*\s+/, '').trim(); } /* Build "The Thorntons" from a last name. Handles already-pluralized inputs gracefully. */ function familyName(last) { const t = (last || '').trim(); if (!t) return 'Your neighbors'; // Pluralize: Jones → Joneses, Thornton → Thorntons, Smith → Smiths const lower = t.toLowerCase(); const ending = /(s|x|z|ch|sh)$/.test(lower) ? 'es' : 's'; return `The ${t}${ending}`; } /* ======================================================================== Shared building blocks ======================================================================== */ function Eyebrow({ children, color = 'inherit', tracking = '0.22em', weight = 500, size = 9, style }) { return ( {children} ); } function RuleEyebrow({ children, color = 'currentColor', size = 10, tracking = '0.22em', ruleW = 24 }) { return ( {children} ); } /* The cursive "A" mark from the ASA logo, drawn small so we can place it freely. We fetch the SVG once and inline its markup — html2canvas can't reliably rasterize SVG tags but renders inlined faithfully. */ // Inlined ASA logo SVG — embedded directly in source so there is no fetch // dependency at render time. html2canvas reliably rasterizes inlined ; // the prior fetch-and-inject path was racing the iframe lifecycle. const asaLogoSvgMarkup = ``; function loadAsaLogoSvg() { return Promise.resolve(asaLogoSvgMarkup); } // Resolve `var(--asa-off-white)` → `#f3ede4`. CSS variables don't always // propagate through dangerouslySetInnerHTML into an inline SVG's
); } function CategoryBar({ items, color, size = 7.5, sep = '·', tracking = '0.32em' }) { return ( {items.map((it, i) => ( {i > 0 && {sep}} {it} ))} ); } function HairRule({ color = 'rgba(243,237,228,0.45)', w = '100%', mt = 0, mb = 0 }) { return
; } /* ======================================================================== FRONTS ======================================================================== */ function FrontPhotoLed({ s, set }) { // 60/40 split — navy panel left ~4.2", photo right ~6.8" const PANEL_W = 4.2 * SC; // ~302px const photo = PHOTO_DEFAULTS[s.category] || PHOTO_DEFAULTS.shutters; const placeLine = [s.neighborhood, s.city].filter(Boolean).join(', '); return (
{/* LEFT navy panel */}
Your neighborhood
{placeLine}

{withAmp(s.headline)}

{/* Always route off campaign location — ignore any stored s.subhead because the field isn't editable in the UI and old localStorage sessions had a hardcoded Charlotte default that was leaking onto NMB previews. */} {isNmbCampaign(s) ? 'A North Myrtle Beach tradition since 2017 — family-owned, hand-finished one home at a time.' : 'A Charlotte tradition since 1993, hand-finished one home at a time.'}

{s.phone} {s.url}
{/* RIGHT photo */}
{/* tiny tracked-caps location credit lower-right — street name only, never the house number, to keep the credited home unidentifiable. */} {streetName(s.street) && (
{streetName(s.street)}
)}
); } function FrontPatternLed({ s, set }) { const photo = PHOTO_DEFAULTS[s.category] || PHOTO_DEFAULTS.shutters; const placeLine = [s.neighborhood, s.city].filter(Boolean).join(', '); return (
{/* Center composition — full width, two columns, copy spread vertically */}
{/* Left: copy — wordmark up top, headline mid, subhead/phone bottom; spread top-to-bottom */}
{/* Top — wordmark only */}
{/* Middle — eyebrow paired with the italic headline */}
Just up the street

{withAmp(s.headline)}

{isNmbCampaign(s) ? 'A North Myrtle Beach tradition since 2017 — family-owned, hand-finished one home at a time.' : (s.subhead || `We just finished ${productCopy(s.category, 'lower')} for one of your neighbors. Step inside and see what we can do for your home.`)}

{/* Bottom — contact */} {s.phone} · {s.url}
{/* Right: photo + product caption (location dropped per design refinement) */}
{/* Slim navy address tag flush to the right edge of the photo — street name only, never the house number. */} {streetName(s.street) && (
{streetName(s.street)}
)}
{/* Bottom strip: product type only, left-aligned */}
{productCopy(s.category, 'title')}
); } function FrontQuoteLed({ s, set }) { const photo = PHOTO_DEFAULTS[s.category] || PHOTO_DEFAULTS.shutters; const family = familyName(s.lastName); const placeLine = [s.neighborhood, s.city].filter(Boolean).join(', '); return (
{/* Left photo */}
{/* Right quote panel */}
{/* Top: ASA mark + neighborhood */}
{placeLine}
{/* Center: quote */}
“

{withAmp(s.quote)}

{family} {s.neighborhood && ( · {s.neighborhood} )}
— as told to our installer on {s.installDate || 'install day'}
{/* Bottom: footer */}

We just finished {family}' home with {productCopy(s.category, 'lower')}. We'd love to show you what we did.

Schedule
{s.phone}
); } /* ─── "Just Sold" variant ──────────────────────────────────────────── Designed for the window-counter / Gemini-render workflow: - Left ~55%: hero photo (the listing's room, doctored from Zillow) - Right ~45%: navy panel with logo, tagline, and three render thumbnails captioned with the treatment names. */ function FrontJustSoldLed({ s, set }) { const PANEL_W = 4.4 * SC; // ~317px navy column const tag1 = s.jsTagline || 'Thought about your windows?'; const tag2 = s.jsSubTagline || 'We have.'; const eye = s.jsEyebrow || 'Welcome home'; const heroLabel = s.heroLabel || ''; return (
{/* LEFT photo — the chosen render of the front room */}
{/* Slim treatment-name chip — flush to the bottom-right of the photo, single line, low-key. The product chosen in the estimator. */} {heroLabel && (
{heroLabel}
)}
{/* RIGHT navy panel — logo, tagline, copy, contact (NO alt thumbnails) */}
{eye}

{tag1}

{tag2}

{isNmbCampaign(s) ? 'A family-owned North Myrtle Beach tradition, plus the latest AI — so you can fall in love with what your new home could become.' : 'Three generations of Carolina craftsmanship, plus the latest AI — so you can fall in love with what your new home could become.'}

{/* Phone + URL */}
{s.phone} {s.url}
); } const VARIANTS = { photo: { id: 'photo', name: 'Primary layout', sub: 'Magazine split — navy panel + full-bleed photograph.' }, pattern: { id: 'pattern', name: 'Alternate layout', sub: 'Cream paper, ASA pattern strip, centered italic headline.' }, justSold: { id: 'justSold', name: 'Just Sold', sub: 'Listing photo + three AI-rendered treatment options. Pulls from the window-counter visualizer.' }, }; function PostcardFront({ s, set }) { const Cmp = s.variant === 'pattern' ? FrontPatternLed : s.variant === 'justSold' ? FrontJustSoldLed : FrontPhotoLed; return (
); } /* ======================================================================== BACK (shared layout, variation accents) ======================================================================== */ function IndiciaBlock({ color = 'var(--asa-navy)' } = {}) { return (
PRSRT STD
U.S. Postage
Paid
EDDM Retail
); } function ShowroomList({ ids, variant, color = 'var(--asa-navy)', mute = 'var(--asa-stone-500)' }) { // Pre-ordered list — index 0 = top-left (matches the campaign's // return-address pick). Phones stripped (already on the front). // Layout: 2×2 for 2+ entries; single column for the NMB-only case // so the one card doesn't sit alone in a half-width grid cell with // dead space to its right. const list = ids.map(k => ({ id: k, ...SHOWROOMS[k] })).filter(s => s.name); const cols = list.length <= 1 ? '1fr' : '1fr 1fr'; return (
{list.map((sh, i) => (
{sh.photo && ( {`${sh.name} )}
{sh.name}
{sh.addr}
{sh.sub} {sh.hours && ( <>
{sh.hours} )}
))}
); } function PostcardBack({ s, set }) { // LEFT half = message side; RIGHT half = postal/address side const HALF = TRIM.w / 2; // 396 px const accentNavyTop = false; const accentPattern = s.variant === 'pattern'; // alternate layout — pattern motif on back const accentCream = s.variant === 'photo'; // primary layout — cream stripe top const family = familyName(s.lastName); const placeLine = [s.neighborhood, s.city].filter(Boolean).join(', '); return (
{/* Navy spine bar — echoes the front. Full bleed, left edge. */}
{/* dotted spine separator (cosmetic guide) */}
{/* === LEFT: message side === Tweakable layout knobs: • gap → vertical breathing room between blocks • padding 18 → top/bottom margin from card edge • accent bar minHeight → height of the colored top strip */}
{/* Top accent strip — plain thin colored bar (no copy on either variant). The "A Shade Above Window Fashions · Since 1993" wordmark used to live here but felt redundant with the logo + indicia row above. */} {accentCream && (
)} {accentNavyTop && (
)} {/* Headline */}

{withAmp(s.backHeadline)}

{/* Body + thumbnail strip */}

{/* 4:3 instead of perfect square — the square was cresting the horizontal rule under the offer block on both variants. The landscape ratio chops a slice from the top (and a touch from the bottom) of a typical Gemini-rendered room photo, which also reads more like a magazine credit shot. */}
{/* Slim treatment-name chip — Just-Sold variant only. Neighbor variants use the navy address chip below, never both. Pulled flush to the bottom edge with reduced height + smaller font + tighter tracking so it reads as a quiet caption rather than a competing banner. */} {s.backLabel && s.variant === 'justSold' && (
{s.backLabel}
)} {/* Slim navy address chip — only on neighbor variants (photo / pattern). Just-Sold uses the treatment chip alone. Street name only — house numbers are a privacy liability. */} {streetName(s.street) && s.variant !== 'justSold' && (
{streetName(s.street)}
)}
{/* Photo caption — neighbor variants only ("Recently installed at "). Just-Sold drops it; the chip on the photo + the back body already speak to it. */} {s.variant !== 'justSold' && (
Recently installed {productCopy(s.category, 'asis')} {streetName(s.street) ? <> on {streetName(s.street)} : (s.neighborhood ? <> in {s.neighborhood} : null) }
)}
{/* NMB-only: coastal team photo (transparent PNG) + caption ("Our Team — Chad, Jennifer, Matt & Carter") to the right. Right-aligned so it sits under the postcard photo column and doesn't overlap the "Recently installed …" italic caption that lives directly above it on the right side. Slightly larger than the first pass per design feedback. */} {isNmbCampaign(s) && (
ASA Coastal team
Our Team
{withAmp('Chad, Jennifer, Matt & Carter')}
)} {/* Offer block — single condensed line. marginTop pulls it up a hair toward the photo above; the internal padding gives the rule lines themselves breathing room. */} {s.offerOn && (
{s.offerEyebrow || 'Complimentary'}
{s.offerText}
{s.phone}
)} {/* Showrooms — eyebrow pluralizes with the count. NMB campaigns mail with a single showroom and read singular; Charlotte-metro campaigns mail with all four and read plural. */}
{(s.showrooms || []).length <= 1 ? 'Visit Our Showroom' : 'Visit Our Showrooms'}
{/* Bottom: category bar — full width, evenly distributed to match divider above */}
{['Shutters','Shades','Drapery','Exterior Shades'].map(it => ( {it} ))}
{/* Just-Sold disclaimer — required because the renders are AI-generated approximations of the listing photos. Tiny, italic, low-contrast so it doesn't compete with the message but is legible at print size. */} {s.variant === 'justSold' && (
Images may be AI-enhanced using publicly available imagery. Products shown are conceptual renderings and may not reflect exact colors, mounting, operation, or final installation.
)}
{/* === RIGHT: postal side === */}
{/* alternate layout — no pattern accent on back; keep the message side clean */} {/* Top: big ASA logo + indicia. Both variants use the same large logo treatment now — typed return address dropped because LOB renders its own from the Matthews showroom we pass via API. */}
{/* Middle: address panel — compact (PREVIEW ONLY; LOB applies real address) */}
****ECRWSS****
POSTAL CUSTOMER
Local · Carrier Route Pre-Sort
{/* Bottom: tracking only (PREVIEW ONLY) */}
Tracking
{s.dropCode || 'ASA-NB-2025-04-{ROUTE}'}
); } /* ======================================================================== Print marks overlay ======================================================================== */ function PrintMarks({ on }) { if (!on) return null; // bleed at 0..FULL, trim at BLEED..BLEED+TRIM, safe at BLEED+SAFE..rest const bleedStyle = { left: 0, top: 0, right: 0, bottom: 0 }; const trimStyle = { left: BLEED, top: BLEED, right: BLEED, bottom: BLEED }; const safeStyle = { left: BLEED + SAFE, top: BLEED + SAFE, right: BLEED + SAFE, bottom: BLEED + SAFE }; // crop ticks at trim corners (8 ticks total) const TickV = ({ side, end }) => (
); return (
{/* bleed edge */}
{/* trim edge */}
{/* safe edge */}
{/* crop marks at trim corners */} {[ { top: 0, left: BLEED, w: 1, h: BLEED }, { top: 0, left: FULL.w - BLEED, w: 1, h: BLEED }, { bottom: 0, left: BLEED, w: 1, h: BLEED }, { bottom: 0, left: FULL.w - BLEED, w: 1, h: BLEED }, { left: 0, top: BLEED, h: 1, w: BLEED }, { right: 0, top: BLEED, h: 1, w: BLEED }, { left: 0, bottom: BLEED, h: 1, w: BLEED }, { right: 0, bottom: BLEED, h: 1, w: BLEED }, ].map((p, i) => (
))} {/* legend chips */}
BLEED 0.125"
TRIM 11×6"
SAFE 0.25"
{/* dimension callout */}
11.25 × 6.25 in · 300dpi
); } /* expose to window so app.jsx can import them */ Object.assign(window, { POSTCARD_FULL: FULL, POSTCARD_TRIM: TRIM, POSTCARD_BLEED: BLEED, POSTCARD_SAFE: SAFE, POSTCARD_VARIANTS: VARIANTS, POSTCARD_SHOWROOMS: SHOWROOMS, POSTCARD_ALL_SHOWROOMS: ALL_SHOWROOMS, POSTCARD_CATEGORY_LABEL: CATEGORY_LABEL, POSTCARD_CATEGORY_SHORT: CATEGORY_SHORT, POSTCARD_CATEGORY_TYPES: CATEGORY_TYPES, POSTCARD_CATEGORY_TYPE_LIST: CATEGORY_TYPE_LIST, POSTCARD_CATEGORY_TYPE_OF: CATEGORY_TYPE_OF, POSTCARD_DEFAULT_OFFER_TEXT: DEFAULT_OFFER_TEXT, postcardFamilyName: familyName, postcardStreetName: streetName, PostcardFront, PostcardBack, PrintMarks, });