{['#ff5f57', '#febc2e', '#28c840'].map(c => (

))}

{url}

); }; const DeviceChrome = ({ children }) => (

); // Main canvas function SGCanvas({ s, onUpdate, fullscreen = false, registerStageRef, zoom = 100, activeTool, setActiveTool }) { const stageRef = React.useRef(null); const [drawing, setDrawing] = React.useState(null); React.useEffect(() => { if (registerStageRef) registerStageRef(stageRef); }, []); const bgStyle = (() => { if (s.bg.type === 'gradient') { const g = PRESET_GRADIENTS.find(x => x.id === s.bg.value) || PRESET_GRADIENTS[0]; return { background: g.css }; } if (s.bg.type === 'solid') return { background: s.bg.value }; if (s.bg.type === 'pattern') { return { background: '#1c1917', backgroundImage: `radial-gradient(circle at 1px 1px, rgba(245,158,11,0.18) 1px, transparent 0)`, backgroundSize: '24px 24px' }; } return { background: '#0a0a0a' }; })(); const aspect = ASPECTS.find(a => a.id === s.aspect) || ASPECTS[0]; // The OUTPUT aspect is the stage; the screenshot itself stays 16:9 inside the padding. const stageStyle = aspect.w ? { aspectRatio: `${aspect.w} / ${aspect.h}` } : {}; const innerPad = `${s.padding}px`; const radius = `${s.radius}px`; const shadowMap = { none: 'none', soft: '0 20px 50px -20px rgba(0,0,0,0.5)', medium: '0 30px 60px -15px rgba(0,0,0,0.6), 0 12px 24px -8px rgba(0,0,0,0.3)', hard: '0 50px 100px -20px rgba(0,0,0,0.85), 0 30px 60px -30px rgba(0,0,0,0.6)', glow: `0 0 80px -10px ${s.bg.type === 'gradient' ? 'rgba(245,158,11,0.4)' : 'rgba(255,255,255,0.15)'}, 0 30px 60px -15px rgba(0,0,0,0.5)`, }; const tiltTransform = s.tilt > 0 ? `perspective(2200px) rotateY(${s.tilt}deg) rotateX(${s.tilt * 0.4}deg)` : 'none'; return (

{/* watermark */} {s.watermark && (

screengod / {s.watermarkText || '@you'}

)}

{s.frame === 'browser' && } {s.frame === 'window' && } {s.frame === 'device' && }

{ if (!activeTool || ['cursor', 'image', 'sparkle'].includes(activeTool)) return; const r = e.currentTarget.getBoundingClientRect(); const x = ((e.clientX - r.left) / r.width) * 100; const y = ((e.clientY - r.top) / r.height) * 100; if (activeTool === 'text') { const txt = prompt('Текст аннотации:'); if (txt) { onUpdate(p => ({ ...p, annotations: [...(p.annotations || []), { id: Date.now(), type: 'label', x, y, text: txt }] })); } setActiveTool('cursor'); return; } setDrawing({ type: activeTool, x1: x, y1: y, x2: x, y2: y }); e.currentTarget.setPointerCapture(e.pointerId); }} onPointerMove={e => { if (!drawing) return; const r = e.currentTarget.getBoundingClientRect(); const x = Math.max(0, Math.min(100, ((e.clientX - r.left) / r.width) * 100)); const y = Math.max(0, Math.min(100, ((e.clientY - r.top) / r.height) * 100)); setDrawing({ ...drawing, x2: x, y2: y }); }} onPointerUp={e => { if (!drawing) return; e.currentTarget.releasePointerCapture(e.pointerId); if (Math.abs(drawing.x1 - drawing.x2) > 1 || Math.abs(drawing.y1 - drawing.y2) > 1) { onUpdate(p => ({ ...p, annotations: [...(p.annotations || []), { id: Date.now(), ...drawing }] })); } setDrawing(null); setActiveTool('cursor'); }} > {s.image ? (

) : (

)} {/* annotations layer */} {s.annotations && s.annotations.map(a => ( ))} {drawing && }

{s.caption && (

{s.caption}

)}

); } const Annotation = ({ a }) => { if (a.type === 'arrow') { return ( ); } if (a.type === 'blur') { const left = Math.min(a.x1, a.x2); const top = Math.min(a.y1, a.y2); const width = Math.abs(a.x1 - a.x2); const height = Math.abs(a.y1 - a.y2); return (

); } if (a.type === 'label') { return (

{a.text}

); } return null; }; Object.assign(window, { SGCanvas, PRESET_GRADIENTS, SOLID_COLORS, ASPECTS });