; const selEls = canvas.elements.filter(e => state.selection.includes(e.id)); const el = selEls[0]; return (

{el ? : }

); } function CanvasProperties() { const { state, dispatch } = useStore(); const canvas = activeCanvas(state); const preset = SIZE_PRESETS.find(p => p.w === canvas.w && p.h === canvas.h); return ( <> Size

Width

dispatch({ type: 'update-canvas', id: canvas.id, patch: { w: +e.target.value || 100 } })} />

Height

dispatch({ type: 'update-canvas', id: canvas.id, patch: { h: +e.target.value || 100 } })} />

Background

dispatch({ type: 'update-canvas', id: canvas.id, patch: { bg: { type: 'color', value: e.target.value } } })} />

Page dispatch({ type: 'update-canvas', id: canvas.id, patch: { name: e.target.value } })} /> ); } function ElementProperties({ el }) { const { state, dispatch } = useStore(); const update = (patch) => dispatch({ type: 'update-element', id: el.id, patch }); return ( <> {/* Position & size */} Position

update({ x: +v })} /> update({ y: +v })} /> update({ w: Math.max(10, +v) })} /> update({ h: Math.max(10, +v) })} />

update({ rot: +v })} />

{/* Position on page — 6 quick-align buttons. Distinct from text alignment. */} Position on page {/* Text-specific */} {el.type === 'text' && } {/* Shape / rect / etc fills */} {['rect', 'circle', 'triangle', 'star', 'heart', 'diamond', 'polygon'].includes(el.type) && } {['line', 'arrow'].includes(el.type) && } {el.type === 'image' && } {el.type === 'icon' && } {el.type === 'frame' && } {/* Opacity */} Opacity

update({ opacity: +e.target.value })} /> {Math.round(el.opacity * 100)}%

{/* Layer order */} Arrange {/* Actions */} Actions

); } // Petal — 6 buttons that align the current selection to a side of the canvas. // Text-alignment (left/center/right of the text inside the box) stays separate. function PagePositionControls() { const { state, dispatch } = useStore(); const btn = (position, icon, label, title) => ( ); return (

{btn('left', 'align_l', 'Page left', 'Move selection to the left edge of the page')} {btn('hcenter', 'align_c', 'H centre', 'Horizontally centre selection on the page')} {btn('right', 'align_r', 'Page right', 'Move selection to the right edge of the page')} {btn('top', 'chevron_u', 'Page top', 'Move selection to the top edge of the page')} {btn('vmiddle', 'minus', 'V middle', 'Vertically centre selection on the page')} {btn('bottom', 'chevron_d', 'Page bottom', 'Move selection to the bottom edge of the page')}

); } function LayerArrangeControls({ elId }) { const { state, dispatch } = useStore(); const canvas = activeCanvas(state); const idx = canvas.elements.findIndex(e => e.id === elId); const max = canvas.elements.length - 1; const move = (to) => dispatch({ type: 'reorder-element', id: elId, to: Math.max(0, Math.min(max, to)) }); return (

Layer {idx + 1} of {canvas.elements.length} · shortcuts [ / ]

); } function typeLabel(t) { return { text: 'Text', rect: 'Rectangle', circle: 'Circle', triangle: 'Triangle', star: 'Star', heart: 'Heart', diamond: 'Diamond', polygon: 'Polygon', line: 'Line', arrow: 'Arrow', image: 'Image', icon: 'Icon', frame: 'Frame' }[t] || t; } function LabeledInput({ label, value, onChange, suffix }) { return (

{label}

onChange(e.target.value)} /> {suffix && {suffix}}

); } function ColorPicker({ label, value, onChange }) { return (

{label &&

{label}

}

onChange(e.target.value)} /> onChange(e.target.value)} />

{[...BRAND_PALETTE].map(c => (

); } function TextProps({ el, update }) { return ( <> Text

update({ fontSize: Math.max(6, +v) })} />

Weight

{/* Fit text to the current box + a subtle hint about corner-drag scaling */}

Tip: Drag a corner handle to scale the text; drag a side to reflow it.

update({ letterSpacing: +v })} /> update({ lineHeight: +v })} />

Color update({ color: v })} /> ); } function ShapeProps({ el, update }) { return ( <> Fill update({ fill: v })} /> Stroke update({ stroke: v })} />

Stroke width

update({ strokeWidth: +e.target.value })} />

