function App({ data, setData, user, isMultiplayer, sharedData, setSharedData, patchSharedData, pushToSharedArray, members, memberActivity, openProfile, share, startChat, pickAndUploadPhoto, getImageUrl, uploadImage, saveToPhotos, captureCanvas, pickAndUploadAudio, getAudioUrl, uploadAudio, pickAndUploadVideo, getVideoUrl, uploadVideo, openAuth, ai, getCurrentLocation }) { const appData = isMultiplayer ? sharedData : data; const writePatch = useCallback((patch) => { if (isMultiplayer && typeof patchSharedData === 'function') { patchSharedData(patch); } else { setData({ ...(data || {}), ...patch }); } }, [isMultiplayer, patchSharedData, setData, data]); const memberList = (isMultiplayer && members?.length > 0) ? members : [ { id: user.id, displayName: user.name || 'You', handle: user.handle, avatarUrl: user.avatarUrl, role: 'owner' } ]; const canvasRef = useRef(null); const animFrameRef = useRef(null); const dragRef = useRef({ active: false, startX: 0, startY: 0, rotX: -25, rotY: 35 }); const defaultB1 = { x: 1, y: 0, z: 0 }; const defaultB2 = { x: 0, y: 1, z: 0 }; const defaultY = { x: 1.5, y: 1.0, z: 2.5 }; const [b1, setB1] = useState(appData?.b1 || defaultB1); const [b2, setB2] = useState(appData?.b2 || defaultB2); const [yVec, setYVec] = useState(appData?.yVec || defaultY); const [rotX, setRotX] = useState(-25); const [rotY, setRotY] = useState(35); const [animProgress, setAnimProgress] = useState(1); const [isAnimating, setIsAnimating] = useState(false); const [showDecomp, setShowDecomp] = useState(true); const [showLabels, setShowLabels] = useState(true); const [droppedVectors, setDroppedVectors] = useState([]); const [activeTab, setActiveTab] = useState('controls'); useEffect(() => { if (appData?.b1) setB1(appData.b1); if (appData?.b2) setB2(appData.b2); if (appData?.yVec) setYVec(appData.yVec); if (appData?.droppedVectors) setDroppedVectors(appData.droppedVectors); }, [appData?.b1, appData?.b2, appData?.yVec, appData?.droppedVectors]); const dot = (a, b) => a.x * b.x + a.y * b.y + a.z * b.z; const scale = (v, s) => ({ x: v.x * s, y: v.y * s, z: v.z * s }); const add = (a, b) => ({ x: a.x + b.x, y: a.y + b.y, z: a.z + b.z }); const sub = (a, b) => ({ x: a.x - b.x, y: a.y - b.y, z: a.z - b.z }); const mag = (v) => Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z); const cross = (a, b) => ({ x: a.y * b.z - a.z * b.y, y: a.z * b.x - a.x * b.z, z: a.x * b.y - a.y * b.x }); const projectOntoPlane = useCallback((y, v1, v2) => { const A = [[dot(v1, v1), dot(v2, v1)], [dot(v1, v2), dot(v2, v2)]]; const b = [dot(v1, y), dot(v2, y)]; const det = A[0][0] * A[1][1] - A[0][1] * A[1][0]; if (Math.abs(det) < 1e-10) return { proj: { x: 0, y: 0, z: 0 }, residual: y, c1: 0, c2: 0 }; const c1 = (b[0] * A[1][1] - b[1] * A[0][1]) / det; const c2 = (A[0][0] * b[1] - A[1][0] * b[0]) / det; const proj = add(scale(v1, c1), scale(v2, c2)); const residual = sub(y, proj); return { proj, residual, c1, c2 }; }, []); const { proj: yHat, residual, c1, c2 } = useMemo( () => projectOntoPlane(yVec, b1, b2), [yVec, b1, b2, projectOntoPlane] ); const project3D = useCallback((p, rX, rY, w, h) => { const cosY = Math.cos(rY * Math.PI / 180); const sinY = Math.sin(rY * Math.PI / 180); const cosX = Math.cos(rX * Math.PI / 180); const sinX = Math.sin(rX * Math.PI / 180); let x1 = p.x * cosY - p.z * sinY; let z1 = p.x * sinY + p.z * cosY; let y1 = p.y * cosX - z1 * sinX; let z2 = p.y * sinX + z1 * cosX; const sc = 65; const perspective = 8; const factor = perspective / (perspective + z2 * 0.3); return { x: w / 2 + x1 * sc * factor, y: h / 2 - y1 * sc * factor, z: z2 }; }, []); const drawArrow = useCallback((ctx, from, to, color, lineWidth, dashed, label, rX, rY, w, h) => { const p1 = project3D(from, rX, rY, w, h); const p2 = project3D(to, rX, rY, w, h); ctx.save(); ctx.strokeStyle = color; ctx.lineWidth = lineWidth; ctx.lineCap = 'round'; if (dashed) ctx.setLineDash([6, 4]); ctx.beginPath(); ctx.moveTo(p1.x, p1.y); ctx.lineTo(p2.x, p2.y); ctx.stroke(); ctx.setLineDash([]); const dx = p2.x - p1.x; const dy = p2.y - p1.y; const len = Math.sqrt(dx * dx + dy * dy); if (len > 8) { const angle = Math.atan2(dy, dx); const headLen = Math.min(12, len * 0.3); ctx.fillStyle = color; ctx.beginPath(); ctx.moveTo(p2.x, p2.y); ctx.lineTo(p2.x - headLen * Math.cos(angle - 0.35), p2.y - headLen * Math.sin(angle - 0.35)); ctx.lineTo(p2.x - headLen * Math.cos(angle + 0.35), p2.y - headLen * Math.sin(angle + 0.35)); ctx.closePath(); ctx.fill(); } if (label && showLabels) { const midX = (p1.x + p2.x) / 2; const midY = (p1.y + p2.y) / 2; ctx.font = 'bold 13px Inter, system-ui, sans-serif'; ctx.fillStyle = color; ctx.textAlign = 'center'; const offsetX = dy > 0 ? -14 : 14; const offsetY = dx > 0 ? 14 : -14; ctx.fillText(label, midX + offsetX, midY + offsetY); } ctx.restore(); }, [project3D, showLabels]); const drawScene = useCallback(() => { const canvas = canvasRef.current; if (!canvas) return; const ctx = canvas.getContext('2d'); if (!ctx) return; const dpr = window.devicePixelRatio || 1; const rect = canvas.getBoundingClientRect(); canvas.width = rect.width * dpr; canvas.height = rect.height * dpr; ctx.scale(dpr, dpr); const w = rect.width; const h = rect.height; const grad = ctx.createRadialGradient(w / 2, h / 2, 0, w / 2, h / 2, w * 0.7); grad.addColorStop(0, '#0d1117'); grad.addColorStop(1, '#010409'); ctx.fillStyle = grad; ctx.fillRect(0, 0, w, h); const gridSize = 3; const gridStep = 1; ctx.globalAlpha = 0.12; for (let i = -gridSize; i <= gridSize; i += gridStep) { for (let j = -gridSize; j <= gridSize; j += gridStep) { const p = project3D({ x: i, y: 0, z: j }, rotX, rotY, w, h); ctx.fillStyle = '#58a6ff'; ctx.beginPath(); ctx.arc(p.x, p.y, 1.2, 0, Math.PI * 2); ctx.fill(); } } ctx.globalAlpha = 1; const axisLen = 3.5; ctx.globalAlpha = 0.25; drawArrow(ctx, { x: 0, y: 0, z: 0 }, { x: axisLen, y: 0, z: 0 }, '#8b949e', 1, true, null, rotX, rotY, w, h); drawArrow(ctx, { x: 0, y: 0, z: 0 }, { x: 0, y: axisLen, z: 0 }, '#8b949e', 1, true, null, rotX, rotY, w, h); drawArrow(ctx, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: axisLen }, '#8b949e', 1, true, null, rotX, rotY, w, h); ctx.globalAlpha = 1; const planeSize = 2.8; const steps = 8; const corners = []; for (let i = -1; i <= 1; i += 2) { for (let j = -1; j <= 1; j += 2) { corners.push(add(scale(b1, i * planeSize), scale(b2, j * planeSize))); } } const ordered = [corners[0], corners[1], corners[3], corners[2]]; const projCorners = (ordered || []).map(c => project3D(c, rotX, rotY, w, h)); const planeGrad = ctx.createLinearGradient( projCorners[0].x, projCorners[0].y, projCorners[2].x, projCorners[2].y ); planeGrad.addColorStop(0, 'rgba(88, 166, 255, 0.06)'); planeGrad.addColorStop(0.5, 'rgba(136, 87, 255, 0.1)'); planeGrad.addColorStop(1, 'rgba(88, 166, 255, 0.06)'); ctx.fillStyle = planeGrad; ctx.beginPath(); ctx.moveTo(projCorners[0].x, projCorners[0].y); for (let i = 1; i < (projCorners || []).length; i++) { ctx.lineTo(projCorners[i].x, projCorners[i].y); } ctx.closePath(); ctx.fill(); ctx.strokeStyle = 'rgba(88, 166, 255, 0.15)'; ctx.lineWidth = 0.5; for (let i = 0; i <= steps; i++) { const t = -1 + (2 * i / steps); const p1 = add(scale(b1, t * planeSize), scale(b2, -planeSize)); const p2 = add(scale(b1, t * planeSize), scale(b2, planeSize)); const pp1 = project3D(p1, rotX, rotY, w, h); const pp2 = project3D(p2, rotX, rotY, w, h); ctx.beginPath(); ctx.moveTo(pp1.x, pp1.y); ctx.lineTo(pp2.x, pp2.y); ctx.stroke(); const q1 = add(scale(b2, t * planeSize), scale(b1, -planeSize)); const q2 = add(scale(b2, t * planeSize), scale(b1, planeSize)); const qp1 = project3D(q1, rotX, rotY, w, h); const qp2 = project3D(q2, rotX, rotY, w, h); ctx.beginPath(); ctx.moveTo(qp1.x, qp1.y); ctx.lineTo(qp2.x, qp2.y); ctx.stroke(); } drawArrow(ctx, { x: 0, y: 0, z: 0 }, scale(b1, 2), '#58a6ff', 2.5, false, 'b\u2081', rotX, rotY, w, h); drawArrow(ctx, { x: 0, y: 0, z: 0 }, scale(b2, 2), '#7ee787', 2.5, false, 'b\u2082', rotX, rotY, w, h); const t = Math.min(animProgress, 1); const eased = t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2; const animY = t < 1 ? { x: yVec.x, y: yVec.y + (1 - eased) * 4, z: yVec.z } : yVec; const animAlpha = Math.min(t * 2, 1); ctx.globalAlpha = animAlpha; drawArrow(ctx, { x: 0, y: 0, z: 0 }, animY, '#f0883e', 3, false, 'y\u20D7', rotX, rotY, w, h); ctx.globalAlpha = 1; if (showDecomp && t >= 0.3) { const decompAlpha = Math.min((t - 0.3) / 0.3, 1); ctx.globalAlpha = decompAlpha; drawArrow(ctx, { x: 0, y: 0, z: 0 }, yHat, '#d2a8ff', 2.5, false, 'y\u0302', rotX, rotY, w, h); drawArrow(ctx, yHat, animY, '#f778ba', 2, true, 'y\u20D7\u2212y\u0302', rotX, rotY, w, h); if (t >= 0.6) { const rightAngleAlpha = Math.min((t - 0.6) / 0.2, 1); ctx.globalAlpha = rightAngleAlpha * 0.6; const n = cross(b1, b2); const nMag = mag(n); if (nMag > 1e-6) { const nNorm = scale(n, 1 / nMag); const rMag = mag(residual); if (rMag > 0.1) { const rNorm = scale(residual, 1 / rMag); const tangent = cross(rNorm, nNorm); const tMag = mag(tangent); if (tMag > 1e-6) { const tNorm = scale(tangent, 1 / tMag); const sqSize = 0.25; const corner = yHat; const p1r = add(corner, scale(rNorm, sqSize)); const p2r = add(add(corner, scale(rNorm, sqSize)), scale(tNorm, sqSize)); const p3r = add(corner, scale(tNorm, sqSize)); const pp0 = project3D(corner, rotX, rotY, w, h); const pp1 = project3D(p1r, rotX, rotY, w, h); const pp2 = project3D(p2r, rotX, rotY, w, h); const pp3 = project3D(p3r, rotX, rotY, w, h); ctx.strokeStyle = '#f778ba'; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(pp1.x, pp1.y); ctx.lineTo(pp2.x, pp2.y); ctx.lineTo(pp3.x, pp3.y); ctx.stroke(); } } } } ctx.globalAlpha = 1; } const origin = project3D({ x: 0, y: 0, z: 0 }, rotX, rotY, w, h); ctx.fillStyle = '#c9d1d9'; ctx.beginPath(); ctx.arc(origin.x, origin.y, 4, 0, Math.PI * 2); ctx.fill(); ctx.strokeStyle = 'rgba(201,209,217,0.3)'; ctx.lineWidth = 1; ctx.stroke(); if (showLabels) { ctx.font = '11px Inter, system-ui, sans-serif'; ctx.fillStyle = 'rgba(139,148,158,0.7)'; const xLabel = project3D({ x: axisLen + 0.3, y: 0, z: 0 }, rotX, rotY, w, h); ctx.fillText('x', xLabel.x, xLabel.y); const yLabel = project3D({ x: 0, y: axisLen + 0.3, z: 0 }, rotX, rotY, w, h); ctx.fillText('y', yLabel.x, yLabel.y); const zLabel = project3D({ x: 0, y: 0, z: axisLen + 0.3 }, rotX, rotY, w, h); ctx.fillText('z', zLabel.x, zLabel.y); } }, [rotX, rotY, b1, b2, yVec, yHat, residual, animProgress, showDecomp, showLabels, drawArrow, project3D]); useEffect(() => { drawScene(); }, [drawScene]); const dropNewVector = useCallback(() => { if (isAnimating) return; const randComp = () => (Math.random() - 0.5) * 5; const newY = { x: parseFloat(randComp().toFixed(2)), y: parseFloat((Math.random() * 3 + 0.5).toFixed(2)), z: parseFloat(randComp().toFixed(2)) }; setYVec(newY); setAnimProgress(0); setIsAnimating(true); const startTime = Date.now(); const duration = 1200; const animate = () => { const elapsed = Date.now() - startTime; const p = Math.min(elapsed / duration, 1); setAnimProgress(p); if (p < 1) { animFrameRef.current = requestAnimationFrame(animate); } else { setIsAnimating(false); const entry = { vec: newY, _user: { id: user?.id, displayName: user?.name || 'You', handle: user?.handle, profileImageUrl: user?.avatarUrl }, _timestamp: Date.now() }; setDroppedVectors(prev => { const updated = [entry, ...(prev || [])].slice(0, 20); writePatch({ yVec: newY, droppedVectors: updated }); return updated; }); } }; animFrameRef.current = requestAnimationFrame(animate); }, [isAnimating, user, writePatch]); useEffect(() => { return () => { if (animFrameRef.current) cancelAnimationFrame(animFrameRef.current); }; }, []); const handlePointerDown = useCallback((e) => { const rect = canvasRef.current?.getBoundingClientRect(); if (!rect) return; dragRef.current = { active: true, startX: e.clientX, startY: e.clientY, rotX, rotY }; }, [rotX, rotY]); const handlePointerMove = useCallback((e) => { if (!dragRef.current.active) return; const dx = e.clientX - dragRef.current.startX; const dy = e.clientY - dragRef.current.startY; setRotY(dragRef.current.rotY + dx * 0.4); setRotX(Math.max(-89, Math.min(89, dragRef.current.rotX + dy * 0.4))); }, []); const handlePointerUp = useCallback(() => { dragRef.current.active = false; }, []); const updateBasis = useCallback((which, axis, val) => { const num = parseFloat(val) || 0; if (which === 'b1') { const newB1 = { ...b1, [axis]: num }; setB1(newB1); writePatch({ b1: newB1 }); } else { const newB2 = { ...b2, [axis]: num }; setB2(newB2); writePatch({ b2: newB2 }); } }, [b1, b2, writePatch]); const SliderRow = useCallback(({ label, color, vec, which }) => { return React.createElement('div', { style: { marginBottom: 12 } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 } }, React.createElement('div', { style: { width: 10, height: 10, borderRadius: '50%', background: color, flexShrink: 0 } }), React.createElement('span', { style: { fontSize: 14, fontWeight: 600, color: '#c9d1d9', fontFamily: 'Inter, system-ui, sans-serif' } }, label) ), ['x', 'y', 'z'].map(axis => React.createElement('div', { key: axis, style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 } }, React.createElement('span', { style: { fontSize: 12, color: '#8b949e', width: 14, fontFamily: 'monospace' } }, axis), React.createElement('input', { type: 'range', min: -3, max: 3, step: 0.1, value: vec[axis], onChange: (e) => updateBasis(which, axis, e.target.value), style: { flex: 1, height: 6, accentColor: color, cursor: 'pointer' } }), React.createElement('span', { style: { fontSize: 12, color: '#c9d1d9', width: 36, textAlign: 'right', fontFamily: 'monospace' } }, vec[axis].toFixed(1)) ) ) ); }, [updateBasis]); const projMag = mag(yHat); const resMag = mag(residual); const yMag = mag(yVec); const angle = yMag > 1e-6 && projMag > 1e-6 ? Math.acos(Math.min(1, Math.max(-1, dot(yVec, yHat) / (yMag * projMag)))) * 180 / Math.PI : 0; return React.createElement('div', { style: { minHeight: '100dvh', display: 'flex', flexDirection: 'column', background: '#0d1117', color: '#c9d1d9', fontFamily: 'Inter, system-ui, sans-serif', paddingTop: 'max(env(safe-area-inset-top, 20px), 20px)', paddingBottom: 'env(safe-area-inset-bottom, 20px)', paddingLeft: 'max(env(safe-area-inset-left, 0px), 12px)', paddingRight: 'max(env(safe-area-inset-right, 0px), 12px)', maxWidth: 480, margin: '0 auto', width: '100%', boxSizing: 'border-box' } }, React.createElement('header', { style: { paddingBottom: 8, flexShrink: 0 } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' } }, React.createElement('div', null, React.createElement('h1', { style: { fontSize: 22, fontWeight: 700, margin: 0, background: 'linear-gradient(135deg, #58a6ff, #d2a8ff)', WebkitBackgroundClip: 'text', WebkitTextFillColor: 'transparent' } }, 'Lab 5: Projections'), React.createElement('p', { style: { fontSize: 12, color: '#8b949e', margin: '2px 0 0 0' } }, 'Orthogonal Projection onto Span{b\u2081, b\u2082}') ), React.createElement('div', { style: { display: 'flex', gap: 8, alignItems: 'center' } }, React.createElement('div', { style: { display: 'flex', gap: -4 } }, (memberList || []).slice(0, 4).map((m, i) => React.createElement('div', { key: m.id, onClick: () => m.handle ? openProfile(m.handle) : null, style: { width: 30, height: 30, borderRadius: '50%', border: '2px solid #0d1117', background: m.avatarUrl ? 'none' : '#21262d', backgroundImage: m.avatarUrl ? `url(${m.avatarUrl})` : 'none', backgroundSize: 'cover', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 14, cursor: 'pointer', marginLeft: i > 0 ? -8 : 0, zIndex: 4 - i } }, !m.avatarUrl ? '\uD83D\uDC64' : null) ) ), React.createElement('button', { onClick: share, style: { background: 'rgba(88,166,255,0.15)', border: '1px solid rgba(88,166,255,0.3)', borderRadius: 8, color: '#58a6ff', fontSize: 13, fontWeight: 600, padding: '6px 12px', cursor: 'pointer', display: 'flex', alignItems: 'center', gap: 4 } }, '\uD83D\uDD17 Share') ) ) ), React.createElement('div', { ref: canvasRef, style: { position: 'relative', width: '100%', aspectRatio: '4/3', borderRadius: 16, overflow: 'hidden', border: '1px solid rgba(88,166,255,0.15)', flexShrink: 0, touchAction: 'none', cursor: 'grab' } }, React.createElement('canvas', { ref: canvasRef, style: { width: '100%', height: '100%', display: 'block' }, onPointerDown: handlePointerDown, onPointerMove: handlePointerMove, onPointerUp: handlePointerUp, onPointerLeave: handlePointerUp, onPointerCancel: handlePointerUp }) ), React.createElement('div', { style: { display: 'flex', gap: 4, marginTop: 8, marginBottom: 8, background: '#161b22', borderRadius: 10, padding: 3 } }, ['controls', 'stats', 'history'].map(tab => React.createElement('button', { key: tab, onClick: () => setActiveTab(tab), style: { flex: 1, padding: '8px 0', borderRadius: 8, border: 'none', fontSize: 13, fontWeight: 600, cursor: 'pointer', background: activeTab === tab ? 'rgba(88,166,255,0.15)' : 'transparent', color: activeTab === tab ? '#58a6ff' : '#8b949e', transition: 'all 0.2s' } }, tab === 'controls' ? '\u2699\uFE0F Vectors' : tab === 'stats' ? '\uD83D\uDCCA Math' : '\uD83D\uDCDC History') ) ), React.createElement('div', { style: { flex: 1, overflowY: 'auto', WebkitOverflowScrolling: 'touch', paddingBottom: 80 } }, activeTab === 'controls' && React.createElement('div', { style: { background: '#161b22', borderRadius: 14, padding: 16 } }, React.createElement(SliderRow, { label: 'Basis b\u2081', color: '#58a6ff', vec: b1, which: 'b1' }), React.createElement(SliderRow, { label: 'Basis b\u2082', color: '#7ee787', vec: b2, which: 'b2' }), React.createElement('div', { style: { borderTop: '1px solid #21262d', paddingTop: 12, marginTop: 8 } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, marginBottom: 10 } }, React.createElement('div', { style: { width: 10, height: 10, borderRadius: '50%', background: '#f0883e' } }), React.createElement('span', { style: { fontSize: 14, fontWeight: 600 } }, 'Current y\u20D7'), React.createElement('span', { style: { fontSize: 12, color: '#8b949e', fontFamily: 'monospace' } }, `(${yVec.x.toFixed(1)}, ${yVec.y.toFixed(1)}, ${yVec.z.toFixed(1)})` ) ), React.createElement('div', { style: { display: 'flex', gap: 8 } }, React.createElement('label', { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: '#8b949e', cursor: 'pointer' } }, React.createElement('input', { type: 'checkbox', checked: showDecomp, onChange: () => setShowDecomp(!showDecomp), style: { accentColor: '#d2a8ff' } }), 'Decomposition' ), React.createElement('label', { style: { display: 'flex', alignItems: 'center', gap: 6, fontSize: 13, color: '#8b949e', cursor: 'pointer' } }, React.createElement('input', { type: 'checkbox', checked: showLabels, onChange: () => setShowLabels(!showLabels), style: { accentColor: '#d2a8ff' } }), 'Labels' ) ) ) ), activeTab === 'stats' && React.createElement('div', { style: { background: '#161b22', borderRadius: 14, padding: 16 } }, React.createElement('div', { style: { fontSize: 15, fontWeight: 700, marginBottom: 12, color: '#d2a8ff' } }, 'Projection Decomposition'), [ { label: 'y\u20D7 (original)', color: '#f0883e', val: `(${yVec.x.toFixed(2)}, ${yVec.y.toFixed(2)}, ${yVec.z.toFixed(2)})`, mag: yMag.toFixed(3) }, { label: 'y\u0302 (projection)', color: '#d2a8ff', val: `(${yHat.x.toFixed(2)}, ${yHat.y.toFixed(2)}, ${yHat.z.toFixed(2)})`, mag: projMag.toFixed(3) }, { label: 'y\u20D7\u2212y\u0302 (residual)', color: '#f778ba', val: `(${residual.x.toFixed(2)}, ${residual.y.toFixed(2)}, ${residual.z.toFixed(2)})`, mag: resMag.toFixed(3) }, ].map((item, i) => React.createElement('div', { key: i, style: { background: '#0d1117', borderRadius: 10, padding: 12, marginBottom: 8, borderLeft: `3px solid ${item.color}` } }, React.createElement('div', { style: { fontSize: 13, fontWeight: 600, color: item.color, marginBottom: 4 } }, item.label), React.createElement('div', { style: { fontSize: 13, fontFamily: 'monospace', color: '#c9d1d9' } }, item.val), React.createElement('div', { style: { fontSize: 11, color: '#8b949e', marginTop: 2 } }, `\u2016\u00B7\u2016 = ${item.mag}`) ) ), React.createElement('div', { style: { background: '#0d1117', borderRadius: 10, padding: 12, marginTop: 4 } }, React.createElement('div', { style: { fontSize: 13, fontWeight: 600, color: '#7ee787', marginBottom: 6 } }, 'Properties'), React.createElement('div', { style: { fontSize: 12, color: '#8b949e', marginBottom: 4, fontFamily: 'monospace' } }, `c\u2081 = ${c1.toFixed(3)}, c\u2082 = ${c2.toFixed(3)}` ), React.createElement('div', { style: { fontSize: 12, color: '#8b949e', marginBottom: 4, fontFamily: 'monospace' } }, `y\u0302 = ${c1.toFixed(2)}b\u2081 + ${c2.toFixed(2)}b\u2082` ), React.createElement('div', { style: { fontSize: 12, color: '#8b949e', marginBottom: 4, fontFamily: 'monospace' } }, `\u27E8residual, b\u2081\u27E9 = ${dot(residual, b1).toFixed(6)}` ), React.createElement('div', { style: { fontSize: 12, color: '#8b949e', marginBottom: 4, fontFamily: 'monospace' } }, `\u27E8residual, b\u2082\u27E9 = ${dot(residual, b2).toFixed(6)}` ), React.createElement('div', { style: { fontSize: 12, color: '#8b949e', fontFamily: 'monospace' } }, `\u2220(y\u20D7, plane) = ${angle.toFixed(1)}\u00B0` ), React.createElement('div', { style: { marginTop: 8, padding: '6px 10px', borderRadius: 6, background: Math.abs(dot(residual, b1)) < 0.001 && Math.abs(dot(residual, b2)) < 0.001 ? 'rgba(126,231,135,0.1)' : 'rgba(240,136,62,0.1)', border: Math.abs(dot(residual, b1)) < 0.001 && Math.abs(dot(residual, b2)) < 0.001 ? '1px solid rgba(126,231,135,0.3)' : '1px solid rgba(240,136,62,0.3)', fontSize: 12, color: Math.abs(dot(residual, b1)) < 0.001 && Math.abs(dot(residual, b2)) < 0.001 ? '#7ee787' : '#f0883e' } }, Math.abs(dot(residual, b1)) < 0.001 && Math.abs(dot(residual, b2)) < 0.001 ? '\u2705 Residual is orthogonal to the plane (verified!)' : '\u26A0\uFE0F Computing orthogonality...') ) ), activeTab === 'history' && React.createElement('div', { style: { background: '#161b22', borderRadius: 14, padding: 16 } }, React.createElement('div', { style: { fontSize: 15, fontWeight: 700, marginBottom: 12, color: '#f0883e' } }, 'Dropped Vectors'), (droppedVectors ?? []).length === 0 ? React.createElement('div', { style: { textAlign: 'center', padding: 24, color: '#8b949e' } }, React.createElement('div', { style: { fontSize: 32, marginBottom: 8 } }, '\uD83C\uDFAF'), React.createElement('div', { style: { fontSize: 13 } }, 'Drop a vector to see it here') ) : (droppedVectors ?? []).map((entry, i) => React.createElement('div', { key: i, onClick: () => { if (entry?.vec) { setYVec(entry.vec); setAnimProgress(1); } }, style: { background: '#0d1117', borderRadius: 10, padding: 12, marginBottom: 6, cursor: 'pointer', display: 'flex', justifyContent: 'space-between', alignItems: 'center', border: '1px solid transparent', transition: 'border-color 0.2s' } }, React.createElement('div', { style: { display: 'flex', alignItems: 'center', gap: 8, flex: 1, minWidth: 0 } }, entry?._user?.profileImageUrl ? React.createElement('img', { src: entry._user.profileImageUrl, style: { width: 24, height: 24, borderRadius: '50%', flexShrink: 0, objectFit: 'cover' }, onClick: (e) => { e.stopPropagation(); entry?._user?.handle && openProfile(entry._user.handle); } }) : React.createElement('div', { style: { width: 24, height: 24, borderRadius: '50%', background: '#21262d', display: 'flex', alignItems: 'center', justifyContent: 'center', fontSize: 12, flexShrink: 0, cursor: entry?._user?.handle ? 'pointer' : 'default' }, onClick: (e) => { e.stopPropagation(); entry?._user?.handle && openProfile(entry._user.handle); } }, '\uD83D\uDC64'), React.createElement('div', { style: { minWidth: 0 } }, React.createElement('div', { style: { fontSize: 13, fontFamily: 'monospace', color: '#f0883e' } }, `(${entry?.vec?.x?.toFixed(1) ?? '?'}, ${entry?.vec?.y?.toFixed(1) ?? '?'}, ${entry?.vec?.z?.toFixed(1) ?? '?'})` ), React.createElement('div', { style: { fontSize: 11, color: '#8b949e', marginTop: 2 } }, `by ${entry?._user?.displayName || entry?.droppedBy || 'Unknown'} \u2022 ${(entry?._timestamp || entry?.timestamp) ? new Date(entry?._timestamp || entry?.timestamp).toLocaleTimeString() : ''}` ) ) ), React.createElement('span', { style: { fontSize: 11, color: '#58a6ff' } }, 'tap to load') ) ) ) ), React.createElement('div', { style: { position: 'fixed', bottom: 'calc(env(safe-area-inset-bottom, 20px) + 12px)', left: 'max(env(safe-area-inset-left, 0px), 12px)', right: 'max(env(safe-area-inset-right, 0px), 12px)', maxWidth: 456, margin: '0 auto' } }, React.createElement('button', { onClick: dropNewVector, disabled: isAnimating, style: { width: '100%', minHeight: 54, borderRadius: 14, border: 'none', fontSize: 17, fontWeight: 700, cursor: isAnimating ? 'wait' : 'pointer', background: isAnimating ? 'linear-gradient(135deg, #21262d, #30363d)' : 'linear-gradient(135deg, #58a6ff, #d2a8ff)', color: isAnimating ? '#8b949e' : '#0d1117', boxShadow: isAnimating ? 'none' : '0 4px 20px rgba(88,166,255,0.3)', transition: 'all 0.3s', transform: isAnimating ? 'scale(0.98)' : 'scale(1)', display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8 } }, isAnimating ? '\u2728 Projecting...' : '\uD83C\uDFAF Drop New Vector' ) ) ); }