// bouquet.jsx — bouquet preview SVG component
// Renders a hand-tied bouquet wrapped in paper/silk/twine, with stems splaying
// out the top and flower heads varying in height for a natural arrangement.
// All flowers are composed of basic shapes (circles + simple paths) per
// project SVG rules.
// Canonical flower vocab — the single source of truth for both the renderer
// (FLOWERS, below) and the two front-end pickers, which read window.FLOWER_VOCAB
// (c = dot fill = head, ic = dot ring = center). Listed in picker display order.
// NOTE: server.js keeps its own FLOWER_NAMES allow-list — a deliberate, runtime-
// independent validation mirror (Node can't load this JSX). Keep the two in sync.
const FLOWER_VOCAB = [
{ type: 'peony', name: 'peony', lat: 'paeonia', head: '#c45c6e', center: '#f3d57a', size: 18 },
{ type: 'ranunculus', name: 'ranunculus', lat: 'ranunculus', head: '#f0c8b8', center: '#c45c6e', size: 14 },
{ type: 'daisy', name: 'daisy', lat: 'bellis', head: '#f6efd9', center: '#c8762a', size: 15, ringStroke: '#7a5a3a' },
{ type: 'cornflower', name: 'cornflower', lat: 'centaurea', head: '#9cbed4', center: '#f3d57a', size: 13 },
{ type: 'lavender', name: 'lavender', lat: 'lavandula', head: '#b8a4d0', center: '#7a5a8a', size: 12 },
{ type: 'marigold', name: 'marigold', lat: 'tagetes', head: '#e8a36a', center: '#a8606a', size: 16 },
{ type: 'tulip', name: 'tulip', lat: 'tulipa', head: '#e6cf83', center: '#bf9a52', size: 15 },
// foliage / fillers
{ type: 'babysbreath', name: "baby's breath", lat: 'gypsophila', head: '#fbf7ec', center: '#cdbf9b', size: 13 },
{ type: 'eucalyptus', name: 'eucalyptus', lat: 'eucalyptus', head: '#9bb59a', center: '#6b7d5c', size: 14 },
{ type: 'fern', name: 'fern', lat: 'nephrolepis', head: '#7e9b6e', center: '#4a5d3e', size: 15 },
];
// Renderer lookup keyed by type. `label` kept as an alias of `name` for callers.
const FLOWERS = Object.fromEntries(
FLOWER_VOCAB.map(f => [f.type, { ...f, label: f.name }])
);
// Deterministic jitter so the bouquet is repeatable.
function jitter(i, seed = 1, range = 1) {
const x = Math.sin(i * 12.9898 + seed * 78.233) * 43758.5453;
return ((x - Math.floor(x)) - 0.5) * 2 * range;
}
// Compute a stable position + height for the n-th stem. The gather differs by
// wrap: twine is a hand-tied bunch (stems pinch at the tie, width from the fan),
// while paper cones want the stems spread to fill the wrap mouth.
// `fullness` (default 1) scales how far the structured fan opens — the buyer's
// "tight ↔ full" slider. It multiplies only the (t-0.5)*spread/fan term, never the
// jitter, so a tight bouquet stays naturally varied instead of collapsing to a line.
function stemPlacement(i, total, wrap = 'kraft', fullness = 1) {
const t = total === 1 ? 0.5 : i / (total - 1);
let x, angle;
if (wrap === 'twine') {
const gather = Math.min(22, total * 1.8 + 6); // base spread at the bind
const fan = Math.min(34, total * 2.2 + 11); // tighter splay — heads sit closer at the top
x = (t - 0.5) * gather * fullness + jitter(i, 1, 3);
angle = (t - 0.5) * fan * fullness + jitter(i, 2, 4);
} else if (wrap === 'vase') {
// standing in a vessel: a tight, upright column. Both the bind spread and the
// splay barely grow with count and cap low, so a full bouquet stays gathered
// and vertical (stems lean out only slightly) rather than fanning open.
const gather = Math.min(15, total * 1.1 + 5); // narrow bind, grows slowly
const fan = Math.min(16, total * 1.2 + 5); // near-upright, gentle lean
x = (t - 0.5) * gather * fullness + jitter(i, 1, 2.4);
angle = (t - 0.5) * fan * fullness + jitter(i, 2, 3);
} else if (wrap === 'silk') {
// refined compact posy — a tight gather held nearly upright, for a polished
// "presented" nosegay that's distinctly narrower than kraft's open cone.
const spread = Math.min(46, total * 4 + 16);
x = (t - 0.5) * spread * fullness + jitter(i, 1, 2.5);
angle = (t - 0.5) * 9 * fullness + jitter(i, 2, 2.5); // close to vertical
} else {
// kraft — a full, relaxed cone: wider and splayed more open than silk, so it
// reads as a generous casual hand-wrap.
const spread = Math.min(96, total * 10 + 30); // fill the cone mouth, wide
x = (t - 0.5) * spread * fullness + jitter(i, 1, 4);
angle = (t - 0.5) * 30 * fullness + jitter(i, 2, 5); // pronounced outward tilt
}
// height: outer stems shorter so the crown reads as a rounded dome. In a vase
// the heads sit looser — a much smaller dome bias and a wide random stagger, so
// blooms land at varied heights instead of a tidy mound.
let height;
if (wrap === 'vase') {
// shorter, looser column (~30% lower than a wrapped bouquet): gentle dome bias
// + wide random stagger, scaled down so blooms sit over the vase, not towering.
height = (236 - Math.abs(t - 0.5) * 22 + jitter(i, 3, 30)) * 0.7;
} else if (wrap === 'silk') {
// tidy, even posy crown — shallow dome, little variation, sat lower so the
// compact nosegay doesn't tower over the ribbon wrap
height = 200 - Math.abs(t - 0.5) * 28 + jitter(i, 3, 8);
} else if (wrap === 'twine') {
const heightBase = 216 - Math.abs(t - 0.5) * 48; // a touch shorter
height = heightBase + jitter(i, 3, 14);
} else {
// kraft — deeper cascade + more variation, so the cone reads full and casual
height = 228 - Math.abs(t - 0.5) * 60 + jitter(i, 3, 18);
}
return { x, angle, height };
}
function Flower({ type, x = 0, y = 0, scale = 1 }) {
const f = FLOWERS[type] || FLOWERS.peony;
const r = f.size;
if (type === 'babysbreath') {
// airy spray of tiny white blossoms on hair-thin stems
const pts = [[0,-13],[5,-9],[-5,-9],[8,-3],[-8,-3],[3,-4],[-3,-4],[6,2],[-6,2],[0,3],[2,-1]];
return (
{pts.map(([px,py],i) => (
))}
{pts.map(([px,py],i) => (
))}
);
}
if (type === 'eucalyptus') {
// rounded silver-sage leaves in opposite pairs up a short sprig
const leaves = [];
[-2,-7,-12].forEach((ly,i) => {
leaves.push();
leaves.push();
});
return (
{leaves}
);
}
if (type === 'fern') {
// a single green frond — central rib with paired leaflets
const parts = [];
for (let i = 0; i < 6; i++) {
const ly = 3 - i * 4.4;
const len = 7.5 - i * 0.9;
parts.push();
parts.push();
}
return {parts};
}
if (type === 'tulip') {
// a closed tulip cup — three petals, center tallest
return (
{/* soft petal seams */}
);
}
if (type === 'lavender') {
// small bud spike
return (
);
}
if (type === 'daisy') {
// 8 petals around a center
const petals = [];
for (let i = 0; i < 8; i++) {
const a = (i / 8) * Math.PI * 2;
const px = Math.cos(a) * r * 0.7;
const py = Math.sin(a) * r * 0.7;
petals.push(
);
}
return (
{petals}
);
}
if (type === 'cornflower') {
// jagged round
const petals = [];
for (let i = 0; i < 6; i++) {
const a = (i / 6) * Math.PI * 2;
const px = Math.cos(a) * r * 0.65;
const py = Math.sin(a) * r * 0.65;
petals.push();
}
return (
{petals}
);
}
// peony / marigold / ranunculus — layered round
const outer = [];
for (let i = 0; i < 6; i++) {
const a = (i / 6) * Math.PI * 2;
outer.push();
}
const inner = [];
for (let i = 0; i < 5; i++) {
const a = (i / 5) * Math.PI * 2 + 0.3;
inner.push();
}
return (
{outer}
{inner}
);
}
// Where stems gather. Paper wraps (kraft/silk) form a cone whose front fold
// covers from ~y296 down, so stems originate at PAPER and their cut ends hide
// inside the cone. Twine is a bare hand-tied bunch — there's no vase, so the
// stems pass through the tie (~y320) and their cut ends show BELOW it.
const STEM_BASE_PAPER = 318;
const STEM_BASE_TWINE = 350;
// Vase stems run down into the water so they read through the translucent glass.
const STEM_BASE_VASE = 384;
// Flower heads are anchored to this line regardless of wrap, so switching wrap
// only changes how the stems are gathered at the bottom, not the silhouette.
const HEAD_ANCHOR = STEM_BASE_PAPER;
function Stem({ type, index, total, isNew, wrap, fullness }) {
const { x, angle, height } = stemPlacement(index, total, wrap, fullness);
const baseY = wrap === 'twine' ? STEM_BASE_TWINE
: wrap === 'vase' ? STEM_BASE_VASE
: STEM_BASE_PAPER;
// extend the drawn length downward for twine so the head stays put
const h = height + (baseY - HEAD_ANCHOR);
const fadeRef = React.useRef(null);
React.useEffect(() => {
if (!fadeRef.current) return;
if (isNew) {
fadeRef.current.style.transformOrigin = `${x + 160}px ${baseY}px`;
fadeRef.current.animate(
[
{ transform: 'translateY(20px) scale(.7) rotate(-2deg)', opacity: 0 },
{ transform: 'translateY(0) scale(1) rotate(0)', opacity: 1 },
],
{ duration: 460, easing: 'cubic-bezier(.2,.8,.2,1)', fill: 'both' }
);
}
}, []);
return (
{/* stem */}
{/* leaf */}
{Math.abs(jitter(index, 7, 1)) > .3 && (
)}
{/* flower head */}
);
}
// Wraps: kraft cone, silk ribbon band, twine knot
function Wrap({ style = 'kraft', count = 1, fullness = 1 }) {
if (style === 'kraft') {
return (
{/* back layer — curved cone */}
{/* front overlap — paper folded in front */}
{/* paper crease lines — gentle */}
{/* twine tie */}
);
}
if (style === 'silk') {
return (
{/* curved silk wrap, back layer */}
{/* front overlap */}
{/* silk ribbon band */}
{/* ribbon shine */}
);
}
if (style === 'vase') {
// a clear glass vessel — translucent so the gathered stems read through it,
// with a waterline and a couple of soft glass highlights. Drawn over the
// stems (Wrap renders last) so the tint falls across everything inside.
return (
{/* water — fills the lower interior, below the waterline */}
{/* glass body — translucent; doubles the tint below the waterline */}
{/* waterline */}
{/* mouth rim */}
{/* glass highlights */}
);
}
// twine — bare hand-tied bunch, cinched with a single wrap of jute.
// Width tracks how far the outer stems sit from center at the tie (~y321),
// mirroring stemPlacement's twine gather+fan, so the cuff grows with the bunch.
const baseHalf = Math.min(22, count * 1.8 + 6) * fullness / 2;
const fanHalf = Math.min(34, count * 2.2 + 11) * fullness / 2; // mirror stemPlacement's twine fan
const half = baseHalf + 39 * Math.sin(fanHalf * Math.PI / 180) + 4; // +margin
const L = 160 - half, R = 160 + half;
return (
{/* twine wrap — one clean cuff hugging the gathered stems (tied a touch higher) */}
{/* wound-cord shading across the front of the cuff */}
{/* two trailing ends splaying out from under the tie */}
);
}
// ── Accents: little fauna + ambient touches sprinkled over the arrangement ──
// Each critter is authored around (0,0) and placed by the caller. Kept small and
// muted to stay tasteful — these still print on a real card. All composed of basic
// shapes per the SVG rules, so they rasterize crisply into the print front.
function Bee({ x, y, rot = -12 }) {
return (
{/* dashed flight path trailing in */}
{/* wings */}
{/* amber body + soft-dark stripes */}
);
}
function Butterfly({ x, y, rot = -8 }) {
return (
);
}
function Ladybug({ x, y, rot = 14 }) {
return (
{/* perched on a small leaf */}
);
}
function Dragonfly({ x, y, rot = -18 }) {
return (
);
}
function Hummingbird({ x, y, rot = -12 }) {
return (
{/* dashed darting path trailing in from behind */}
{/* needle beak */}
{/* fanned tail */}
{/* teal body, head to tail */}
{/* rose throat (ties to the brand rose) */}
{/* eye */}
{/* blurred beating wing */}
);
}
function Petals({ seed = 1 }) {
// a few blossom petals drifting near the edges, away from the note/crown center.
// Each is nudged by the seed so the scatter differs from card to card.
const drift = [[44,86,-20,'#f0c8b8'],[270,150,30,'#e8b4bf'],[58,300,12,'#f0c8b8'],[258,312,-24,'#e8b4bf'],[214,58,40,'#f3d9c4']];
return (
{drift.map(([px,py,rot,col],i) => {
const dx = (hashRand(seed, i*2 + 1) - 0.5) * 30;
const dy = (hashRand(seed, i*2 + 2) - 0.5) * 26;
const dr = (hashRand(seed, i + 40) - 0.5) * 44;
return (
);
})}
);
}
function Sparkles({ seed = 1 }) {
// soft pollen glints around the crown, lightly scattered per seed
const glints = [[120,118],[206,150],[150,88],[224,210],[96,182],[176,236]];
return (
{glints.map(([px,py],i) => {
const dx = (hashRand(seed, i*2 + 7) - 0.5) * 24;
const dy = (hashRand(seed, i*2 + 8) - 0.5) * 24;
const sc = 0.8 + hashRand(seed, i + 20) * 0.6;
return (
);
})}
);
}
function Fireflies({ seed = 1 }) {
// a few warm evening glows drifting near the crown — sparser + softer than pollen,
// each a layered halo → core → bright center so it reads as a quiet light.
const spots = [[110,128],[214,108],[150,210],[92,170]];
return (
{spots.map(([px,py],i) => {
const dx = (hashRand(seed, i*2 + 11) - 0.5) * 30;
const dy = (hashRand(seed, i*2 + 12) - 0.5) * 28;
const sc = 0.85 + hashRand(seed, i + 30) * 0.5;
return (
);
})}
);
}
// Each critter roams within its own box (kept roughly disjoint so they spread
// around the crown). A position is picked from a seeded RNG and re-rolled a few
// times if it lands too close to an already-placed critter — so every card gets a
// slightly different arrangement, yet stays deterministic in (seed, selection) so
// the live preview and the rasterized print agree.
const CRITTER_BOX = {
bee: { x0: 178, y0: 92, x1: 248, y1: 158, rot: -12 },
butterfly: { x0: 72, y0: 84, x1: 138, y1: 150, rot: -8 },
ladybug: { x0: 104, y0: 198, x1: 214, y1: 250, rot: 14 },
dragonfly: { x0: 118, y0: 54, x1: 206, y1: 96, rot: -18 },
hummingbird: { x0: 196, y0: 56, x1: 254, y1: 100, rot: -12 }, // darts in upper-right, facing the crown
};
const CRITTER_ORDER = ['bee', 'butterfly', 'ladybug', 'dragonfly', 'hummingbird']; // canonical placement order (toggle-order independent)
function hashRand(a, b) {
const x = Math.sin(a * 127.1 + b * 311.7) * 43758.5453;
return x - Math.floor(x); // 0..1
}
const idNum = (id) => { let s = 0; for (let i = 0; i < id.length; i++) s += id.charCodeAt(i) * (i + 1); return s; };
function placeCritters(selected, seed) {
const ids = CRITTER_ORDER.filter(id => selected.includes(id));
const placed = [];
ids.forEach(id => {
const b = CRITTER_BOX[id];
let pick = null;
for (let a = 0; a < 6; a++) {
const x = b.x0 + hashRand(seed + idNum(id), a * 2 + 1) * (b.x1 - b.x0);
const y = b.y0 + hashRand(seed + idNum(id), a * 2 + 2) * (b.y1 - b.y0);
pick = { id, x, y, rot: b.rot + (hashRand(seed + idNum(id), 99) - 0.5) * 18 };
if (placed.every(p => Math.hypot(p.x - x, p.y - y) > 48)) break; // clear of others → keep
}
placed.push(pick);
});
return placed;
}
function Accents({ accents = [], seed = 1 }) {
if (!accents.length) return null;
const crit = placeCritters(accents, seed);
return (
{crit.map(({ id, x, y, rot }) => {
switch (id) {
case 'bee': return ;
case 'butterfly': return ;
case 'ladybug': return ;
case 'dragonfly': return ;
case 'hummingbird': return ;
default: return null;
}
})}
{accents.includes('petals') && }
{accents.includes('sparkles') && }
{accents.includes('fireflies') && }
);
}
function Bouquet({ stems, wrap, accent, accents = [], accentSeed = 1, fullness = 1 }) {
// sort stems so taller flowers render behind (smaller t = center)
const ordered = stems.map((s, i) => ({ ...s, i })).sort((a, b) => {
const ai = Math.abs(a.i / Math.max(1, stems.length - 1) - 0.5);
const bi = Math.abs(b.i / Math.max(1, stems.length - 1) - 0.5);
return bi - ai;
});
return (
);
}
// Export to global
Object.assign(window, { Bouquet, FLOWERS, FLOWER_VOCAB });