{el.type === 'rect' && ( <> Corner radius update({ radius: +e.target.value })} /> )} {el.type === 'polygon' && ( <> Sides update({ sides: +e.target.value })} /> )} ); } function LineProps({ el, update }) { return ( <> Color update({ stroke: v })} /> Thickness update({ strokeWidth: +e.target.value })} /> ); } function ImageProps({ el, update }) { const f = el.filter || {}; return ( <> Adjustments

{[ ['brightness', 'Brightness', 0, 200, 100], ['contrast', 'Contrast', 0, 200, 100], ['saturate', 'Saturation', 0, 200, 100], ['blur', 'Blur', 0, 20, 0], ].map(([key, label, mn, mx, def]) => (

{label} {f[key] ?? def}

update({ filter: { ...f, [key]: +e.target.value } })} />

))}

Corner radius update({ radius: +e.target.value })} /> ); } function IconProps({ el, update }) { return ( <> Icon

{ICON_LIBRARY.map(name => ( ))}

Color update({ color: v })} /> Stroke width update({ strokeWidth: +e.target.value })} /> ); } function FrameProps({ el, update }) { const fileRef = pR(null); const handleFile = (e) => { const f = e.target.files[0]; if (!f) return; const reader = new FileReader(); reader.onload = (ev) => update({ src: ev.target.result }); reader.readAsDataURL(f); }; return ( <> Frame shape

{['circle', 'rounded', 'square'].map(s => ( ))}

Image ); } // ---------- LAYERS PANEL ---------- function LayersPanel() { const { state, dispatch } = useStore(); const [open, setOpen] = pS(true); const canvas = activeCanvas(state); if (!canvas) return null; const els = [...canvas.elements].reverse(); // top-down return (

{open && (

{els.map((el, i) => { const realIdx = canvas.elements.findIndex(e => e.id === el.id); const isTop = realIdx === canvas.elements.length - 1; const isBottom = realIdx === 0; return (

dispatch({ type: 'set-selection', ids: [el.id] })} style={{ display: 'flex', alignItems: 'center', gap: 4, padding: '6px 12px 6px 16px', cursor: 'pointer', background: state.selection.includes(el.id) ? 'var(--pink-100)' : 'transparent', fontSize: 12, borderLeft: state.selection.includes(el.id) ? '3px solid var(--pink-500)' : '3px solid transparent', }} onMouseEnter={e => { if (!state.selection.includes(el.id)) e.currentTarget.style.background = 'rgba(241, 207, 234, 0.4)'; }} onMouseLeave={e => { if (!state.selection.includes(el.id)) e.currentTarget.style.background = 'transparent'; }} >

{layerPreviewGlyph(el)}

{layerName(el)} {/* Up/down (up = forward in stack = higher realIdx) */}

); })} {!els.length && (

No layers yet

)}

); } function layerName(el) { if (el.type === 'text') return `“${(el.text || '').slice(0, 20)}”`; return typeLabel(el.type); } function layerPreviewBg(el) { if (el.type === 'rect' || el.type === 'circle') return el.fill; if (el.type === 'image') return `url(${el.src}) center/cover`; if (el.type === 'frame') return el.bg; return 'var(--pink-100)'; } function layerPreviewGlyph(el) { if (el.type === 'text') return T; if (el.type === 'icon') return ; if (['triangle', 'star', 'heart', 'diamond', 'polygon', 'line', 'arrow'].includes(el.type)) return ; return null; } // ---------- PAGES LIST (bottom-left) ---------- function PagesList() { const { state, dispatch } = useStore(); const [drag, setDrag] = pS(null); const proj = activeProject(state); if (!proj) return null; const canvases = proj.canvases; const activeCanvasId = proj.activeCanvasId; return (

Pages

{canvases.map((c, i) => (

setDrag(i)} onDragOver={(e) => e.preventDefault()} onDrop={() => { if (drag !== null && drag !== i) dispatch({ type: 'reorder-canvas', from: drag, to: i }); setDrag(null); }} onClick={() => dispatch({ type: 'set-active-canvas', id: c.id })} style={{ marginBottom: 8, padding: 6, borderRadius: 10, background: activeCanvasId === c.id ? 'white' : 'transparent', cursor: 'pointer', boxShadow: activeCanvasId === c.id ? 'var(--shadow-sm)' : 'none', transition: 'background .12s', }} >

{c.elements.slice(0, 6).map(el => (

{el.type === 'text' && (el.text || '').slice(0, 10)}

))}

{i + 1}

{canvases.length > 1 && ( )}

))}

); } Object.assign(window, { LeftRail, LeftPanel, RightPanel, PagesList, LayerArrangeControls, FONT_OPTIONS, PanelHeader, SectionLabel });

{title}