[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_327":328,"_329":330},"routes/_app.x.$handle.$name",{"_98":97,"_32":46,"_106":88,"_27":107,"_13":14,"_108":-5,"_11":109,"_110":111,"_112":113,"_114":115,"_116":117,"_20":-5,"_118":-5,"_119":-5,"_120":25,"_121":122,"_123":60,"_124":-5,"_125":-5,"_126":127},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",19,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/App.tsx","latestPath","fileId","b3d3a260-59a2-11f0-b3dd-f69ea79377d9","name","App.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState, useCallback } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport * as THREE from 'https://esm.sh/three@0.158.0';\nimport { GeometryViewer } from './GeometryViewer.tsx';\nimport { ControlPanel } from './ControlPanel.tsx';\nimport { CrossSection } from './CrossSection.tsx';\nimport { AppState, ShapeType, TransformationState } from '../../shared/types.ts';\n\nexport function App() {\n const containerRef = useRef(null);\n const [appState, setAppState] = useState({\n currentShape: 'tesseract',\n dimension: 4,\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n },\n camera: {\n position: { x: 0, y: 0, z: 5 },\n target: { x: 0, y: 0, z: 0 },\n up: { x: 0, y: 1, z: 0 },\n fov: 75\n },\n lighting: {\n ambient: 0.4,\n directional: {\n intensity: 0.8,\n direction: { x: 1, y: 1, z: 1 }\n },\n point: {\n intensity: 0.6,\n position: { x: 2, y: 2, z: 2 }\n }\n },\n projection: {\n distance: 2,\n perspective: true,\n viewAngle: 0\n },\n crossSection: {\n enabled: false,\n dimension: 4,\n position: 0,\n normal: { x: 0, y: 0, z: 0, w: 1 }\n },\n rendering: {\n showVertices: true,\n showEdges: true,\n showFaces: false,\n wireframe: false,\n opacity: 0.8,\n color: '#00d4ff',\n edgeColor: '#ffffff',\n vertexColor: '#ffff00'\n },\n isAnimating: false,\n animationSpeed: 1\n });\n\n const [isAutoRotating, setIsAutoRotating] = useState(false);\n const [showCrossSection, setShowCrossSection] = useState(false);\n const [currentShape4D, setCurrentShape4D] = useState(null);\n const animationFrameRef = useRef();\n\n // Handle control panel events\n useEffect(() => {\n const handleDimensionChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n dimension: e.detail.dimension,\n currentShape: e.detail.dimension === 4 ? 'tesseract' : 'penteract'\n }));\n };\n\n const handleShapeChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n currentShape: e.detail.shape as ShapeType\n }));\n };\n\n const handleScaleChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n transformations: {\n ...prev.transformations,\n scale: e.detail.scale\n }\n }));\n };\n\n const handleRotationChanged = (e: CustomEvent) => {\n const { plane, angle } = e.detail;\n setAppState(prev => ({\n ...prev,\n transformations: {\n ...prev.transformations,\n rotation4D: {\n ...prev.transformations.rotation4D,\n [plane]: angle\n }\n }\n }));\n };\n\n const handleProjectionDistanceChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n projection: {\n ...prev.projection,\n distance: e.detail.distance\n }\n }));\n };\n\n const handleCameraFOVChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n camera: {\n ...prev.camera,\n fov: e.detail.fov\n }\n }));\n };\n\n const handleCrossSectionToggled = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n crossSection: {\n ...prev.crossSection,\n enabled: e.detail.enabled\n }\n }));\n };\n\n const handleCrossSectionPositionChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n crossSection: {\n ...prev.crossSection,\n position: e.detail.position\n }\n }));\n };\n\n const handleAutoRotateToggled = (e: CustomEvent) => {\n setIsAutoRotating(e.detail.enabled);\n };\n\n const handleRenderingChanged = (type: string) => (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n [type]: e.detail.enabled !== undefined ? e.detail.enabled : e.detail.opacity\n }\n }));\n };\n\n // Add event listeners\n window.addEventListener('dimensionChanged', handleDimensionChanged as EventListener);\n window.addEventListener('shapeChanged', handleShapeChanged as EventListener);\n window.addEventListener('scaleChanged', handleScaleChanged as EventListener);\n window.addEventListener('rotationChanged', handleRotationChanged as EventListener);\n window.addEventListener('projectionDistanceChanged', handleProjectionDistanceChanged as EventListener);\n window.addEventListener('cameraFOVChanged', handleCameraFOVChanged as EventListener);\n window.addEventListener('crossSectionToggled', handleCrossSectionToggled as EventListener);\n window.addEventListener('crossSectionPositionChanged', handleCrossSectionPositionChanged as EventListener);\n window.addEventListener('autoRotateToggled', handleAutoRotateToggled as EventListener);\n \n window.addEventListener('showVerticesChanged', handleRenderingChanged('showVertices') as EventListener);\n window.addEventListener('showEdgesChanged', handleRenderingChanged('showEdges') as EventListener);\n window.addEventListener('showFacesChanged', handleRenderingChanged('showFaces') as EventListener);\n window.addEventListener('wireframeModeChanged', handleRenderingChanged('wireframe') as EventListener);\n window.addEventListener('opacityChanged', handleRenderingChanged('opacity') as EventListener);\n\n return () => {\n window.removeEventListener('dimensionChanged', handleDimensionChanged as EventListener);\n window.removeEventListener('shapeChanged', handleShapeChanged as EventListener);\n window.removeEventListener('scaleChanged', handleScaleChanged as EventListener);\n window.removeEventListener('rotationChanged', handleRotationChanged as EventListener);\n window.removeEventListener('projectionDistanceChanged', handleProjectionDistanceChanged as EventListener);\n window.removeEventListener('cameraFOVChanged', handleCameraFOVChanged as EventListener);\n window.removeEventListener('crossSectionToggled', handleCrossSectionToggled as EventListener);\n window.removeEventListener('crossSectionPositionChanged', handleCrossSectionPositionChanged as EventListener);\n window.removeEventListener('autoRotateToggled', handleAutoRotateToggled as EventListener);\n \n window.removeEventListener('showVerticesChanged', handleRenderingChanged('showVertices') as EventListener);\n window.removeEventListener('showEdgesChanged', handleRenderingChanged('showEdges') as EventListener);\n window.removeEventListener('showFacesChanged', handleRenderingChanged('showFaces') as EventListener);\n window.removeEventListener('wireframeModeChanged', handleRenderingChanged('wireframe') as EventListener);\n window.removeEventListener('opacityChanged', handleRenderingChanged('opacity') as EventListener);\n };\n }, []);\n\n // Auto rotation animation\n useEffect(() => {\n if (isAutoRotating) {\n const animate = () => {\n setAppState(prev => {\n const newRotations = { ...prev.transformations.rotation4D };\n \n // Rotate in multiple planes for interesting motion\n newRotations.xy += 0.01;\n newRotations.zw += 0.008;\n newRotations.xw += 0.005;\n \n // Keep angles in reasonable range\n Object.keys(newRotations).forEach(key => {\n if (newRotations[key as keyof typeof newRotations] > Math.PI * 2) {\n newRotations[key as keyof typeof newRotations] -= Math.PI * 2;\n }\n });\n\n return {\n ...prev,\n transformations: {\n ...prev.transformations,\n rotation4D: newRotations\n }\n };\n });\n\n animationFrameRef.current = requestAnimationFrame(animate);\n };\n\n animationFrameRef.current = requestAnimationFrame(animate);\n } else {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n }\n\n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, [isAutoRotating]);\n\n // Handle window resize\n useEffect(() => {\n const handleResize = () => {\n // Trigger resize event for the geometry viewer\n window.dispatchEvent(new Event('resize'));\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n // Handle keyboard shortcuts\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case ' ':\n e.preventDefault();\n setIsAutoRotating(prev => !prev);\n break;\n case 'r':\n if (e.ctrlKey || e.metaKey) {\n e.preventDefault();\n // Reset transformations\n setAppState(prev => ({\n ...prev,\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n }\n }));\n }\n break;\n case '1':\n case '2':\n case '3':\n case '4':\n if (!e.ctrlKey && !e.metaKey) {\n const shapeIndex = parseInt(e.key) - 1;\n const shapes4D = ['tesseract', '16-cell', '600-cell', '120-cell'];\n const shapes5D = ['penteract', '5-simplex', '5-orthoplex', 'custom'];\n const shapes = appState.dimension === 4 ? shapes4D : shapes5D;\n \n if (shapeIndex < shapes.length) {\n setAppState(prev => ({\n ...prev,\n currentShape: shapes[shapeIndex] as ShapeType\n }));\n }\n }\n break;\n case 'v':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n showVertices: !prev.rendering.showVertices\n }\n }));\n break;\n case 'e':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n showEdges: !prev.rendering.showEdges\n }\n }));\n break;\n case 'f':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n showFaces: !prev.rendering.showFaces\n }\n }));\n break;\n case 'w':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n wireframe: !prev.rendering.wireframe\n }\n }));\n break;\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [appState.dimension]);\n\n return (\n

\n \n \n {/* Help overlay - shown on first load */}\n

Keyboard Shortcuts

\n Space: Toggle auto-rotation
\n Ctrl+R: Reset transformations
\n 1-4: Select shape
\n V: Toggle vertices
\n E: Toggle edges
\n F: Toggle faces
\n W: Toggle wireframe
\n

\n \n

\n );\n}","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useState, useCallback } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport * as THREE from 'https://esm.sh/three@0.158.0';\nimport { GeometryViewer } from './GeometryViewer.tsx';\nimport { ControlPanel } from './ControlPanel.tsx';\nimport { CrossSection } from './CrossSection.tsx';\nimport { AppState, ShapeType, TransformationState } from '../../shared/types.ts';\n\nexport function App() {\n const containerRef = useRef(null);\n const [appState, setAppState] = useState({\n currentShape: 'tesseract',\n dimension: 4,\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n },\n camera: {\n position: { x: 0, y: 0, z: 5 },\n target: { x: 0, y: 0, z: 0 },\n up: { x: 0, y: 1, z: 0 },\n fov: 75\n },\n lighting: {\n ambient: 0.4,\n directional: {\n intensity: 0.8,\n direction: { x: 1, y: 1, z: 1 }\n },\n point: {\n intensity: 0.6,\n position: { x: 2, y: 2, z: 2 }\n }\n },\n projection: {\n distance: 2,\n perspective: true,\n viewAngle: 0\n },\n crossSection: {\n enabled: false,\n dimension: 4,\n position: 0,\n normal: { x: 0, y: 0, z: 0, w: 1 }\n },\n rendering: {\n showVertices: true,\n showEdges: true,\n showFaces: false,\n wireframe: false,\n opacity: 0.8,\n color: '#00d4ff',\n edgeColor: '#ffffff',\n vertexColor: '#ffff00'\n },\n isAnimating: false,\n animationSpeed: 1\n });\n\n const [isAutoRotating, setIsAutoRotating] = useState(false);\n const [showCrossSection, setShowCrossSection] = useState(false);\n const [currentShape4D, setCurrentShape4D] = useState(null);\n const animationFrameRef = useRef();\n\n // Handle control panel events\n useEffect(() => {\n const handleDimensionChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n dimension: e.detail.dimension,\n currentShape: e.detail.dimension === 4 ? 'tesseract' : 'penteract'\n }));\n };\n\n const handleShapeChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n currentShape: e.detail.shape as ShapeType\n }));\n };\n\n const handleScaleChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n transformations: {\n ...prev.transformations,\n scale: e.detail.scale\n }\n }));\n };\n\n const handleRotationChanged = (e: CustomEvent) => {\n const { plane, angle } = e.detail;\n setAppState(prev => ({\n ...prev,\n transformations: {\n ...prev.transformations,\n rotation4D: {\n ...prev.transformations.rotation4D,\n [plane]: angle\n }\n }\n }));\n };\n\n const handleProjectionDistanceChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n projection: {\n ...prev.projection,\n distance: e.detail.distance\n }\n }));\n };\n\n const handleCameraFOVChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n camera: {\n ...prev.camera,\n fov: e.detail.fov\n }\n }));\n };\n\n const handleCrossSectionToggled = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n crossSection: {\n ...prev.crossSection,\n enabled: e.detail.enabled\n }\n }));\n };\n\n const handleCrossSectionPositionChanged = (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n crossSection: {\n ...prev.crossSection,\n position: e.detail.position\n }\n }));\n };\n\n const handleAutoRotateToggled = (e: CustomEvent) => {\n setIsAutoRotating(e.detail.enabled);\n };\n\n const handleRenderingChanged = (type: string) => (e: CustomEvent) => {\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n [type]: e.detail.enabled !== undefined ? e.detail.enabled : e.detail.opacity\n }\n }));\n };\n\n // Add event listeners\n window.addEventListener('dimensionChanged', handleDimensionChanged as EventListener);\n window.addEventListener('shapeChanged', handleShapeChanged as EventListener);\n window.addEventListener('scaleChanged', handleScaleChanged as EventListener);\n window.addEventListener('rotationChanged', handleRotationChanged as EventListener);\n window.addEventListener('projectionDistanceChanged', handleProjectionDistanceChanged as EventListener);\n window.addEventListener('cameraFOVChanged', handleCameraFOVChanged as EventListener);\n window.addEventListener('crossSectionToggled', handleCrossSectionToggled as EventListener);\n window.addEventListener('crossSectionPositionChanged', handleCrossSectionPositionChanged as EventListener);\n window.addEventListener('autoRotateToggled', handleAutoRotateToggled as EventListener);\n \n window.addEventListener('showVerticesChanged', handleRenderingChanged('showVertices') as EventListener);\n window.addEventListener('showEdgesChanged', handleRenderingChanged('showEdges') as EventListener);\n window.addEventListener('showFacesChanged', handleRenderingChanged('showFaces') as EventListener);\n window.addEventListener('wireframeModeChanged', handleRenderingChanged('wireframe') as EventListener);\n window.addEventListener('opacityChanged', handleRenderingChanged('opacity') as EventListener);\n\n return () => {\n window.removeEventListener('dimensionChanged', handleDimensionChanged as EventListener);\n window.removeEventListener('shapeChanged', handleShapeChanged as EventListener);\n window.removeEventListener('scaleChanged', handleScaleChanged as EventListener);\n window.removeEventListener('rotationChanged', handleRotationChanged as EventListener);\n window.removeEventListener('projectionDistanceChanged', handleProjectionDistanceChanged as EventListener);\n window.removeEventListener('cameraFOVChanged', handleCameraFOVChanged as EventListener);\n window.removeEventListener('crossSectionToggled', handleCrossSectionToggled as EventListener);\n window.removeEventListener('crossSectionPositionChanged', handleCrossSectionPositionChanged as EventListener);\n window.removeEventListener('autoRotateToggled', handleAutoRotateToggled as EventListener);\n \n window.removeEventListener('showVerticesChanged', handleRenderingChanged('showVertices') as EventListener);\n window.removeEventListener('showEdgesChanged', handleRenderingChanged('showEdges') as EventListener);\n window.removeEventListener('showFacesChanged', handleRenderingChanged('showFaces') as EventListener);\n window.removeEventListener('wireframeModeChanged', handleRenderingChanged('wireframe') as EventListener);\n window.removeEventListener('opacityChanged', handleRenderingChanged('opacity') as EventListener);\n };\n }, []);\n\n // Auto rotation animation\n useEffect(() => {\n if (isAutoRotating) {\n const animate = () => {\n setAppState(prev => {\n const newRotations = { ...prev.transformations.rotation4D };\n \n // Rotate in multiple planes for interesting motion\n newRotations.xy += 0.01;\n newRotations.zw += 0.008;\n newRotations.xw += 0.005;\n \n // Keep angles in reasonable range\n Object.keys(newRotations).forEach(key => {\n if (newRotations[key as keyof typeof newRotations] > Math.PI * 2) {\n newRotations[key as keyof typeof newRotations] -= Math.PI * 2;\n }\n });\n\n return {\n ...prev,\n transformations: {\n ...prev.transformations,\n rotation4D: newRotations\n }\n };\n });\n\n animationFrameRef.current = requestAnimationFrame(animate);\n };\n\n animationFrameRef.current = requestAnimationFrame(animate);\n } else {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n }\n\n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, [isAutoRotating]);\n\n // Handle window resize\n useEffect(() => {\n const handleResize = () => {\n // Trigger resize event for the geometry viewer\n window.dispatchEvent(new Event('resize'));\n };\n\n window.addEventListener('resize', handleResize);\n return () => window.removeEventListener('resize', handleResize);\n }, []);\n\n // Handle keyboard shortcuts\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n switch (e.key) {\n case ' ':\n e.preventDefault();\n setIsAutoRotating(prev => !prev);\n break;\n case 'r':\n if (e.ctrlKey || e.metaKey) {\n e.preventDefault();\n // Reset transformations\n setAppState(prev => ({\n ...prev,\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n }\n }));\n }\n break;\n case '1':\n case '2':\n case '3':\n case '4':\n if (!e.ctrlKey && !e.metaKey) {\n const shapeIndex = parseInt(e.key) - 1;\n const shapes4D = ['tesseract', '16-cell', '600-cell', '120-cell'];\n const shapes5D = ['penteract', '5-simplex', '5-orthoplex', 'custom'];\n const shapes = appState.dimension === 4 ? shapes4D : shapes5D;\n \n if (shapeIndex < shapes.length) {\n setAppState(prev => ({\n ...prev,\n currentShape: shapes[shapeIndex] as ShapeType\n }));\n }\n }\n break;\n case 'v':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n showVertices: !prev.rendering.showVertices\n }\n }));\n break;\n case 'e':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n showEdges: !prev.rendering.showEdges\n }\n }));\n break;\n case 'f':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n showFaces: !prev.rendering.showFaces\n }\n }));\n break;\n case 'w':\n setAppState(prev => ({\n ...prev,\n rendering: {\n ...prev.rendering,\n wireframe: !prev.rendering.wireframe\n }\n }));\n break;\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n return () => window.removeEventListener('keydown', handleKeyDown);\n }, [appState.dimension]);\n\n return (\n

\n \n \n setAppState(prev => ({ ...prev, ...newState }))}\n />\n\n {showCrossSection && (\n

\n setAppState(prev => ({ \n ...prev, \n crossSection: settings \n }))}\n shape4D={currentShape4D}\n />\n

\n )}\n\n {/* Floating action buttons */}\n

\n setIsAutoRotating(!isAutoRotating)}\n title={isAutoRotating ? 'Stop auto-rotation' : 'Start auto-rotation'}\n onMouseEnter={(e) => {\n e.currentTarget.style.transform = 'scale(1.1)';\n e.currentTarget.style.background = 'rgba(0, 212, 255, 1)';\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.transform = 'scale(1)';\n e.currentTarget.style.background = 'rgba(0, 212, 255, 0.9)';\n }}\n >\n {isAutoRotating ? '⏸️' : '▶️'}\n \n\n setShowCrossSection(!showCrossSection)}\n title={showCrossSection ? 'Hide cross-section' : 'Show cross-section'}\n onMouseEnter={(e) => {\n e.currentTarget.style.transform = 'scale(1.1)';\n e.currentTarget.style.background = 'rgba(255, 68, 68, 1)';\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.transform = 'scale(1)';\n e.currentTarget.style.background = 'rgba(255, 68, 68, 0.9)';\n }}\n >\n ✂️\n \n\n {\n // Reset all transformations\n setAppState(prev => ({\n ...prev,\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n }\n }));\n }}\n title=\"Reset transformations\"\n onMouseEnter={(e) => {\n e.currentTarget.style.transform = 'scale(1.1)';\n e.currentTarget.style.background = 'rgba(68, 255, 68, 1)';\n }}\n onMouseLeave={(e) => {\n e.currentTarget.style.transform = 'scale(1)';\n e.currentTarget.style.background = 'rgba(68, 255, 68, 0.9)';\n }}\n >\n 🔄\n \n

\n \n {/* Help overlay - shown on first load */}\n

Welcome to Higher Dimensional Geometry!

\n Mouse Controls:
\n • Drag to rotate the camera
\n • Scroll to zoom in/out

\n \n Keyboard Shortcuts:
\n • Space: Toggle auto-rotation
\n • Ctrl+R: Reset transformations
\n • 1-4: Select shape
\n • V: Toggle vertices
\n • E: Toggle edges
\n • F: Toggle faces
\n • W: Toggle wireframe

\n\n Features:
\n • Explore 4D and 5D shapes
\n • Real-time transformations
\n • Cross-section analysis
\n • Multiple projection methods\n

\n \n

\n\n {/* Performance indicator */}\n

FPS: 60

Vertices: 0

Shape: {appState.currentShape}

Dimension: {appState.dimension}D

\n );\n}","createdAt",["D",1751721923172],"branchVersion","branchId","6b235b56-59a1-11f0-ab17-f69ea79377d9","id","6b230034-59a1-11f0-ab17-f69ea79377d9","AIDA",["D",1751721027052],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","4d geometry","imageUrl","d9951e10-16dc-11f0-9d61-bf534f47ce53","pinnedFileId","fc8be6e8-59a2-11f0-a457-f69ea79377d9","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","a87ae3da-e311-4bfb-919e-aa8beb34d11f","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_98":97,"_105":101},"org",{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},"branch",{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"isOwned",66,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","spooky","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18ydmFPZkZqOVNkRDN1cTJPUEZJZGtDUHpkNGYifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":323,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":60,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":324,"_82":325,"_84":326,"_86":25},"tree",[171,173,182,190],"files",[171,172,173,174,175,176,177,178,179,180,181,182,183,184,185,186,187,188,189,190],"counts",{"_161":64,"_162":145,"_163":64,"_164":165,"_166":167},"contents",[128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_44":155,"_32":156,"_30":157,"_135":-5,"_42":43,"_41":158,"_137":60,"_39":159,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":160},{"_44":149,"_32":150,"_30":151,"_135":-5,"_42":43,"_41":152,"_137":60,"_39":153,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":154},{"_44":142,"_32":143,"_30":144,"_135":-5,"_42":43,"_41":145,"_137":60,"_39":146,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_27":148},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":25,"_39":138,"_13":64,"_34":20,"_36":139,"_24":25,"_140":-5,"_27":141},"9f5ca8aa-59a1-11f0-8ca0-f69ea79377d9","README.md","9f5ca97c-59a1-11f0-8ca0-f69ea79377d9","parentId",1,"latest",["D",1751721114669],"# Higher Dimensional Geometry Visualizer\n\nA Next.js application for visualizing and interacting with 4D and 5D geometric shapes and their transformations.\n\n## Features\n\n- **4D/5D Shape Visualization**: Render hypercubes, pentachorons, and other higher-dimensional primitives\n- **Real-time Transformations**: Rotate, scale, and translate shapes in higher dimensions\n- **3D Projections**: View how higher-dimensional objects project into 3D space\n- **Interactive Controls**: Intuitive UI for manipulating shapes and camera perspectives\n- **Cross-sections**: Explore slices through higher-dimensional objects\n- **Performance Optimized**: Efficient calculations and rendering for complex geometry\n- **Responsive Design**: Works across desktop and mobile devices\n\n## Supported Shapes\n\n- **4D Shapes**: Tesseract (4D cube), 16-cell, 600-cell, 120-cell\n- **5D Shapes**: Penteract (5D cube), 5-simplex, 5-orthoplex\n- **Custom Primitives**: User-defined higher-dimensional objects\n\n## Technology Stack\n\n- Next.js with TypeScript\n- Three.js for 3D rendering\n- React Three Fiber for React integration\n- Custom mathematical libraries for higher-dimensional calculations\n- Tailwind CSS for styling\n\n## Project Structure\n\n```\n├── backend/\n│ ├── index.ts # API endpoints\n│ └── routes/\n│ └── calculations.ts # Mathematical computation endpoints\n├── frontend/\n│ ├── components/\n│ │ ├── App.tsx # Main application component\n│ │ ├── GeometryViewer.tsx # 3D visualization component\n│ │ ├── ControlPanel.tsx # User interface controls\n│ │ ├── ShapeSelector.tsx # Shape selection interface\n│ │ └── CrossSection.tsx # Cross-section visualization\n│ ├── index.html # Main HTML template\n│ ├── index.tsx # Frontend entry point\n│ └── style.css # Global styles\n├── shared/\n│ ├── math/\n│ │ ├── geometry4d.ts # 4D geometric calculations\n│ │ ├── geometry5d.ts # 5D geometric calculations\n│ │ ├── projections.ts # Projection algorithms\n│ │ └── transformations.ts # Transformation matrices\n│ ├── types.ts # Shared TypeScript types\n│ └── utils.ts # Utility functions\n└── README.md\n```\n\n## Getting Started\n\n1. The application runs as an HTTP val\n2. Navigate to the main page to start exploring higher-dimensional geometry\n3. Use the control panel to select shapes, adjust transformations, and modify viewing parameters\n4. Interact with the 3D viewport to explore projections and cross-sections\n\n## Mathematical Background\n\nThis application implements advanced concepts from higher-dimensional geometry:\n- Orthogonal projections from nD to 3D space\n- Rotation matrices in 4D and 5D spaces\n- Cross-sectional analysis of higher-dimensional objects\n- Real-time transformation calculations optimized for performance","label",[133],"a83b53f4-59a1-11f0-bf43-f69ea79377d9","shared","6a7dd57b-35c1-426f-9cb3-ba018acef2b3",2,["D",1751721129544],"directory",[143],"5cd807bc-59a2-11f0-acd0-f69ea79377d9","frontend","a68dd96c-250c-4a79-971d-ae156db7cb7b",8,["D",1751721432562],[150],"fc8bf6ec-59a2-11f0-a457-f69ea79377d9","backend","a27fdd47-9285-40e2-9399-02db727e0399",13,["D",1751721700504],[156],"pulls","branches","forks","envVars",{"_168":64,"_170":64},"connections",{"_168":64,"_169":64},"count","unfilledCount","emptyCount",{"_44":155,"_32":156,"_30":157,"_135":-5,"_42":43,"_41":158,"_137":60,"_39":320,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_192":321,"_27":322},{"_44":312,"_32":313,"_30":58,"_135":157,"_42":43,"_41":314,"_137":25,"_39":315,"_13":136,"_34":316,"_36":317,"_24":25,"_140":-5,"_192":318,"_27":319},{"_44":149,"_32":150,"_30":151,"_135":-5,"_42":43,"_41":152,"_137":60,"_39":309,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_192":310,"_27":311},{"_44":304,"_32":283,"_30":277,"_135":151,"_42":43,"_41":305,"_137":60,"_39":306,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_192":307,"_27":308},{"_44":300,"_32":33,"_30":31,"_135":277,"_42":43,"_41":14,"_137":25,"_39":301,"_13":239,"_34":35,"_36":38,"_24":25,"_140":-5,"_192":302,"_27":303},{"_44":292,"_32":293,"_30":294,"_135":277,"_42":43,"_41":295,"_137":25,"_39":296,"_13":64,"_34":35,"_36":297,"_24":25,"_140":-5,"_192":298,"_27":299},{"_44":284,"_32":285,"_30":286,"_135":277,"_42":43,"_41":287,"_137":60,"_39":288,"_13":64,"_34":35,"_36":289,"_24":25,"_140":-5,"_192":290,"_27":291},{"_44":274,"_32":275,"_30":276,"_135":277,"_42":43,"_41":278,"_137":25,"_39":279,"_13":64,"_34":35,"_36":280,"_24":25,"_140":-5,"_192":281,"_27":282},{"_44":267,"_32":268,"_30":269,"_135":151,"_42":43,"_41":152,"_137":25,"_39":270,"_13":64,"_34":20,"_36":271,"_24":25,"_140":-5,"_192":272,"_27":273},{"_44":259,"_32":260,"_30":261,"_135":151,"_42":43,"_41":262,"_137":25,"_39":263,"_13":64,"_34":35,"_36":264,"_24":25,"_140":-5,"_192":265,"_27":266},{"_44":251,"_32":252,"_30":253,"_135":151,"_42":43,"_41":254,"_137":60,"_39":255,"_13":64,"_34":20,"_36":256,"_24":25,"_140":-5,"_192":257,"_27":258},{"_44":142,"_32":143,"_30":144,"_135":-5,"_42":43,"_41":145,"_137":60,"_39":248,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_192":249,"_27":250},{"_44":244,"_32":219,"_30":213,"_135":144,"_42":43,"_41":239,"_137":60,"_39":245,"_13":64,"_34":147,"_36":-5,"_24":25,"_140":-5,"_192":246,"_27":247},{"_44":236,"_32":237,"_30":238,"_135":213,"_42":43,"_41":239,"_137":25,"_39":240,"_13":64,"_34":35,"_36":241,"_24":25,"_140":-5,"_192":242,"_27":243},{"_44":228,"_32":229,"_30":230,"_135":213,"_42":43,"_41":231,"_137":25,"_39":232,"_13":64,"_34":35,"_36":233,"_24":25,"_140":-5,"_192":234,"_27":235},{"_44":220,"_32":221,"_30":222,"_135":213,"_42":43,"_41":223,"_137":25,"_39":224,"_13":64,"_34":35,"_36":225,"_24":25,"_140":-5,"_192":226,"_27":227},{"_44":210,"_32":211,"_30":212,"_135":213,"_42":43,"_41":214,"_137":25,"_39":215,"_13":64,"_34":35,"_36":216,"_24":25,"_140":-5,"_192":217,"_27":218},{"_44":203,"_32":204,"_30":205,"_135":144,"_42":43,"_41":145,"_137":60,"_39":206,"_13":64,"_34":35,"_36":207,"_24":25,"_140":-5,"_192":208,"_27":209},{"_44":195,"_32":196,"_30":197,"_135":144,"_42":43,"_41":198,"_137":60,"_39":199,"_13":64,"_34":35,"_36":200,"_24":25,"_140":-5,"_192":201,"_27":202},{"_44":132,"_32":133,"_30":134,"_135":-5,"_42":43,"_41":136,"_137":25,"_39":191,"_13":64,"_34":20,"_36":139,"_24":25,"_140":-5,"_192":193,"_27":194},["D",1751721114669],"children",[],[133],"335e544a-59a2-11f0-b958-f69ea79377d9","utils.ts","335e54f4-59a2-11f0-b958-f69ea79377d9",7,["D",1751721362981],"// Shared utility functions\n\nimport { Vector3D, Vector4D, Vector5D } from './types.ts';\n\nexport class MathUtils {\n // Clamp a value between min and max\n static clamp(value: number, min: number, max: number): number {\n return Math.min(Math.max(value, min), max);\n }\n\n // Linear interpolation\n static lerp(a: number, b: number, t: number): number {\n return a + (b - a) * t;\n }\n\n // Map a value from one range to another\n static map(value: number, fromMin: number, fromMax: number, toMin: number, toMax: number): number {\n return toMin + (value - fromMin) * (toMax - toMin) / (fromMax - fromMin);\n }\n\n // Convert degrees to radians\n static degToRad(degrees: number): number {\n return degrees * Math.PI / 180;\n }\n\n // Convert radians to degrees\n static radToDeg(radians: number): number {\n return radians * 180 / Math.PI;\n }\n\n // Calculate distance between two 3D points\n static distance3D(a: Vector3D, b: Vector3D): number {\n const dx = a.x - b.x;\n const dy = a.y - b.y;\n const dz = a.z - b.z;\n return Math.sqrt(dx * dx + dy * dy + dz * dz);\n }\n\n // Calculate distance between two 4D points\n static distance4D(a: Vector4D, b: Vector4D): number {\n const dx = a.x - b.x;\n const dy = a.y - b.y;\n const dz = a.z - b.z;\n const dw = a.w - b.w;\n return Math.sqrt(dx * dx + dy * dy + dz * dz + dw * dw);\n }\n\n // Normalize a 3D vector\n static normalize3D(v: Vector3D): Vector3D {\n const length = Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z);\n if (length < 0.001) return { x: 0, y: 0, z: 0 };\n return {\n x: v.x / length,\n y: v.y / length,\n z: v.z / length\n };\n }\n\n // Normalize a 4D vector\n static normalize4D(v: Vector4D): Vector4D {\n const length = Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z + v.w * v.w);\n if (length < 0.001) return { x: 0, y: 0, z: 0, w: 0 };\n return {\n x: v.x / length,\n y: v.y / length,\n z: v.z / length,\n w: v.w / length\n };\n }\n\n // Calculate dot product of two 3D vectors\n static dot3D(a: Vector3D, b: Vector3D): number {\n return a.x * b.x + a.y * b.y + a.z * b.z;\n }\n\n // Calculate dot product of two 4D vectors\n static dot4D(a: Vector4D, b: Vector4D): number {\n return a.x * b.x + a.y * b.y + a.z * b.z + a.w * b.w;\n }\n\n // Calculate cross product of two 3D vectors\n static cross3D(a: Vector3D, b: Vector3D): Vector3D {\n return {\n x: a.y * b.z - a.z * b.y,\n y: a.z * b.x - a.x * b.z,\n z: a.x * b.y - a.y * b.x\n };\n }\n\n // Generate a random number between min and max\n static random(min: number = 0, max: number = 1): number {\n return min + Math.random() * (max - min);\n }\n\n // Generate a random integer between min and max (inclusive)\n static randomInt(min: number, max: number): number {\n return Math.floor(this.random(min, max + 1));\n }\n\n // Check if a number is approximately equal to another (within epsilon)\n static approximately(a: number, b: number, epsilon: number = 0.001): boolean {\n return Math.abs(a - b) < epsilon;\n }\n\n // Smooth step function\n static smoothstep(edge0: number, edge1: number, x: number): number {\n const t = this.clamp((x - edge0) / (edge1 - edge0), 0, 1);\n return t * t * (3 - 2 * t);\n }\n\n // Smoother step function\n static smootherstep(edge0: number, edge1: number, x: number): number {\n const t = this.clamp((x - edge0) / (edge1 - edge0), 0, 1);\n return t * t * t * (t * (t * 6 - 15) + 10);\n }\n}\n\nexport class ColorUtils {\n // Convert HSL to RGB\n static hslToRgb(h: number, s: number, l: number): { r: number; g: number; b: number } {\n h /= 360;\n s /= 100;\n l /= 100;\n\n const hue2rgb = (p: number, q: number, t: number): number => {\n if (t < 0) t += 1;\n if (t > 1) t -= 1;\n if (t < 1/6) return p + (q - p) * 6 * t;\n if (t < 1/2) return q;\n if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;\n return p;\n };\n\n let r, g, b;\n\n if (s === 0) {\n r = g = b = l; // achromatic\n } else {\n const q = l < 0.5 ? l * (1 + s) : l + s - l * s;\n const p = 2 * l - q;\n r = hue2rgb(p, q, h + 1/3);\n g = hue2rgb(p, q, h);\n b = hue2rgb(p, q, h - 1/3);\n }\n\n return {\n r: Math.round(r * 255),\n g: Math.round(g * 255),\n b: Math.round(b * 255)\n };\n }\n\n // Convert RGB to hex string\n static rgbToHex(r: number, g: number, b: number): string {\n return \"#\" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);\n }\n\n // Generate a color based on a value (useful for visualizing dimensions)\n static valueToColor(value: number, min: number, max: number): string {\n const normalized = MathUtils.clamp((value - min) / (max - min), 0, 1);\n const hue = (1 - normalized) * 240; // Blue to red\n const { r, g, b } = this.hslToRgb(hue, 100, 50);\n return this.rgbToHex(r, g, b);\n }\n\n // Generate rainbow colors for multiple objects\n static generateRainbowColors(count: number): string[] {\n const colors: string[] = [];\n for (let i = 0; i < count; i++) {\n const hue = (i / count) * 360;\n const { r, g, b } = this.hslToRgb(hue, 70, 50);\n colors.push(this.rgbToHex(r, g, b));\n }\n return colors;\n }\n}\n\nexport class PerformanceUtils {\n // Debounce function calls\n static debounce any>(\n func: T,\n wait: number\n ): (...args: Parameters) => void {\n let timeout: number | undefined;\n return (...args: Parameters) => {\n clearTimeout(timeout);\n timeout = setTimeout(() => func(...args), wait);\n };\n }\n\n // Throttle function calls\n static throttle any>(\n func: T,\n limit: number\n ): (...args: Parameters) => void {\n let inThrottle: boolean;\n return (...args: Parameters) => {\n if (!inThrottle) {\n func(...args);\n inThrottle = true;\n setTimeout(() => inThrottle = false, limit);\n }\n };\n }\n\n // Measure execution time\n static measureTime(name: string, func: () => T): T {\n const start = performance.now();\n const result = func();\n const end = performance.now();\n console.log(`${name} took ${end - start} milliseconds`);\n return result;\n }\n\n // Create a simple object pool for performance\n static createObjectPool(\n createFn: () => T,\n resetFn: (obj: T) => void,\n initialSize: number = 10\n ) {\n const pool: T[] = [];\n \n // Pre-populate the pool\n for (let i = 0; i < initialSize; i++) {\n pool.push(createFn());\n }\n\n return {\n get(): T {\n return pool.pop() || createFn();\n },\n \n release(obj: T): void {\n resetFn(obj);\n pool.push(obj);\n },\n \n size(): number {\n return pool.length;\n }\n };\n }\n}\n\nexport class ValidationUtils {\n // Validate that a value is a finite number\n static isValidNumber(value: any): value is number {\n return typeof value === 'number' && isFinite(value);\n }\n\n // Validate a 3D vector\n static isValid3DVector(v: any): v is Vector3D {\n return v && \n typeof v === 'object' &&\n this.isValidNumber(v.x) &&\n this.isValidNumber(v.y) &&\n this.isValidNumber(v.z);\n }\n\n // Validate a 4D vector\n static isValid4DVector(v: any): v is Vector4D {\n return v && \n typeof v === 'object' &&\n this.isValidNumber(v.x) &&\n this.isValidNumber(v.y) &&\n this.isValidNumber(v.z) &&\n this.isValidNumber(v.w);\n }\n\n // Validate a 5D vector\n static isValid5DVector(v: any): v is Vector5D {\n return v && \n typeof v === 'object' &&\n this.isValidNumber(v.x) &&\n this.isValidNumber(v.y) &&\n this.isValidNumber(v.z) &&\n this.isValidNumber(v.w) &&\n this.isValidNumber(v.v);\n }\n\n // Sanitize user input for angles (convert to radians and clamp)\n static sanitizeAngle(degrees: number): number {\n if (!this.isValidNumber(degrees)) return 0;\n return MathUtils.degToRad(degrees % 360);\n }\n\n // Sanitize scale values\n static sanitizeScale(scale: number): number {\n if (!this.isValidNumber(scale)) return 1;\n return MathUtils.clamp(scale, 0.1, 10);\n }\n}",[],[143,196],"a83b47f6-59a1-11f0-bf43-f69ea79377d9","types.ts","a83b48d2-59a1-11f0-bf43-f69ea79377d9",["D",1751721129544],"// Shared types for higher-dimensional geometry visualization\n\nexport interface Vector4D {\n x: number;\n y: number;\n z: number;\n w: number;\n}\n\nexport interface Vector5D {\n x: number;\n y: number;\n z: number;\n w: number;\n v: number;\n}\n\nexport interface Vector3D {\n x: number;\n y: number;\n z: number;\n}\n\nexport interface Matrix4D {\n elements: number[][]; // 4x4 matrix\n}\n\nexport interface Matrix5D {\n elements: number[][]; // 5x5 matrix\n}\n\nexport interface Edge {\n start: number;\n end: number;\n}\n\nexport interface Face {\n vertices: number[];\n}\n\nexport interface Cell {\n faces: number[];\n}\n\nexport interface Shape4D {\n vertices: Vector4D[];\n edges: Edge[];\n faces: Face[];\n cells: Cell[];\n name: string;\n}\n\nexport interface Shape5D {\n vertices: Vector5D[];\n edges: Edge[];\n faces: Face[];\n cells: Cell[];\n hypercells: Cell[];\n name: string;\n}\n\nexport interface ProjectionSettings {\n distance: number;\n perspective: boolean;\n viewAngle: number;\n}\n\nexport interface TransformationState {\n rotation4D: {\n xy: number;\n xz: number;\n xw: number;\n yz: number;\n yw: number;\n zw: number;\n };\n rotation5D?: {\n xy: number;\n xz: number;\n xw: number;\n xv: number;\n yz: number;\n yw: number;\n yv: number;\n zw: number;\n zv: number;\n wv: number;\n };\n scale: number;\n translation: Vector4D | Vector5D;\n}\n\nexport interface CameraState {\n position: Vector3D;\n target: Vector3D;\n up: Vector3D;\n fov: number;\n}\n\nexport interface LightingState {\n ambient: number;\n directional: {\n intensity: number;\n direction: Vector3D;\n };\n point: {\n intensity: number;\n position: Vector3D;\n };\n}\n\nexport interface CrossSectionSettings {\n enabled: boolean;\n dimension: number;\n position: number;\n normal: Vector4D | Vector5D;\n}\n\nexport interface RenderSettings {\n showVertices: boolean;\n showEdges: boolean;\n showFaces: boolean;\n wireframe: boolean;\n opacity: number;\n color: string;\n edgeColor: string;\n vertexColor: string;\n}\n\nexport type ShapeType = \n | 'tesseract' \n | '16-cell' \n | '600-cell' \n | '120-cell'\n | 'penteract'\n | '5-simplex'\n | '5-orthoplex'\n | 'custom';\n\nexport interface AppState {\n currentShape: ShapeType;\n dimension: 4 | 5;\n transformations: TransformationState;\n camera: CameraState;\n lighting: LightingState;\n projection: ProjectionSettings;\n crossSection: CrossSectionSettings;\n rendering: RenderSettings;\n isAnimating: boolean;\n animationSpeed: number;\n}",[],[143,204],"1757a83c-59a2-11f0-952b-f69ea79377d9","transformations.ts","1757a904-59a2-11f0-952b-f69ea79377d9","10e2870c-b7b7-48c6-9e40-545c61d33aa9",6,["D",1751721315964],"// Transformation utilities for higher-dimensional geometry\n\nimport { Vector4D, Vector5D, Matrix4D, Matrix5D, TransformationState } from '../types.ts';\nimport { Geometry4D } from './geometry4d.ts';\nimport { Geometry5D } from './geometry5d.ts';\n\nexport class TransformationEngine {\n // Apply all transformations to a 4D point\n static transform4D(point: Vector4D, state: TransformationState): Vector4D {\n let result = { ...point };\n \n // Apply scaling\n result.x *= state.scale;\n result.y *= state.scale;\n result.z *= state.scale;\n result.w *= state.scale;\n \n // Apply rotations\n const rotationMatrix = Geometry4D.createCompositeRotation(state.rotation4D);\n result = Geometry4D.transformVector(result, rotationMatrix);\n \n // Apply translation\n const translation = state.translation as Vector4D;\n result.x += translation.x;\n result.y += translation.y;\n result.z += translation.z;\n result.w += translation.w;\n \n return result;\n }\n\n // Apply all transformations to a 5D point\n static transform5D(point: Vector5D, state: TransformationState): Vector5D {\n let result = { ...point };\n \n // Apply scaling\n result.x *= state.scale;\n result.y *= state.scale;\n result.z *= state.scale;\n result.w *= state.scale;\n result.v *= state.scale;\n \n // Apply rotations\n if (state.rotation5D) {\n const rotationMatrix = Geometry5D.createCompositeRotation(state.rotation5D);\n result = Geometry5D.transformVector(result, rotationMatrix);\n }\n \n // Apply translation\n const translation = state.translation as Vector5D;\n result.x += translation.x;\n result.y += translation.y;\n result.z += translation.z;\n result.w += translation.w;\n result.v += translation.v;\n \n return result;\n }\n\n // Create animation interpolation between two transformation states\n static interpolateTransformations(\n from: TransformationState, \n to: TransformationState, \n t: number\n ): TransformationState {\n const lerp = (a: number, b: number, t: number) => a + (b - a) * t;\n \n // Interpolate 4D rotations\n const rotation4D = {\n xy: lerp(from.rotation4D.xy, to.rotation4D.xy, t),\n xz: lerp(from.rotation4D.xz, to.rotation4D.xz, t),\n xw: lerp(from.rotation4D.xw, to.rotation4D.xw, t),\n yz: lerp(from.rotation4D.yz, to.rotation4D.yz, t),\n yw: lerp(from.rotation4D.yw, to.rotation4D.yw, t),\n zw: lerp(from.rotation4D.zw, to.rotation4D.zw, t)\n };\n\n // Interpolate 5D rotations if they exist\n let rotation5D = undefined;\n if (from.rotation5D && to.rotation5D) {\n rotation5D = {\n xy: lerp(from.rotation5D.xy, to.rotation5D.xy, t),\n xz: lerp(from.rotation5D.xz, to.rotation5D.xz, t),\n xw: lerp(from.rotation5D.xw, to.rotation5D.xw, t),\n xv: lerp(from.rotation5D.xv, to.rotation5D.xv, t),\n yz: lerp(from.rotation5D.yz, to.rotation5D.yz, t),\n yw: lerp(from.rotation5D.yw, to.rotation5D.yw, t),\n yv: lerp(from.rotation5D.yv, to.rotation5D.yv, t),\n zw: lerp(from.rotation5D.zw, to.rotation5D.zw, t),\n zv: lerp(from.rotation5D.zv, to.rotation5D.zv, t),\n wv: lerp(from.rotation5D.wv, to.rotation5D.wv, t)\n };\n }\n\n // Interpolate translation\n const fromTrans = from.translation as any;\n const toTrans = to.translation as any;\n const translation: any = {\n x: lerp(fromTrans.x, toTrans.x, t),\n y: lerp(fromTrans.y, toTrans.y, t),\n z: lerp(fromTrans.z, toTrans.z, t),\n w: lerp(fromTrans.w, toTrans.w, t)\n };\n \n if (fromTrans.v !== undefined && toTrans.v !== undefined) {\n translation.v = lerp(fromTrans.v, toTrans.v, t);\n }\n\n return {\n rotation4D,\n rotation5D,\n scale: lerp(from.scale, to.scale, t),\n translation\n };\n }\n\n // Generate smooth rotation animation keyframes\n static generateRotationKeyframes(\n dimension: 4 | 5,\n duration: number,\n rotationSpeed: { [key: string]: number }\n ): TransformationState[] {\n const keyframes: TransformationState[] = [];\n const steps = Math.max(60, duration * 60); // 60 FPS\n \n for (let i = 0; i <= steps; i++) {\n const t = i / steps;\n const time = t * duration;\n \n const rotation4D = {\n xy: rotationSpeed.xy ? rotationSpeed.xy * time : 0,\n xz: rotationSpeed.xz ? rotationSpeed.xz * time : 0,\n xw: rotationSpeed.xw ? rotationSpeed.xw * time : 0,\n yz: rotationSpeed.yz ? rotationSpeed.yz * time : 0,\n yw: rotationSpeed.yw ? rotationSpeed.yw * time : 0,\n zw: rotationSpeed.zw ? rotationSpeed.zw * time : 0\n };\n\n let rotation5D = undefined;\n if (dimension === 5) {\n rotation5D = {\n xy: rotationSpeed.xy ? rotationSpeed.xy * time : 0,\n xz: rotationSpeed.xz ? rotationSpeed.xz * time : 0,\n xw: rotationSpeed.xw ? rotationSpeed.xw * time : 0,\n xv: rotationSpeed.xv ? rotationSpeed.xv * time : 0,\n yz: rotationSpeed.yz ? rotationSpeed.yz * time : 0,\n yw: rotationSpeed.yw ? rotationSpeed.yw * time : 0,\n yv: rotationSpeed.yv ? rotationSpeed.yv * time : 0,\n zw: rotationSpeed.zw ? rotationSpeed.zw * time : 0,\n zv: rotationSpeed.zv ? rotationSpeed.zv * time : 0,\n wv: rotationSpeed.wv ? rotationSpeed.wv * time : 0\n };\n }\n\n const translation = dimension === 5 \n ? { x: 0, y: 0, z: 0, w: 0, v: 0 }\n : { x: 0, y: 0, z: 0, w: 0 };\n\n keyframes.push({\n rotation4D,\n rotation5D,\n scale: 1,\n translation\n });\n }\n \n return keyframes;\n }\n\n // Apply perspective correction for better visualization\n static applyPerspectiveCorrection(points: Vector4D[], viewDistance: number): Vector4D[] {\n return points.map(point => {\n // Adjust w-coordinate based on distance from viewer\n const distance = Math.sqrt(point.x * point.x + point.y * point.y + point.z * point.z);\n const correctedW = point.w + distance / viewDistance;\n \n return {\n x: point.x,\n y: point.y,\n z: point.z,\n w: correctedW\n };\n });\n }\n\n // Create transformation matrix for arbitrary axis rotation in 4D\n static createAxisRotation4D(axis1: Vector4D, axis2: Vector4D, angle: number): Matrix4D {\n // Normalize the axes\n const normalize = (v: Vector4D): Vector4D => {\n const length = Math.sqrt(v.x * v.x + v.y * v.y + v.z * v.z + v.w * v.w);\n return length > 0.001 ? {\n x: v.x / length,\n y: v.y / length,\n z: v.z / length,\n w: v.w / length\n } : { x: 1, y: 0, z: 0, w: 0 };\n };\n\n const u = normalize(axis1);\n const v = normalize(axis2);\n \n // Create rotation matrix using Rodrigues' rotation formula extended to 4D\n const cos = Math.cos(angle);\n const sin = Math.sin(angle);\n \n const matrix = [\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ];\n\n // This is a simplified version - full implementation would be more complex\n for (let i = 0; i < 4; i++) {\n for (let j = 0; j < 4; j++) {\n const uComponent = [u.x, u.y, u.z, u.w][i] * [u.x, u.y, u.z, u.w][j];\n const vComponent = [v.x, v.y, v.z, v.w][i] * [v.x, v.y, v.z, v.w][j];\n \n matrix[i][j] = (i === j ? 1 : 0) + \n (cos - 1) * (uComponent + vComponent) +\n sin * (i === j ? 0 : (uComponent - vComponent));\n }\n }\n\n return { elements: matrix };\n }\n\n // Decompose a transformation matrix into its components\n static decompose4DMatrix(matrix: Matrix4D): {\n scale: Vector4D;\n rotation: { [key: string]: number };\n translation: Vector4D;\n } {\n const m = matrix.elements;\n \n // Extract translation (assuming it's in the last column)\n const translation: Vector4D = {\n x: m[0][3] || 0,\n y: m[1][3] || 0,\n z: m[2][3] || 0,\n w: m[3][3] || 0\n };\n\n // Extract scale\n const scaleX = Math.sqrt(m[0][0] * m[0][0] + m[1][0] * m[1][0] + m[2][0] * m[2][0] + m[3][0] * m[3][0]);\n const scaleY = Math.sqrt(m[0][1] * m[0][1] + m[1][1] * m[1][1] + m[2][1] * m[2][1] + m[3][1] * m[3][1]);\n const scaleZ = Math.sqrt(m[0][2] * m[0][2] + m[1][2] * m[1][2] + m[2][2] * m[2][2] + m[3][2] * m[3][2]);\n const scaleW = Math.sqrt(m[0][3] * m[0][3] + m[1][3] * m[1][3] + m[2][3] * m[2][3] + m[3][3] * m[3][3]);\n\n const scale: Vector4D = { x: scaleX, y: scaleY, z: scaleZ, w: scaleW };\n\n // Extract rotation (simplified - full implementation would be more complex)\n const rotation = {\n xy: Math.atan2(m[1][0], m[0][0]),\n xz: Math.atan2(m[2][0], m[0][0]),\n xw: Math.atan2(m[3][0], m[0][0]),\n yz: Math.atan2(m[2][1], m[1][1]),\n yw: Math.atan2(m[3][1], m[1][1]),\n zw: Math.atan2(m[3][2], m[2][2])\n };\n\n return { scale, rotation, translation };\n }\n\n // Create smooth easing functions for animations\n static easeInOutCubic(t: number): number {\n return t < 0.5 ? 4 * t * t * t : 1 - Math.pow(-2 * t + 2, 3) / 2;\n }\n\n static easeInOutQuart(t: number): number {\n return t < 0.5 ? 8 * t * t * t * t : 1 - Math.pow(-2 * t + 2, 4) / 2;\n }\n\n static easeInOutSine(t: number): number {\n return -(Math.cos(Math.PI * t) - 1) / 2;\n }\n}",[],[143,219,211],"math","f8e4ba70-59a1-11f0-bc55-f69ea79377d9","projections.ts","f8e4bb2e-59a1-11f0-bc55-f69ea79377d9",5,["D",1751721264877],"// Projection algorithms for higher-dimensional geometry\n\nimport { Vector3D, Vector4D, Vector5D, ProjectionSettings } from '../types.ts';\n\nexport class ProjectionEngine {\n // Orthogonal projection from 4D to 3D\n static orthogonal4DTo3D(point: Vector4D): Vector3D {\n return {\n x: point.x,\n y: point.y,\n z: point.z\n };\n }\n\n // Perspective projection from 4D to 3D\n static perspective4DTo3D(point: Vector4D, settings: ProjectionSettings): Vector3D {\n const { distance, viewAngle } = settings;\n const factor = distance / (distance - point.w);\n \n return {\n x: point.x * factor,\n y: point.y * factor,\n z: point.z * factor\n };\n }\n\n // Stereographic projection from 4D to 3D\n static stereographic4DTo3D(point: Vector4D, radius: number = 1): Vector3D {\n const denominator = radius - point.w;\n if (Math.abs(denominator) < 0.001) {\n // Point at infinity, return a large value\n return { x: point.x * 1000, y: point.y * 1000, z: point.z * 1000 };\n }\n \n const factor = radius / denominator;\n return {\n x: point.x * factor,\n y: point.y * factor,\n z: point.z * factor\n };\n }\n\n // Double perspective projection from 5D to 3D\n static perspective5DTo3D(point: Vector5D, settings: ProjectionSettings): Vector3D {\n const { distance } = settings;\n \n // First projection: 5D to 4D\n const factor1 = distance / (distance - point.v);\n const point4D: Vector4D = {\n x: point.x * factor1,\n y: point.y * factor1,\n z: point.z * factor1,\n w: point.w * factor1\n };\n \n // Second projection: 4D to 3D\n return this.perspective4DTo3D(point4D, settings);\n }\n\n // Orthogonal projection from 5D to 3D (dropping two dimensions)\n static orthogonal5DTo3D(point: Vector5D, dropDimensions: [number, number] = [3, 4]): Vector3D {\n const coords = [point.x, point.y, point.z, point.w, point.v];\n const result = [0, 0, 0];\n let resultIndex = 0;\n \n for (let i = 0; i < 5; i++) {\n if (!dropDimensions.includes(i) && resultIndex < 3) {\n result[resultIndex] = coords[i];\n resultIndex++;\n }\n }\n \n return {\n x: result[0] || 0,\n y: result[1] || 0,\n z: result[2] || 0\n };\n }\n\n // Schlegel projection for 4D polytopes\n static schlegel4DTo3D(point: Vector4D, center: Vector4D, projectionPoint: Vector4D): Vector3D {\n // Vector from projection point to the point\n const direction = {\n x: point.x - projectionPoint.x,\n y: point.y - projectionPoint.y,\n z: point.z - projectionPoint.z,\n w: point.w - projectionPoint.w\n };\n \n // Find intersection with the 3D hyperplane (w = 0)\n if (Math.abs(direction.w) < 0.001) {\n return { x: point.x, y: point.y, z: point.z };\n }\n \n const t = -projectionPoint.w / direction.w;\n return {\n x: projectionPoint.x + t * direction.x,\n y: projectionPoint.y + t * direction.y,\n z: projectionPoint.z + t * direction.z\n };\n }\n\n // Parallel projection with custom direction\n static parallelProjection4D(point: Vector4D, direction: Vector4D, plane: Vector4D): Vector3D {\n // Project point onto the 3D plane perpendicular to the direction\n const dot = point.x * direction.x + point.y * direction.y + \n point.z * direction.z + point.w * direction.w;\n const planeDot = plane.x * direction.x + plane.y * direction.y + \n plane.z * direction.z + plane.w * direction.w;\n \n if (Math.abs(planeDot) < 0.001) {\n return { x: point.x, y: point.y, z: point.z };\n }\n \n const t = dot / planeDot;\n return {\n x: point.x - t * plane.x,\n y: point.y - t * plane.y,\n z: point.z - t * plane.z\n };\n }\n\n // Fisheye projection for wide-angle viewing\n static fisheye4DTo3D(point: Vector4D, fov: number = Math.PI / 2): Vector3D {\n const r = Math.sqrt(point.x * point.x + point.y * point.y + point.z * point.z + point.w * point.w);\n if (r < 0.001) return { x: 0, y: 0, z: 0 };\n \n const theta = Math.acos(Math.abs(point.w) / r);\n const phi = Math.atan2(point.y, point.x);\n const psi = Math.atan2(Math.sqrt(point.x * point.x + point.y * point.y), point.z);\n \n const fisheyeR = (2 * theta / fov) * Math.sin(fov / 2);\n \n return {\n x: fisheyeR * Math.cos(phi) * Math.sin(psi),\n y: fisheyeR * Math.sin(phi) * Math.sin(psi),\n z: fisheyeR * Math.cos(psi)\n };\n }\n\n // Adaptive projection that chooses the best method based on the data\n static adaptiveProjection(points: Vector4D[], settings: ProjectionSettings): Vector3D[] {\n // Analyze the distribution of w-coordinates\n const wValues = points.map(p => p.w);\n const minW = Math.min(...wValues);\n const maxW = Math.max(...wValues);\n const wRange = maxW - minW;\n \n // Choose projection method based on w-distribution\n if (wRange < 0.1) {\n // Points are mostly in the same w-plane, use orthogonal\n return points.map(p => this.orthogonal4DTo3D(p));\n } else if (minW > -settings.distance * 0.9) {\n // No points too close to the projection center, use perspective\n return points.map(p => this.perspective4DTo3D(p, settings));\n } else {\n // Some points might cause issues with perspective, use stereographic\n return points.map(p => this.stereographic4DTo3D(p));\n }\n }\n\n // Cross-section projection: project a 4D cross-section to 2D\n static crossSection4DTo2D(point: Vector4D, normal: Vector4D): { x: number; y: number } {\n // Find two orthogonal vectors in the 3D subspace perpendicular to normal\n const u = this.findOrthogonalVector4D(normal);\n const v = this.crossProduct4D(normal, u);\n \n // Project point onto the 2D plane spanned by u and v\n const uDot = point.x * u.x + point.y * u.y + point.z * u.z + point.w * u.w;\n const vDot = point.x * v.x + point.y * v.y + point.z * v.z + point.w * v.w;\n \n return { x: uDot, y: vDot };\n }\n\n // Helper function to find an orthogonal vector in 4D\n private static findOrthogonalVector4D(v: Vector4D): Vector4D {\n // Find the component with the smallest absolute value\n const abs = [Math.abs(v.x), Math.abs(v.y), Math.abs(v.z), Math.abs(v.w)];\n const minIndex = abs.indexOf(Math.min(...abs));\n \n const result = { x: 0, y: 0, z: 0, w: 0 };\n switch (minIndex) {\n case 0: result.x = 1; break;\n case 1: result.y = 1; break;\n case 2: result.z = 1; break;\n case 3: result.w = 1; break;\n }\n \n // Make it orthogonal using Gram-Schmidt\n const dot = result.x * v.x + result.y * v.y + result.z * v.z + result.w * v.w;\n const vLengthSq = v.x * v.x + v.y * v.y + v.z * v.z + v.w * v.w;\n \n if (vLengthSq > 0.001) {\n const factor = dot / vLengthSq;\n result.x -= factor * v.x;\n result.y -= factor * v.y;\n result.z -= factor * v.z;\n result.w -= factor * v.w;\n }\n \n // Normalize\n const length = Math.sqrt(result.x * result.x + result.y * result.y + \n result.z * result.z + result.w * result.w);\n if (length > 0.001) {\n result.x /= length;\n result.y /= length;\n result.z /= length;\n result.w /= length;\n }\n \n return result;\n }\n\n // Helper function for 4D cross product (returns a vector orthogonal to both inputs)\n private static crossProduct4D(a: Vector4D, b: Vector4D): Vector4D {\n // This is a simplified version - true 4D cross product is more complex\n return {\n x: a.y * b.z - a.z * b.y,\n y: a.z * b.x - a.x * b.z,\n z: a.x * b.y - a.y * b.x,\n w: 0 // Simplified\n };\n }\n}",[],[143,219,221],"dbfdd892-59a1-11f0-a68e-f69ea79377d9","geometry5d.ts","dbfdd950-59a1-11f0-a68e-f69ea79377d9",4,["D",1751721216383],"// 5D Geometry calculations and shape generation\n\nimport { Vector5D, Vector3D, Shape5D, Edge, Face, Cell, Matrix5D } from '../types.ts';\n\nexport class Geometry5D {\n // Create a 5D rotation matrix for the given plane and angle\n static createRotationMatrix(plane: string, angle: number): Matrix5D {\n const cos = Math.cos(angle);\n const sin = Math.sin(angle);\n const matrix = Array(5).fill(null).map(() => Array(5).fill(0));\n \n // Initialize as identity matrix\n for (let i = 0; i < 5; i++) {\n matrix[i][i] = 1;\n }\n\n switch (plane) {\n case 'xy':\n matrix[0][0] = cos; matrix[0][1] = -sin;\n matrix[1][0] = sin; matrix[1][1] = cos;\n break;\n case 'xz':\n matrix[0][0] = cos; matrix[0][2] = -sin;\n matrix[2][0] = sin; matrix[2][2] = cos;\n break;\n case 'xw':\n matrix[0][0] = cos; matrix[0][3] = -sin;\n matrix[3][0] = sin; matrix[3][3] = cos;\n break;\n case 'xv':\n matrix[0][0] = cos; matrix[0][4] = -sin;\n matrix[4][0] = sin; matrix[4][4] = cos;\n break;\n case 'yz':\n matrix[1][1] = cos; matrix[1][2] = -sin;\n matrix[2][1] = sin; matrix[2][2] = cos;\n break;\n case 'yw':\n matrix[1][1] = cos; matrix[1][3] = -sin;\n matrix[3][1] = sin; matrix[3][3] = cos;\n break;\n case 'yv':\n matrix[1][1] = cos; matrix[1][4] = -sin;\n matrix[4][1] = sin; matrix[4][4] = cos;\n break;\n case 'zw':\n matrix[2][2] = cos; matrix[2][3] = -sin;\n matrix[3][2] = sin; matrix[3][3] = cos;\n break;\n case 'zv':\n matrix[2][2] = cos; matrix[2][4] = -sin;\n matrix[4][2] = sin; matrix[4][4] = cos;\n break;\n case 'wv':\n matrix[3][3] = cos; matrix[3][4] = -sin;\n matrix[4][3] = sin; matrix[4][4] = cos;\n break;\n }\n\n return { elements: matrix };\n }\n\n // Apply transformation matrix to a 5D vector\n static transformVector(vector: Vector5D, matrix: Matrix5D): Vector5D {\n const { x, y, z, w, v } = vector;\n const m = matrix.elements;\n \n return {\n x: m[0][0] * x + m[0][1] * y + m[0][2] * z + m[0][3] * w + m[0][4] * v,\n y: m[1][0] * x + m[1][1] * y + m[1][2] * z + m[1][3] * w + m[1][4] * v,\n z: m[2][0] * x + m[2][1] * y + m[2][2] * z + m[2][3] * w + m[2][4] * v,\n w: m[3][0] * x + m[3][1] * y + m[3][2] * z + m[3][3] * w + m[3][4] * v,\n v: m[4][0] * x + m[4][1] * y + m[4][2] * z + m[4][3] * w + m[4][4] * v\n };\n }\n\n // Project 5D point to 3D using double perspective projection\n static projectTo3D(point: Vector5D, distance1: number = 2, distance2: number = 2): Vector3D {\n // First project from 5D to 4D\n const factor1 = distance1 / (distance1 - point.v);\n const point4D = {\n x: point.x * factor1,\n y: point.y * factor1,\n z: point.z * factor1,\n w: point.w * factor1\n };\n \n // Then project from 4D to 3D\n const factor2 = distance2 / (distance2 - point4D.w);\n return {\n x: point4D.x * factor2,\n y: point4D.y * factor2,\n z: point4D.z * factor2\n };\n }\n\n // Generate penteract (5D cube) vertices and structure\n static createPenteract(): Shape5D {\n const vertices: Vector5D[] = [];\n \n // Generate all 32 vertices of a penteract\n for (let i = 0; i < 32; i++) {\n vertices.push({\n x: (i & 1) ? 1 : -1,\n y: (i & 2) ? 1 : -1,\n z: (i & 4) ? 1 : -1,\n w: (i & 8) ? 1 : -1,\n v: (i & 16) ? 1 : -1\n });\n }\n\n // Generate edges\n const edges: Edge[] = [];\n for (let i = 0; i < 32; i++) {\n for (let j = i + 1; j < 32; j++) {\n // Two vertices are connected if they differ in exactly one coordinate\n const diff = [\n vertices[i].x !== vertices[j].x ? 1 : 0,\n vertices[i].y !== vertices[j].y ? 1 : 0,\n vertices[i].z !== vertices[j].z ? 1 : 0,\n vertices[i].w !== vertices[j].w ? 1 : 0,\n vertices[i].v !== vertices[j].v ? 1 : 0\n ].reduce((sum, val) => sum + val, 0);\n \n if (diff === 1) {\n edges.push({ start: i, end: j });\n }\n }\n }\n\n // Generate faces (simplified)\n const faces: Face[] = [];\n for (let dim1 = 0; dim1 < 5; dim1++) {\n for (let dim2 = dim1 + 1; dim2 < 5; dim2++) {\n for (let val1 = -1; val1 <= 1; val1 += 2) {\n for (let val2 = -1; val2 <= 1; val2 += 2) {\n for (let val3 = -1; val3 <= 1; val3 += 2) {\n const faceVertices: number[] = [];\n for (let i = 0; i < 32; i++) {\n const coords = [vertices[i].x, vertices[i].y, vertices[i].z, vertices[i].w, vertices[i].v];\n let matches = 0;\n if (coords[dim1] === val1) matches++;\n if (coords[dim2] === val2) matches++;\n if (matches === 2) {\n faceVertices.push(i);\n }\n }\n if (faceVertices.length === 4) {\n faces.push({ vertices: faceVertices });\n }\n }\n }\n }\n }\n }\n\n // Generate cells and hypercells (simplified)\n const cells: Cell[] = [];\n const hypercells: Cell[] = [];\n \n // This is a simplified version - full implementation would be much more complex\n for (let i = 0; i < Math.min(faces.length, 40); i += 6) {\n if (i + 5 < faces.length) {\n cells.push({ faces: [i, i + 1, i + 2, i + 3, i + 4, i + 5] });\n }\n }\n\n for (let i = 0; i < Math.min(cells.length, 10); i += 8) {\n if (i + 7 < cells.length) {\n hypercells.push({ faces: [i, i + 1, i + 2, i + 3, i + 4, i + 5, i + 6, i + 7] });\n }\n }\n\n return {\n vertices,\n edges,\n faces,\n cells,\n hypercells,\n name: 'Penteract'\n };\n }\n\n // Generate 5-simplex (5D tetrahedron)\n static create5Simplex(): Shape5D {\n const vertices: Vector5D[] = [\n { x: 1, y: 0, z: 0, w: 0, v: 0 },\n { x: 0, y: 1, z: 0, w: 0, v: 0 },\n { x: 0, y: 0, z: 1, w: 0, v: 0 },\n { x: 0, y: 0, z: 0, w: 1, v: 0 },\n { x: 0, y: 0, z: 0, w: 0, v: 1 },\n { x: -1/5, y: -1/5, z: -1/5, w: -1/5, v: -1/5 }\n ];\n\n const edges: Edge[] = [];\n // Connect all vertices to each other\n for (let i = 0; i < 6; i++) {\n for (let j = i + 1; j < 6; j++) {\n edges.push({ start: i, end: j });\n }\n }\n\n // Generate triangular faces\n const faces: Face[] = [];\n for (let i = 0; i < 6; i++) {\n for (let j = i + 1; j < 6; j++) {\n for (let k = j + 1; k < 6; k++) {\n faces.push({ vertices: [i, j, k] });\n }\n }\n }\n\n // Generate tetrahedral cells\n const cells: Cell[] = [];\n for (let i = 0; i < 6; i++) {\n for (let j = i + 1; j < 6; j++) {\n for (let k = j + 1; k < 6; k++) {\n for (let l = k + 1; l < 6; l++) {\n cells.push({ faces: [i, j, k, l] }); // Simplified\n }\n }\n }\n }\n\n const hypercells: Cell[] = [\n { faces: [0, 1, 2, 3, 4] } // Single 5-cell\n ];\n\n return {\n vertices,\n edges,\n faces,\n cells,\n hypercells,\n name: '5-Simplex'\n };\n }\n\n // Calculate cross-section of 5D shape with a 4D hyperplane\n static calculateCrossSection(shape: Shape5D, vValue: number): Vector3D[] {\n const crossSectionPoints: Vector3D[] = [];\n \n // Find intersections of edges with the hyperplane v = vValue\n for (const edge of shape.edges) {\n const v1 = shape.vertices[edge.start];\n const v2 = shape.vertices[edge.end];\n \n // Check if edge crosses the hyperplane\n if ((v1.v <= vValue && v2.v >= vValue) || (v1.v >= vValue && v2.v <= vValue)) {\n if (Math.abs(v1.v - v2.v) > 0.001) {\n // Calculate intersection point\n const t = (vValue - v1.v) / (v2.v - v1.v);\n const intersection4D = {\n x: v1.x + t * (v2.x - v1.x),\n y: v1.y + t * (v2.y - v1.y),\n z: v1.z + t * (v2.z - v1.z),\n w: v1.w + t * (v2.w - v1.w)\n };\n \n // Project 4D intersection to 3D\n const factor = 2 / (2 - intersection4D.w);\n crossSectionPoints.push({\n x: intersection4D.x * factor,\n y: intersection4D.y * factor,\n z: intersection4D.z * factor\n });\n }\n }\n }\n \n return crossSectionPoints;\n }\n\n // Multiply two 5D matrices\n static multiplyMatrices(a: Matrix5D, b: Matrix5D): Matrix5D {\n const result = Array(5).fill(null).map(() => Array(5).fill(0));\n \n for (let i = 0; i < 5; i++) {\n for (let j = 0; j < 5; j++) {\n for (let k = 0; k < 5; k++) {\n result[i][j] += a.elements[i][k] * b.elements[k][j];\n }\n }\n }\n \n return { elements: result };\n }\n\n // Create composite rotation matrix from multiple rotations\n static createCompositeRotation(rotations: { [key: string]: number }): Matrix5D {\n let result: Matrix5D = { \n elements: Array(5).fill(null).map((_, i) => \n Array(5).fill(null).map((_, j) => i === j ? 1 : 0)\n )\n };\n\n for (const [plane, angle] of Object.entries(rotations)) {\n if (angle !== 0) {\n const rotMatrix = this.createRotationMatrix(plane, angle);\n result = this.multiplyMatrices(result, rotMatrix);\n }\n }\n\n return result;\n }\n}",[],[143,219,229],"c358fc86-59a1-11f0-9b50-f69ea79377d9","geometry4d.ts","c358fd62-59a1-11f0-9b50-f69ea79377d9",3,["D",1751721175037],"// 4D Geometry calculations and shape generation\n\nimport { Vector4D, Vector3D, Shape4D, Edge, Face, Cell, Matrix4D } from '../types.ts';\n\nexport class Geometry4D {\n // Create a 4D rotation matrix for the given plane and angle\n static createRotationMatrix(plane: string, angle: number): Matrix4D {\n const cos = Math.cos(angle);\n const sin = Math.sin(angle);\n const matrix = [\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ];\n\n switch (plane) {\n case 'xy':\n matrix[0][0] = cos; matrix[0][1] = -sin;\n matrix[1][0] = sin; matrix[1][1] = cos;\n break;\n case 'xz':\n matrix[0][0] = cos; matrix[0][2] = -sin;\n matrix[2][0] = sin; matrix[2][2] = cos;\n break;\n case 'xw':\n matrix[0][0] = cos; matrix[0][3] = -sin;\n matrix[3][0] = sin; matrix[3][3] = cos;\n break;\n case 'yz':\n matrix[1][1] = cos; matrix[1][2] = -sin;\n matrix[2][1] = sin; matrix[2][2] = cos;\n break;\n case 'yw':\n matrix[1][1] = cos; matrix[1][3] = -sin;\n matrix[3][1] = sin; matrix[3][3] = cos;\n break;\n case 'zw':\n matrix[2][2] = cos; matrix[2][3] = -sin;\n matrix[3][2] = sin; matrix[3][3] = cos;\n break;\n }\n\n return { elements: matrix };\n }\n\n // Apply transformation matrix to a 4D vector\n static transformVector(vector: Vector4D, matrix: Matrix4D): Vector4D {\n const { x, y, z, w } = vector;\n const m = matrix.elements;\n \n return {\n x: m[0][0] * x + m[0][1] * y + m[0][2] * z + m[0][3] * w,\n y: m[1][0] * x + m[1][1] * y + m[1][2] * z + m[1][3] * w,\n z: m[2][0] * x + m[2][1] * y + m[2][2] * z + m[2][3] * w,\n w: m[3][0] * x + m[3][1] * y + m[3][2] * z + m[3][3] * w\n };\n }\n\n // Project 4D point to 3D using perspective projection\n static projectTo3D(point: Vector4D, distance: number = 2): Vector3D {\n const factor = distance / (distance - point.w);\n return {\n x: point.x * factor,\n y: point.y * factor,\n z: point.z * factor\n };\n }\n\n // Generate tesseract (4D cube) vertices and structure\n static createTesseract(): Shape4D {\n const vertices: Vector4D[] = [];\n \n // Generate all 16 vertices of a tesseract\n for (let i = 0; i < 16; i++) {\n vertices.push({\n x: (i & 1) ? 1 : -1,\n y: (i & 2) ? 1 : -1,\n z: (i & 4) ? 1 : -1,\n w: (i & 8) ? 1 : -1\n });\n }\n\n // Generate edges (32 edges total)\n const edges: Edge[] = [];\n for (let i = 0; i < 16; i++) {\n for (let j = i + 1; j < 16; j++) {\n // Two vertices are connected if they differ in exactly one coordinate\n const diff = [\n vertices[i].x !== vertices[j].x ? 1 : 0,\n vertices[i].y !== vertices[j].y ? 1 : 0,\n vertices[i].z !== vertices[j].z ? 1 : 0,\n vertices[i].w !== vertices[j].w ? 1 : 0\n ].reduce((sum, val) => sum + val, 0);\n \n if (diff === 1) {\n edges.push({ start: i, end: j });\n }\n }\n }\n\n // Generate faces (24 square faces)\n const faces: Face[] = [];\n // Each face is defined by 4 vertices that form a square\n // This is a simplified version - full implementation would be more complex\n for (let dim1 = 0; dim1 < 4; dim1++) {\n for (let dim2 = dim1 + 1; dim2 < 4; dim2++) {\n for (let val1 = -1; val1 <= 1; val1 += 2) {\n for (let val2 = -1; val2 <= 1; val2 += 2) {\n const faceVertices: number[] = [];\n for (let i = 0; i < 16; i++) {\n const coords = [vertices[i].x, vertices[i].y, vertices[i].z, vertices[i].w];\n if (coords[dim1] === val1 && coords[dim2] === val2) {\n faceVertices.push(i);\n }\n }\n if (faceVertices.length === 4) {\n faces.push({ vertices: faceVertices });\n }\n }\n }\n }\n }\n\n // Generate cells (8 cubic cells)\n const cells: Cell[] = [];\n for (let w = -1; w <= 1; w += 2) {\n cells.push({ faces: faces.map((_, i) => i).slice(0, 6) }); // Simplified\n }\n\n return {\n vertices,\n edges,\n faces,\n cells,\n name: 'Tesseract'\n };\n }\n\n // Generate 16-cell (4D cross-polytope)\n static create16Cell(): Shape4D {\n const vertices: Vector4D[] = [\n { x: 1, y: 0, z: 0, w: 0 },\n { x: -1, y: 0, z: 0, w: 0 },\n { x: 0, y: 1, z: 0, w: 0 },\n { x: 0, y: -1, z: 0, w: 0 },\n { x: 0, y: 0, z: 1, w: 0 },\n { x: 0, y: 0, z: -1, w: 0 },\n { x: 0, y: 0, z: 0, w: 1 },\n { x: 0, y: 0, z: 0, w: -1 }\n ];\n\n const edges: Edge[] = [];\n // Connect vertices that are not opposite to each other\n for (let i = 0; i < 8; i++) {\n for (let j = i + 1; j < 8; j++) {\n const v1 = vertices[i];\n const v2 = vertices[j];\n // Check if they're not opposite (dot product != -1)\n const dot = v1.x * v2.x + v1.y * v2.y + v1.z * v2.z + v1.w * v2.w;\n if (Math.abs(dot + 1) > 0.001) {\n edges.push({ start: i, end: j });\n }\n }\n }\n\n // Generate triangular faces\n const faces: Face[] = [];\n for (let i = 0; i < 8; i++) {\n for (let j = i + 1; j < 8; j++) {\n for (let k = j + 1; k < 8; k++) {\n // Check if these three vertices form a valid triangular face\n const v1 = vertices[i];\n const v2 = vertices[j];\n const v3 = vertices[k];\n \n // Simplified check - in a real implementation, this would be more sophisticated\n const sum = Math.abs(v1.x + v2.x + v3.x) + \n Math.abs(v1.y + v2.y + v3.y) + \n Math.abs(v1.z + v2.z + v3.z) + \n Math.abs(v1.w + v2.w + v3.w);\n \n if (Math.abs(sum - 1) < 0.001) {\n faces.push({ vertices: [i, j, k] });\n }\n }\n }\n }\n\n const cells: Cell[] = [];\n // Each cell is a tetrahedron\n for (let i = 0; i < faces.length; i += 4) {\n if (i + 3 < faces.length) {\n cells.push({ faces: [i, i + 1, i + 2, i + 3] });\n }\n }\n\n return {\n vertices,\n edges,\n faces,\n cells,\n name: '16-Cell'\n };\n }\n\n // Calculate cross-section of 4D shape with a 3D hyperplane\n static calculateCrossSection(shape: Shape4D, wValue: number): Vector3D[] {\n const crossSectionPoints: Vector3D[] = [];\n \n // Find intersections of edges with the hyperplane w = wValue\n for (const edge of shape.edges) {\n const v1 = shape.vertices[edge.start];\n const v2 = shape.vertices[edge.end];\n \n // Check if edge crosses the hyperplane\n if ((v1.w <= wValue && v2.w >= wValue) || (v1.w >= wValue && v2.w <= wValue)) {\n if (Math.abs(v1.w - v2.w) > 0.001) {\n // Calculate intersection point\n const t = (wValue - v1.w) / (v2.w - v1.w);\n const intersection = {\n x: v1.x + t * (v2.x - v1.x),\n y: v1.y + t * (v2.y - v1.y),\n z: v1.z + t * (v2.z - v1.z)\n };\n crossSectionPoints.push(intersection);\n }\n }\n }\n \n return crossSectionPoints;\n }\n\n // Multiply two 4D matrices\n static multiplyMatrices(a: Matrix4D, b: Matrix4D): Matrix4D {\n const result = Array(4).fill(null).map(() => Array(4).fill(0));\n \n for (let i = 0; i < 4; i++) {\n for (let j = 0; j < 4; j++) {\n for (let k = 0; k < 4; k++) {\n result[i][j] += a.elements[i][k] * b.elements[k][j];\n }\n }\n }\n \n return { elements: result };\n }\n\n // Create composite rotation matrix from multiple rotations\n static createCompositeRotation(rotations: { [key: string]: number }): Matrix4D {\n let result: Matrix4D = { elements: [\n [1, 0, 0, 0],\n [0, 1, 0, 0],\n [0, 0, 1, 0],\n [0, 0, 0, 1]\n ]};\n\n for (const [plane, angle] of Object.entries(rotations)) {\n if (angle !== 0) {\n const rotMatrix = this.createRotationMatrix(plane, angle);\n result = this.multiplyMatrices(result, rotMatrix);\n }\n }\n\n return result;\n }\n}",[],[143,219,237],"c3591a90-59a1-11f0-9b50-f69ea79377d9",["D",1751721175037],[184,185,186,187],[143,219],["D",1751721129544],[183,188,189],[143],"705cb242-59a2-11f0-b924-f69ea79377d9","style.css","705cb2ec-59a2-11f0-b924-f69ea79377d9",9,["D",1751721465312],"/* Additional styles for the Higher Dimensional Geometry Visualizer */\n\n/* Custom scrollbar for control panel */\n.control-panel::-webkit-scrollbar {\n width: 6px;\n}\n\n.control-panel::-webkit-scrollbar-track {\n background: rgba(255, 255, 255, 0.1);\n border-radius: 3px;\n}\n\n.control-panel::-webkit-scrollbar-thumb {\n background: rgba(0, 212, 255, 0.5);\n border-radius: 3px;\n}\n\n.control-panel::-webkit-scrollbar-thumb:hover {\n background: rgba(0, 212, 255, 0.7);\n}\n\n/* Animation for loading screen */\n@keyframes fadeIn {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n}\n\n@keyframes fadeOut {\n from { opacity: 1; transform: translateY(0); }\n to { opacity: 0; transform: translateY(-20px); }\n}\n\n.fade-in {\n animation: fadeIn 0.5s ease-out;\n}\n\n.fade-out {\n animation: fadeOut 0.5s ease-out;\n}\n\n/* Glow effects for interactive elements */\n.control-button:focus,\n.control-input:focus,\n.slider:focus {\n box-shadow: 0 0 0 2px rgba(0, 212, 255, 0.3);\n}\n\n/* Hover effects for shape buttons */\n.shape-button {\n position: relative;\n overflow: hidden;\n}\n\n.shape-button::before {\n content: '';\n position: absolute;\n top: 0;\n left: -100%;\n width: 100%;\n height: 100%;\n background: linear-gradient(90deg, transparent, rgba(0, 212, 255, 0.2), transparent);\n transition: left 0.5s;\n}\n\n.shape-button:hover::before {\n left: 100%;\n}\n\n/* Pulse animation for active elements */\n@keyframes pulse {\n 0% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0.4); }\n 70% { box-shadow: 0 0 0 10px rgba(0, 212, 255, 0); }\n 100% { box-shadow: 0 0 0 0 rgba(0, 212, 255, 0); }\n}\n\n.shape-button.active {\n animation: pulse 2s infinite;\n}\n\n/* Responsive design improvements */\n@media (max-width: 1024px) {\n .control-panel {\n width: 280px;\n }\n \n .rotation-grid {\n grid-template-columns: 1fr;\n gap: 12px;\n }\n}\n\n@media (max-width: 768px) {\n .shape-grid {\n grid-template-columns: 1fr;\n }\n \n .slider-container {\n flex-direction: column;\n gap: 8px;\n }\n \n .slider-value {\n text-align: center;\n min-width: auto;\n }\n \n .section-title {\n font-size: 14px;\n }\n \n .control-label {\n font-size: 12px;\n }\n}\n\n/* High contrast mode support */\n@media (prefers-contrast: high) {\n .control-panel {\n background: rgba(0, 0, 0, 0.95);\n border-color: #ffffff;\n }\n \n .control-input,\n .shape-button {\n border-color: #ffffff;\n }\n \n .slider {\n background: #ffffff;\n }\n}\n\n/* Reduced motion support */\n@media (prefers-reduced-motion: reduce) {\n .loading-spinner {\n animation: none;\n }\n \n .shape-button::before {\n transition: none;\n }\n \n .shape-button.active {\n animation: none;\n }\n \n .fade-in,\n .fade-out {\n animation: none;\n }\n}\n\n/* Print styles */\n@media print {\n .control-panel,\n .info-panel,\n .performance-indicator,\n .loading-screen {\n display: none !important;\n }\n \n .viewer-container {\n position: static;\n width: 100%;\n height: 80vh;\n }\n}\n\n/* Focus indicators for accessibility */\n.control-button:focus-visible,\n.shape-button:focus-visible {\n outline: 2px solid #00d4ff;\n outline-offset: 2px;\n}\n\n.checkbox:focus-visible {\n outline: 2px solid #00d4ff;\n outline-offset: 2px;\n}\n\n/* Tooltip styles */\n.tooltip {\n position: relative;\n}\n\n.tooltip::after {\n content: attr(data-tooltip);\n position: absolute;\n bottom: 100%;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(0, 0, 0, 0.9);\n color: white;\n padding: 8px 12px;\n border-radius: 6px;\n font-size: 12px;\n white-space: nowrap;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.3s;\n z-index: 1000;\n}\n\n.tooltip:hover::after {\n opacity: 1;\n}\n\n/* Error states */\n.control-input.error {\n border-color: #ff4444;\n box-shadow: 0 0 0 2px rgba(255, 68, 68, 0.2);\n}\n\n.error-message {\n color: #ff4444;\n font-size: 12px;\n margin-top: 4px;\n}\n\n/* Success states */\n.control-input.success {\n border-color: #44ff44;\n box-shadow: 0 0 0 2px rgba(68, 255, 68, 0.2);\n}\n\n/* Loading states */\n.loading {\n opacity: 0.6;\n pointer-events: none;\n}\n\n.loading::after {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n width: 20px;\n height: 20px;\n margin: -10px 0 0 -10px;\n border: 2px solid rgba(0, 212, 255, 0.3);\n border-top: 2px solid #00d4ff;\n border-radius: 50%;\n animation: spin 1s linear infinite;\n}\n\n/* Dark theme adjustments */\n@media (prefers-color-scheme: dark) {\n /* Already optimized for dark theme */\n}\n\n/* Light theme support */\n@media (prefers-color-scheme: light) {\n body {\n background: linear-gradient(135deg, #f0f0f0 0%, #e0e0e0 50%, #d0d0d0 100%);\n color: #333333;\n }\n \n .control-panel,\n .info-panel,\n .performance-indicator {\n background: rgba(255, 255, 255, 0.95);\n border-color: rgba(0, 0, 0, 0.2);\n color: #333333;\n }\n \n .section-title {\n color: #0066cc;\n }\n \n .control-input {\n background: rgba(0, 0, 0, 0.05);\n border-color: rgba(0, 0, 0, 0.2);\n color: #333333;\n }\n \n .slider {\n background: rgba(0, 0, 0, 0.2);\n }\n \n .slider::-webkit-slider-thumb {\n background: #0066cc;\n }\n \n .slider::-moz-range-thumb {\n background: #0066cc;\n }\n}",[],[150,252],"927610a8-59a2-11f0-b953-f69ea79377d9","index.tsx","9276117a-59a2-11f0-b953-f69ea79377d9",10,["D",1751721522518],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport { createRoot } from 'https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0,react-dom@18.2.0';\nimport { App } from './components/App.tsx';\n\n// Initialize the application\nasync function initializeApp() {\n try {\n // Hide loading screen and show app\n const loadingScreen = document.getElementById('loadingScreen');\n const appContainer = document.getElementById('appContainer');\n \n if (loadingScreen && appContainer) {\n loadingScreen.style.display = 'none';\n appContainer.style.display = 'block';\n }\n\n // Mount React app\n const container = document.getElementById('viewerContainer');\n if (container) {\n const root = createRoot(container);\n root.render();\n }\n\n // Initialize control panel event listeners\n initializeControls();\n \n } catch (error) {\n console.error('Failed to initialize app:', error);\n showError('Failed to initialize the application. Please refresh the page.');\n }\n}\n\nfunction initializeControls() {\n // Get all control elements\n const dimensionSelect = document.getElementById('dimensionSelect') as HTMLSelectElement;\n const shapeButtons = document.querySelectorAll('.shape-button');\n const scaleSlider = document.getElementById('scaleSlider') as HTMLInputElement;\n const scaleValue = document.getElementById('scaleValue') as HTMLSpanElement;\n \n // Rotation sliders\n const rotationSliders = [\n 'rotationXY', 'rotationXZ', 'rotationXW', \n 'rotationYZ', 'rotationYW', 'rotationZW'\n ];\n \n const projectionDistance = document.getElementById('projectionDistance') as HTMLInputElement;\n const projectionDistanceValue = document.getElementById('projectionDistanceValue') as HTMLSpanElement;\n \n const cameraFOV = document.getElementById('cameraFOV') as HTMLInputElement;\n const cameraFOVValue = document.getElementById('cameraFOVValue') as HTMLSpanElement;\n \n const crossSectionEnabled = document.getElementById('crossSectionEnabled') as HTMLInputElement;\n const crossSectionPosition = document.getElementById('crossSectionPosition') as HTMLInputElement;\n const crossSectionPositionValue = document.getElementById('crossSectionPositionValue') as HTMLSpanElement;\n \n const autoRotateButton = document.getElementById('autoRotateButton') as HTMLButtonElement;\n \n // Rendering controls\n const showVertices = document.getElementById('showVertices') as HTMLInputElement;\n const showEdges = document.getElementById('showEdges') as HTMLInputElement;\n const showFaces = document.getElementById('showFaces') as HTMLInputElement;\n const wireframeMode = document.getElementById('wireframeMode') as HTMLInputElement;\n const opacity = document.getElementById('opacity') as HTMLInputElement;\n const opacityValue = document.getElementById('opacityValue') as HTMLSpanElement;\n\n // Dimension selection\n if (dimensionSelect) {\n dimensionSelect.addEventListener('change', (e) => {\n const dimension = parseInt((e.target as HTMLSelectElement).value);\n updateShapeButtons(dimension);\n dispatchAppEvent('dimensionChanged', { dimension });\n });\n }\n\n // Shape selection\n shapeButtons.forEach(button => {\n button.addEventListener('click', (e) => {\n const target = e.target as HTMLButtonElement;\n const shape = target.dataset.shape;\n \n // Update active state\n shapeButtons.forEach(b => b.classList.remove('active'));\n target.classList.add('active');\n \n // Update shape info\n updateShapeInfo(shape);\n \n dispatchAppEvent('shapeChanged', { shape });\n });\n });\n\n // Scale control\n if (scaleSlider && scaleValue) {\n scaleSlider.addEventListener('input', (e) => {\n const value = parseFloat((e.target as HTMLInputElement).value);\n scaleValue.textContent = value.toFixed(1);\n dispatchAppEvent('scaleChanged', { scale: value });\n });\n }\n\n // Rotation controls\n rotationSliders.forEach(sliderId => {\n const slider = document.getElementById(sliderId) as HTMLInputElement;\n const valueSpan = document.getElementById(sliderId + 'Value') as HTMLSpanElement;\n \n if (slider && valueSpan) {\n slider.addEventListener('input', (e) => {\n const value = parseInt((e.target as HTMLInputElement).value);\n valueSpan.textContent = value + '°';\n \n const plane = sliderId.replace('rotation', '').toLowerCase();\n dispatchAppEvent('rotationChanged', { plane, angle: value * Math.PI / 180 });\n });\n }\n });\n\n // Projection distance\n if (projectionDistance && projectionDistanceValue) {\n projectionDistance.addEventListener('input', (e) => {\n const value = parseFloat((e.target as HTMLInputElement).value);\n projectionDistanceValue.textContent = value.toFixed(1);\n dispatchAppEvent('projectionDistanceChanged', { distance: value });\n });\n }\n\n // Camera FOV\n if (cameraFOV && cameraFOVValue) {\n cameraFOV.addEventListener('input', (e) => {\n const value = parseInt((e.target as HTMLInputElement).value);\n cameraFOVValue.textContent = value + '°';\n dispatchAppEvent('cameraFOVChanged', { fov: value });\n });\n }\n\n // Cross section controls\n if (crossSectionEnabled) {\n crossSectionEnabled.addEventListener('change', (e) => {\n const enabled = (e.target as HTMLInputElement).checked;\n if (crossSectionPosition) {\n crossSectionPosition.disabled = !enabled;\n }\n dispatchAppEvent('crossSectionToggled', { enabled });\n });\n }\n\n if (crossSectionPosition && crossSectionPositionValue) {\n crossSectionPosition.addEventListener('input', (e) => {\n const value = parseFloat((e.target as HTMLInputElement).value);\n crossSectionPositionValue.textContent = value.toFixed(1);\n dispatchAppEvent('crossSectionPositionChanged', { position: value });\n });\n }\n\n // Auto rotate button\n if (autoRotateButton) {\n let isAutoRotating = false;\n autoRotateButton.addEventListener('click', () => {\n isAutoRotating = !isAutoRotating;\n autoRotateButton.textContent = isAutoRotating ? '⏸️ Stop Rotation' : '🔄 Auto Rotate';\n autoRotateButton.classList.toggle('active', isAutoRotating);\n dispatchAppEvent('autoRotateToggled', { enabled: isAutoRotating });\n });\n }\n\n // Rendering controls\n const renderingControls = [\n { element: showVertices, event: 'showVerticesChanged' },\n { element: showEdges, event: 'showEdgesChanged' },\n { element: showFaces, event: 'showFacesChanged' },\n { element: wireframeMode, event: 'wireframeModeChanged' }\n ];\n\n renderingControls.forEach(({ element, event }) => {\n if (element) {\n element.addEventListener('change', (e) => {\n const checked = (e.target as HTMLInputElement).checked;\n dispatchAppEvent(event, { enabled: checked });\n });\n }\n });\n\n // Opacity control\n if (opacity && opacityValue) {\n opacity.addEventListener('input', (e) => {\n const value = parseFloat((e.target as HTMLInputElement).value);\n opacityValue.textContent = value.toFixed(1);\n dispatchAppEvent('opacityChanged', { opacity: value });\n });\n }\n\n // Initialize performance monitoring\n initializePerformanceMonitoring();\n}\n\nfunction updateShapeButtons(dimension: number) {\n const shapeGrid = document.getElementById('shapeGrid');\n if (!shapeGrid) return;\n\n const shapes4D = [\n { id: 'tesseract', name: 'Tesseract' },\n { id: '16-cell', name: '16-Cell' },\n { id: '600-cell', name: '600-Cell' },\n { id: '120-cell', name: '120-Cell' }\n ];\n\n const shapes5D = [\n { id: 'penteract', name: 'Penteract' },\n { id: '5-simplex', name: '5-Simplex' },\n { id: '5-orthoplex', name: '5-Orthoplex' },\n { id: 'custom', name: 'Custom' }\n ];\n\n const shapes = dimension === 4 ? shapes4D : shapes5D;\n \n shapeGrid.innerHTML = shapes.map(shape => \n ``\n ).join('');\n\n // Re-attach event listeners\n const newButtons = shapeGrid.querySelectorAll('.shape-button');\n newButtons.forEach(button => {\n button.addEventListener('click', (e) => {\n const target = e.target as HTMLButtonElement;\n const shape = target.dataset.shape;\n \n newButtons.forEach(b => b.classList.remove('active'));\n target.classList.add('active');\n \n updateShapeInfo(shape);\n dispatchAppEvent('shapeChanged', { shape });\n });\n });\n}\n\nfunction updateShapeInfo(shape: string | undefined) {\n const shapeInfo = document.getElementById('shapeInfo');\n if (!shapeInfo || !shape) return;\n\n const shapeData: { [key: string]: any } = {\n 'tesseract': {\n name: 'Tesseract (4D Cube)',\n vertices: 16,\n edges: 32,\n faces: 24,\n cells: 8,\n description: 'The tesseract is the 4-dimensional analog of a cube. Each vertex connects to 4 edges, and the shape can be visualized as two 3D cubes connected through the 4th dimension.'\n },\n '16-cell': {\n name: '16-Cell (4D Cross-polytope)',\n vertices: 8,\n edges: 24,\n faces: 32,\n cells: 16,\n description: 'The 16-cell is the 4D analog of an octahedron. It has 8 vertices arranged as the vertices of two tetrahedra in dual position.'\n },\n 'penteract': {\n name: 'Penteract (5D Cube)',\n vertices: 32,\n edges: 80,\n faces: 80,\n cells: 40,\n hypercells: 10,\n description: 'The penteract is the 5-dimensional hypercube. It can be constructed by connecting corresponding vertices of two tesseracts.'\n },\n '5-simplex': {\n name: '5-Simplex (5D Tetrahedron)',\n vertices: 6,\n edges: 15,\n faces: 20,\n cells: 15,\n hypercells: 6,\n description: 'The 5-simplex is the simplest regular polytope in 5D space, analogous to a tetrahedron in 3D.'\n }\n };\n\n const data = shapeData[shape];\n if (data) {\n let html = `${data.name}
`;\n html += `Vertices: ${data.vertices}
`;\n html += `Edges: ${data.edges}
`;\n html += `Faces: ${data.faces}
`;\n html += `Cells: ${data.cells}
`;\n if (data.hypercells) {\n html += `Hypercells: ${data.hypercells}
`;\n }\n html += `
${data.description}`;\n \n shapeInfo.innerHTML = html;\n }\n}\n\nfunction initializePerformanceMonitoring() {\n const fpsCounter = document.getElementById('fpsCounter');\n const vertexCount = document.getElementById('vertexCount');\n \n let frameCount = 0;\n let lastTime = performance.now();\n \n function updatePerformance() {\n frameCount++;\n const currentTime = performance.now();\n \n if (currentTime - lastTime >= 1000) {\n const fps = Math.round((frameCount * 1000) / (currentTime - lastTime));\n if (fpsCounter) {\n fpsCounter.textContent = fps.toString();\n }\n \n frameCount = 0;\n lastTime = currentTime;\n }\n \n requestAnimationFrame(updatePerformance);\n }\n \n updatePerformance();\n \n // Listen for vertex count updates\n window.addEventListener('vertexCountUpdate', (e: any) => {\n if (vertexCount) {\n vertexCount.textContent = e.detail.count.toString();\n }\n });\n}\n\nfunction dispatchAppEvent(type: string, detail: any) {\n window.dispatchEvent(new CustomEvent(type, { detail }));\n}\n\nfunction showError(message: string) {\n const errorDiv = document.createElement('div');\n errorDiv.style.cssText = `\n position: fixed;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n background: rgba(255, 68, 68, 0.95);\n color: white;\n padding: 20px;\n border-radius: 8px;\n z-index: 10000;\n max-width: 400px;\n text-align: center;\n `;\n errorDiv.textContent = message;\n document.body.appendChild(errorDiv);\n \n setTimeout(() => {\n document.body.removeChild(errorDiv);\n }, 5000);\n}\n\n// Initialize when DOM is loaded\nif (document.readyState === 'loading') {\n document.addEventListener('DOMContentLoaded', initializeApp);\n} else {\n initializeApp();\n}",[],[150,260],"5cd7ef20-59a2-11f0-acd0-f69ea79377d9","index.html","5cd7effc-59a2-11f0-acd0-f69ea79377d9",["D",1751721432562],"\n\n\n \n \n Higher Dimensional Geometry Visualizer\n \n \n \n \n\n\n

Loading Higher Dimensional Geometry Visualizer

\n Initializing mathematical libraries...\n

\n\n

\n \n

\n FPS: 60 | \n Vertices: 0\n

\n \n

\n 🔮 Shape Selection\n

\n Dimension\n \n

\n Shape Type\n

\n \n \n \n \n

\n\n

\n 🔄 Transformations\n

\n Scale\n

\n \n 1.0\n

\n 4D Rotations\n

\n XY Plane\n

\n \n 0°\n

\n XZ Plane\n

\n \n 0°\n

\n XW Plane\n

\n \n 0°\n

\n YZ Plane\n

\n \n 0°\n

\n YW Plane\n

\n \n 0°\n

\n ZW Plane\n

\n \n 0°\n

\n \n

\n\n

\n 📐 Projection & View\n

\n Projection Distance\n

\n \n 2.0\n

\n Camera FOV\n

\n \n 75°\n

\n\n

\n ✂️ Cross Section\n

\n \n Enable Cross Section\n

\n Section Position\n

\n \n 0.0\n

\n\n

\n 🎨 Rendering\n

\n \n Show Vertices\n

\n \n Show Edges\n

\n \n Show Faces\n

\n \n Wireframe Mode\n

\n Opacity\n

\n \n 0.8\n

\n\n

Shape Information

\n Tesseract (4D Cube)
\n Vertices: 16
\n Edges: 32
\n Faces: 24
\n Cells: 8

\n The tesseract is the 4-dimensional analog of a cube. Each vertex connects to 4 edges, and the shape can be visualized as two 3D cubes connected through the 4th dimension.\n

\n\n \n\n",[],[150,268],"de35a18e-59a2-11f0-92ff-f69ea79377d9","GeometryViewer.tsx","de35a260-59a2-11f0-92ff-f69ea79377d9","b83b9ab1-c4c4-4d1e-9716-328a3363cc83",12,["D",1751721649599],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef, useCallback } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport * as THREE from 'https://esm.sh/three@0.158.0';\nimport { AppState, Vector3D, Vector4D, Vector5D } from '../../shared/types.ts';\nimport { Geometry4D } from '../../shared/math/geometry4d.ts';\nimport { Geometry5D } from '../../shared/math/geometry5d.ts';\nimport { ProjectionEngine } from '../../shared/math/projections.ts';\nimport { TransformationEngine } from '../../shared/math/transformations.ts';\n\ninterface GeometryViewerProps {\n appState: AppState;\n container: HTMLDivElement | null;\n}\n\nexport function GeometryViewer({ appState, container }: GeometryViewerProps) {\n const sceneRef = useRef();\n const rendererRef = useRef();\n const cameraRef = useRef();\n const geometryGroupRef = useRef();\n const animationFrameRef = useRef();\n const controlsRef = useRef();\n\n // Initialize Three.js scene\n const initializeScene = useCallback(() => {\n if (!container) return;\n\n // Scene\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x000000);\n sceneRef.current = scene;\n\n // Camera\n const camera = new THREE.PerspectiveCamera(\n appState.camera.fov,\n container.clientWidth / container.clientHeight,\n 0.1,\n 1000\n );\n camera.position.set(\n appState.camera.position.x,\n appState.camera.position.y,\n appState.camera.position.z\n );\n cameraRef.current = camera;\n\n // Renderer\n const renderer = new THREE.WebGLRenderer({ \n antialias: true,\n alpha: true,\n powerPreference: 'high-performance'\n });\n renderer.setSize(container.clientWidth, container.clientHeight);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n renderer.shadowMap.enabled = true;\n renderer.shadowMap.type = THREE.PCFSoftShadowMap;\n rendererRef.current = renderer;\n\n // Add renderer to container\n container.appendChild(renderer.domElement);\n\n // Lighting\n const ambientLight = new THREE.AmbientLight(0x404040, appState.lighting.ambient);\n scene.add(ambientLight);\n\n const directionalLight = new THREE.DirectionalLight(0xffffff, appState.lighting.directional.intensity);\n directionalLight.position.set(\n appState.lighting.directional.direction.x,\n appState.lighting.directional.direction.y,\n appState.lighting.directional.direction.z\n );\n directionalLight.castShadow = true;\n directionalLight.shadow.mapSize.width = 2048;\n directionalLight.shadow.mapSize.height = 2048;\n scene.add(directionalLight);\n\n const pointLight = new THREE.PointLight(0x00d4ff, appState.lighting.point.intensity);\n pointLight.position.set(\n appState.lighting.point.position.x,\n appState.lighting.point.position.y,\n appState.lighting.point.position.z\n );\n scene.add(pointLight);\n\n // Geometry group\n const geometryGroup = new THREE.Group();\n scene.add(geometryGroup);\n geometryGroupRef.current = geometryGroup;\n\n // Mouse controls (simplified orbit controls)\n let isMouseDown = false;\n let mouseX = 0;\n let mouseY = 0;\n let cameraRotationX = 0;\n let cameraRotationY = 0;\n\n const handleMouseDown = (event: MouseEvent) => {\n isMouseDown = true;\n mouseX = event.clientX;\n mouseY = event.clientY;\n };\n\n const handleMouseMove = (event: MouseEvent) => {\n if (!isMouseDown) return;\n\n const deltaX = event.clientX - mouseX;\n const deltaY = event.clientY - mouseY;\n\n cameraRotationY += deltaX * 0.01;\n cameraRotationX += deltaY * 0.01;\n\n // Clamp vertical rotation\n cameraRotationX = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, cameraRotationX));\n\n // Update camera position\n const radius = 5;\n camera.position.x = radius * Math.cos(cameraRotationX) * Math.sin(cameraRotationY);\n camera.position.y = radius * Math.sin(cameraRotationX);\n camera.position.z = radius * Math.cos(cameraRotationX) * Math.cos(cameraRotationY);\n camera.lookAt(0, 0, 0);\n\n mouseX = event.clientX;\n mouseY = event.clientY;\n };\n\n const handleMouseUp = () => {\n isMouseDown = false;\n };\n\n const handleWheel = (event: WheelEvent) => {\n event.preventDefault();\n const scale = event.deltaY > 0 ? 1.1 : 0.9;\n camera.position.multiplyScalar(scale);\n camera.position.clampLength(2, 20);\n };\n\n renderer.domElement.addEventListener('mousedown', handleMouseDown);\n renderer.domElement.addEventListener('mousemove', handleMouseMove);\n renderer.domElement.addEventListener('mouseup', handleMouseUp);\n renderer.domElement.addEventListener('wheel', handleWheel);\n\n controlsRef.current = {\n handleMouseDown,\n handleMouseMove,\n handleMouseUp,\n handleWheel\n };\n\n // Handle resize\n const handleResize = () => {\n if (!container || !camera || !renderer) return;\n \n camera.aspect = container.clientWidth / container.clientHeight;\n camera.updateProjectionMatrix();\n renderer.setSize(container.clientWidth, container.clientHeight);\n };\n\n window.addEventListener('resize', handleResize);\n\n return () => {\n window.removeEventListener('resize', handleResize);\n if (renderer.domElement.parentNode) {\n renderer.domElement.parentNode.removeChild(renderer.domElement);\n }\n renderer.dispose();\n };\n }, [container, appState.camera, appState.lighting]);\n\n // Update geometry based on app state\n const updateGeometry = useCallback(() => {\n if (!geometryGroupRef.current) return;\n\n // Clear existing geometry\n while (geometryGroupRef.current.children.length > 0) {\n const child = geometryGroupRef.current.children[0];\n geometryGroupRef.current.remove(child);\n if (child instanceof THREE.Mesh) {\n child.geometry.dispose();\n if (Array.isArray(child.material)) {\n child.material.forEach(mat => mat.dispose());\n } else {\n child.material.dispose();\n }\n }\n }\n\n try {\n // Generate shape based on current settings\n let shape4D, shape5D;\n let projectedVertices: Vector3D[] = [];\n\n if (appState.dimension === 4) {\n // Generate 4D shape\n switch (appState.currentShape) {\n case 'tesseract':\n shape4D = Geometry4D.createTesseract();\n break;\n case '16-cell':\n shape4D = Geometry4D.create16Cell();\n break;\n default:\n shape4D = Geometry4D.createTesseract();\n }\n\n // Apply transformations\n const transformedVertices = shape4D.vertices.map(vertex =>\n TransformationEngine.transform4D(vertex, appState.transformations)\n );\n\n // Project to 3D\n projectedVertices = transformedVertices.map(vertex =>\n ProjectionEngine.perspective4DTo3D(vertex, appState.projection)\n );\n\n // Update vertex count\n window.dispatchEvent(new CustomEvent('vertexCountUpdate', {\n detail: { count: shape4D.vertices.length }\n }));\n\n // Create 3D visualization\n createVisualization(projectedVertices, shape4D.edges, shape4D.faces);\n\n } else if (appState.dimension === 5) {\n // Generate 5D shape\n switch (appState.currentShape) {\n case 'penteract':\n shape5D = Geometry5D.createPenteract();\n break;\n case '5-simplex':\n shape5D = Geometry5D.create5Simplex();\n break;\n default:\n shape5D = Geometry5D.createPenteract();\n }\n\n // Apply transformations (simplified for 5D)\n const transformedVertices = shape5D.vertices.map(vertex => {\n // Apply basic scaling and translation\n return {\n x: vertex.x * appState.transformations.scale,\n y: vertex.y * appState.transformations.scale,\n z: vertex.z * appState.transformations.scale,\n w: vertex.w * appState.transformations.scale,\n v: vertex.v * appState.transformations.scale\n };\n });\n\n // Project to 3D\n projectedVertices = transformedVertices.map(vertex =>\n ProjectionEngine.perspective5DTo3D(vertex, appState.projection)\n );\n\n // Update vertex count\n window.dispatchEvent(new CustomEvent('vertexCountUpdate', {\n detail: { count: shape5D.vertices.length }\n }));\n\n // Create 3D visualization\n createVisualization(projectedVertices, shape5D.edges, shape5D.faces);\n }\n\n // Handle cross-sections\n if (appState.crossSection.enabled && shape4D) {\n const crossSectionPoints = Geometry4D.calculateCrossSection(\n shape4D,\n appState.crossSection.position\n );\n \n if (crossSectionPoints.length > 0) {\n createCrossSectionVisualization(crossSectionPoints);\n }\n }\n\n } catch (error) {\n console.error('Error updating geometry:', error);\n }\n }, [appState]);\n\n // Create 3D visualization from projected vertices\n const createVisualization = useCallback((\n vertices: Vector3D[],\n edges: { start: number; end: number }[],\n faces: { vertices: number[] }[]\n ) => {\n if (!geometryGroupRef.current) return;\n\n const group = geometryGroupRef.current;\n\n // Create vertices\n if (appState.rendering.showVertices) {\n const vertexGeometry = new THREE.SphereGeometry(0.05, 8, 6);\n const vertexMaterial = new THREE.MeshBasicMaterial({\n color: appState.rendering.vertexColor,\n transparent: true,\n opacity: appState.rendering.opacity\n });\n\n vertices.forEach(vertex => {\n const vertexMesh = new THREE.Mesh(vertexGeometry, vertexMaterial);\n vertexMesh.position.set(vertex.x, vertex.y, vertex.z);\n group.add(vertexMesh);\n });\n }\n\n // Create edges\n if (appState.rendering.showEdges) {\n const edgeGeometry = new THREE.BufferGeometry();\n const edgePositions: number[] = [];\n\n edges.forEach(edge => {\n const start = vertices[edge.start];\n const end = vertices[edge.end];\n \n if (start && end) {\n edgePositions.push(start.x, start.y, start.z);\n edgePositions.push(end.x, end.y, end.z);\n }\n });\n\n edgeGeometry.setAttribute('position', new THREE.Float32BufferAttribute(edgePositions, 3));\n \n const edgeMaterial = new THREE.LineBasicMaterial({\n color: appState.rendering.edgeColor,\n transparent: true,\n opacity: appState.rendering.opacity\n });\n\n const edgeLines = new THREE.LineSegments(edgeGeometry, edgeMaterial);\n group.add(edgeLines);\n }\n\n // Create faces\n if (appState.rendering.showFaces && faces.length > 0) {\n faces.forEach(face => {\n if (face.vertices.length >= 3) {\n const faceGeometry = new THREE.BufferGeometry();\n const facePositions: number[] = [];\n const faceIndices: number[] = [];\n\n // Add vertices\n face.vertices.forEach(vertexIndex => {\n const vertex = vertices[vertexIndex];\n if (vertex) {\n facePositions.push(vertex.x, vertex.y, vertex.z);\n }\n });\n\n // Create triangles for faces with more than 3 vertices\n for (let i = 1; i < face.vertices.length - 1; i++) {\n faceIndices.push(0, i, i + 1);\n }\n\n faceGeometry.setAttribute('position', new THREE.Float32BufferAttribute(facePositions, 3));\n faceGeometry.setIndex(faceIndices);\n faceGeometry.computeVertexNormals();\n\n const faceMaterial = new THREE.MeshLambertMaterial({\n color: appState.rendering.color,\n transparent: true,\n opacity: appState.rendering.opacity * 0.5,\n side: THREE.DoubleSide,\n wireframe: appState.rendering.wireframe\n });\n\n const faceMesh = new THREE.Mesh(faceGeometry, faceMaterial);\n group.add(faceMesh);\n }\n });\n }\n }, [appState.rendering]);\n\n // Create cross-section visualization\n const createCrossSectionVisualization = useCallback((points: Vector3D[]) => {\n if (!geometryGroupRef.current || points.length === 0) return;\n\n const group = geometryGroupRef.current;\n\n // Create cross-section points\n const crossSectionGeometry = new THREE.SphereGeometry(0.03, 6, 4);\n const crossSectionMaterial = new THREE.MeshBasicMaterial({\n color: '#ff4444',\n transparent: true,\n opacity: 0.8\n });\n\n points.forEach(point => {\n const pointMesh = new THREE.Mesh(crossSectionGeometry, crossSectionMaterial);\n pointMesh.position.set(point.x, point.y, point.z);\n group.add(pointMesh);\n });\n\n // Connect cross-section points with lines\n if (points.length > 1) {\n const lineGeometry = new THREE.BufferGeometry();\n const linePositions: number[] = [];\n\n for (let i = 0; i < points.length; i++) {\n const current = points[i];\n const next = points[(i + 1) % points.length];\n \n linePositions.push(current.x, current.y, current.z);\n linePositions.push(next.x, next.y, next.z);\n }\n\n lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));\n \n const lineMaterial = new THREE.LineBasicMaterial({\n color: '#ff4444',\n transparent: true,\n opacity: 0.8\n });\n\n const lines = new THREE.LineSegments(lineGeometry, lineMaterial);\n group.add(lines);\n }\n }, []);\n\n // Animation loop\n const animate = useCallback(() => {\n if (!rendererRef.current || !sceneRef.current || !cameraRef.current) return;\n\n rendererRef.current.render(sceneRef.current, cameraRef.current);\n animationFrameRef.current = requestAnimationFrame(animate);\n }, []);\n\n // Initialize scene on mount\n useEffect(() => {\n const cleanup = initializeScene();\n \n if (cleanup) {\n return cleanup;\n }\n }, [initializeScene]);\n\n // Update geometry when app state changes\n useEffect(() => {\n updateGeometry();\n }, [updateGeometry]);\n\n // Start animation loop\n useEffect(() => {\n animate();\n \n return () => {\n if (animationFrameRef.current) {\n cancelAnimationFrame(animationFrameRef.current);\n }\n };\n }, [animate]);\n\n // Update camera when FOV changes\n useEffect(() => {\n if (cameraRef.current) {\n cameraRef.current.fov = appState.camera.fov;\n cameraRef.current.updateProjectionMatrix();\n }\n }, [appState.camera.fov]);\n\n return null; // This component renders directly to the DOM via Three.js\n}",[],[150,283,275],"components","5a705c80-59a3-11f0-be3f-f69ea79377d9","CrossSection.tsx","5a705d48-59a3-11f0-be3f-f69ea79377d9",16,["D",1751721858026],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport * as THREE from 'https://esm.sh/three@0.158.0';\nimport { Vector3D, Vector4D, CrossSectionSettings } from '../../shared/types.ts';\nimport { Geometry4D } from '../../shared/math/geometry4d.ts';\n\ninterface CrossSectionProps {\n settings: CrossSectionSettings;\n onSettingsChange: (settings: CrossSectionSettings) => void;\n shape4D?: any;\n}\n\nexport function CrossSection({ settings, onSettingsChange, shape4D }: CrossSectionProps) {\n const canvasRef = useRef(null);\n const sceneRef = useRef();\n const rendererRef = useRef();\n const cameraRef = useRef();\n const [crossSectionPoints, setCrossSectionPoints] = useState([]);\n\n // Initialize 2D visualization canvas\n useEffect(() => {\n if (!canvasRef.current) return;\n\n const scene = new THREE.Scene();\n scene.background = new THREE.Color(0x1a1a2e);\n sceneRef.current = scene;\n\n const camera = new THREE.OrthographicCamera(-2, 2, 2, -2, 0.1, 1000);\n camera.position.z = 5;\n cameraRef.current = camera;\n\n const renderer = new THREE.WebGLRenderer({ \n canvas: canvasRef.current,\n antialias: true \n });\n renderer.setSize(300, 300);\n renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));\n rendererRef.current = renderer;\n\n return () => {\n renderer.dispose();\n };\n }, []);\n\n // Update cross-section when settings change\n useEffect(() => {\n if (!settings.enabled || !shape4D) {\n setCrossSectionPoints([]);\n return;\n }\n\n try {\n const points = Geometry4D.calculateCrossSection(shape4D, settings.position);\n setCrossSectionPoints(points);\n updateVisualization(points);\n } catch (error) {\n console.error('Error calculating cross-section:', error);\n }\n }, [settings, shape4D]);\n\n const updateVisualization = (points: Vector3D[]) => {\n if (!sceneRef.current || !rendererRef.current || !cameraRef.current) return;\n\n // Clear existing objects\n while (sceneRef.current.children.length > 0) {\n const child = sceneRef.current.children[0];\n sceneRef.current.remove(child);\n if (child instanceof THREE.Mesh) {\n child.geometry.dispose();\n if (Array.isArray(child.material)) {\n child.material.forEach(mat => mat.dispose());\n } else {\n child.material.dispose();\n }\n }\n }\n\n if (points.length === 0) {\n rendererRef.current.render(sceneRef.current, cameraRef.current);\n return;\n }\n\n // Create points\n const pointGeometry = new THREE.SphereGeometry(0.05, 8, 6);\n const pointMaterial = new THREE.MeshBasicMaterial({ color: 0xff4444 });\n\n points.forEach(point => {\n const pointMesh = new THREE.Mesh(pointGeometry, pointMaterial);\n pointMesh.position.set(point.x, point.y, point.z);\n sceneRef.current!.add(pointMesh);\n });\n\n // Connect points with lines if there are enough\n if (points.length > 1) {\n const lineGeometry = new THREE.BufferGeometry();\n const linePositions: number[] = [];\n\n for (let i = 0; i < points.length; i++) {\n const current = points[i];\n const next = points[(i + 1) % points.length];\n \n linePositions.push(current.x, current.y, current.z);\n linePositions.push(next.x, next.y, next.z);\n }\n\n lineGeometry.setAttribute('position', new THREE.Float32BufferAttribute(linePositions, 3));\n \n const lineMaterial = new THREE.LineBasicMaterial({ color: 0xff4444 });\n const lines = new THREE.LineSegments(lineGeometry, lineMaterial);\n sceneRef.current.add(lines);\n }\n\n // Add grid\n const gridHelper = new THREE.GridHelper(4, 10, 0x444444, 0x222222);\n gridHelper.rotateX(Math.PI / 2);\n sceneRef.current.add(gridHelper);\n\n rendererRef.current.render(sceneRef.current, cameraRef.current);\n };\n\n const handleToggle = () => {\n onSettingsChange({\n ...settings,\n enabled: !settings.enabled\n });\n };\n\n const handlePositionChange = (position: number) => {\n onSettingsChange({\n ...settings,\n position\n });\n };\n\n const handleDimensionChange = (dimension: number) => {\n onSettingsChange({\n ...settings,\n dimension\n });\n };\n\n const handleNormalChange = (axis: 'x' | 'y' | 'z' | 'w', value: number) => {\n const newNormal = { ...settings.normal } as Vector4D;\n newNormal[axis] = value;\n \n onSettingsChange({\n ...settings,\n normal: newNormal\n });\n };\n\n return (\n

Cross Section Analysis

\n \n

\n\n {settings.enabled && (\n

\n \n Hyperplane Position (W = {settings.position.toFixed(2)})\n \n

\n handlePositionChange(parseFloat(e.target.value))}\n />\n {settings.position.toFixed(1)}\n

\n\n

\n Hyperplane Normal Vector\n

\n {(['x', 'y', 'z', 'w'] as const).map(axis => (\n

\n {axis.toUpperCase()}\n handleNormalChange(axis, parseFloat(e.target.value))}\n />\n

\n ))}\n

\n\n

\n Cross-Section Visualization\n

\n\n

\n Analysis Tools\n

\n \n \n \n

\n\n

Understanding Cross-Sections

\n A cross-section of a 4D object is created by intersecting it with a 3D hyperplane. \n This is analogous to how a 2D slice reveals the interior of a 3D object.\n

Position: Where the hyperplane cuts through the 4D space
Normal Vector: The direction perpendicular to the hyperplane
Result: A 3D shape that shows the \"interior\" of the 4D object

\n )}\n\n \n

\n );\n}",[],[150,283,285],"348425d8-59a3-11f0-9c69-f69ea79377d9","ControlPanel.tsx","348426aa-59a3-11f0-9c69-f69ea79377d9",15,["D",1751721794404],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from 'https://esm.sh/react@18.2.0?deps=react@18.2.0';\nimport { AppState, ShapeType } from '../../shared/types.ts';\n\ninterface ControlPanelProps {\n appState: AppState;\n onStateChange: (newState: Partial) => void;\n}\n\nexport function ControlPanel({ appState, onStateChange }: ControlPanelProps) {\n const [isCollapsed, setIsCollapsed] = useState(false);\n const [activeTab, setActiveTab] = useState('shape');\n\n const handleDimensionChange = (dimension: 4 | 5) => {\n const defaultShape = dimension === 4 ? 'tesseract' : 'penteract';\n onStateChange({\n dimension,\n currentShape: defaultShape\n });\n };\n\n const handleShapeChange = (shape: ShapeType) => {\n onStateChange({ currentShape: shape });\n };\n\n const handleTransformationChange = (type: string, value: number) => {\n const newTransformations = { ...appState.transformations };\n \n if (type === 'scale') {\n newTransformations.scale = value;\n } else if (type.startsWith('rotation')) {\n const plane = type.replace('rotation', '').toLowerCase();\n newTransformations.rotation4D = {\n ...newTransformations.rotation4D,\n [plane]: value * Math.PI / 180\n };\n }\n \n onStateChange({ transformations: newTransformations });\n };\n\n const handleRenderingChange = (property: string, value: any) => {\n onStateChange({\n rendering: {\n ...appState.rendering,\n [property]: value\n }\n });\n };\n\n const resetTransformations = () => {\n onStateChange({\n transformations: {\n rotation4D: {\n xy: 0, xz: 0, xw: 0,\n yz: 0, yw: 0, zw: 0\n },\n scale: 1,\n translation: { x: 0, y: 0, z: 0, w: 0 }\n }\n });\n };\n\n const shapes4D = [\n { id: 'tesseract', name: 'Tesseract', icon: '🔲' },\n { id: '16-cell', name: '16-Cell', icon: '💎' },\n { id: '600-cell', name: '600-Cell', icon: '🌟' },\n { id: '120-cell', name: '120-Cell', icon: '🔮' }\n ];\n\n const shapes5D = [\n { id: 'penteract', name: 'Penteract', icon: '🔳' },\n { id: '5-simplex', name: '5-Simplex', icon: '🔺' },\n { id: '5-orthoplex', name: '5-Orthoplex', icon: '💠' },\n { id: 'custom', name: 'Custom', icon: '⚙️' }\n ];\n\n const currentShapes = appState.dimension === 4 ? shapes4D : shapes5D;\n\n return (\n

Controls

\n \n

\n\n {!isCollapsed && (\n <>\n

\n \n \n \n

\n\n {activeTab === 'shape' && (\n

\n Dimension\n

\n handleDimensionChange(4)}\n >\n 4D\n \n handleDimensionChange(5)}\n >\n 5D\n \n

\n\n

\n Shape Type\n

\n {currentShapes.map(shape => (\n handleShapeChange(shape.id as ShapeType)}\n title={shape.name}\n >\n {shape.icon}\n {shape.name}\n \n ))}\n

\n )}\n\n {activeTab === 'transform' && (\n

\n Scale\n

\n handleTransformationChange('scale', parseFloat(e.target.value))}\n />\n {appState.transformations.scale.toFixed(1)}\n

\n\n

\n 4D Rotations\n

\n {Object.entries(appState.transformations.rotation4D).map(([plane, angle]) => (\n

\n {plane.toUpperCase()}\n

\n handleTransformationChange(`rotation${plane}`, parseInt(e.target.value))}\n />\n {Math.round(angle * 180 / Math.PI)}°\n

\n ))}\n

\n\n

\n \n

\n )}\n\n {activeTab === 'render' && (\n

\n Display Options\n

\n \n handleRenderingChange('showVertices', e.target.checked)}\n />\n \n Show Vertices\n \n \n handleRenderingChange('showEdges', e.target.checked)}\n />\n \n Show Edges\n \n \n handleRenderingChange('showFaces', e.target.checked)}\n />\n \n Show Faces\n \n \n handleRenderingChange('wireframe', e.target.checked)}\n />\n \n Wireframe Mode\n \n

\n\n

\n Opacity\n

\n handleRenderingChange('opacity', parseFloat(e.target.value))}\n />\n {appState.rendering.opacity.toFixed(1)}\n

\n\n

\n Colors\n

\n Shape Color\n handleRenderingChange('color', e.target.value)}\n />\n

\n Edge Color\n handleRenderingChange('edgeColor', e.target.value)}\n />\n

\n Vertex Color\n handleRenderingChange('vertexColor', e.target.value)}\n />\n

\n )}\n \n )}\n\n \n

\n );\n}",[],[150,283,293],"814703a4-59a3-11f0-bf51-f69ea79377d9",["D",1751721923172],[],[150,283,33],"b3d3bf3e-59a2-11f0-b3dd-f69ea79377d9",11,["D",1751721578497],[175,176,177,178],[150,283],["D",1751721432562],[174,179,180,181],[150],"fffc566e-59a2-11f0-b3e1-f69ea79377d9","index.ts",14,["D",1751721706266],"http","import { Hono } from \"https://esm.sh/hono@3.11.7\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\";\n\nconst app = new Hono();\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n throw err;\n});\n\n// Serve static files\napp.get(\"/frontend/*\", c => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", c => serveFile(c.req.path, import.meta.url));\n\n// Main application route\napp.get(\"/\", async c => {\n try {\n let html = await readFile(\"/frontend/index.html\", import.meta.url);\n \n // Inject initial data and configuration\n const initialData = {\n version: \"1.0.0\",\n features: {\n dimensions: [4, 5],\n shapes: {\n \"4d\": [\"tesseract\", \"16-cell\", \"600-cell\", \"120-cell\"],\n \"5d\": [\"penteract\", \"5-simplex\", \"5-orthoplex\", \"custom\"]\n },\n projections: [\"perspective\", \"orthogonal\", \"stereographic\", \"schlegel\"],\n maxVertices: 10000,\n maxFPS: 60\n },\n performance: {\n enableOptimizations: true,\n useWebGL2: true,\n enableShadows: true\n }\n };\n\n const dataScript = ``;\n\n html = html.replace(\"\", `${dataScript}`);\n \n return c.html(html);\n } catch (error) {\n console.error(\"Error serving main page:\", error);\n return c.html(`\n \n Error\n \n

Application Error

Failed to load the Higher Dimensional Geometry Visualizer.

Please try refreshing the page.

${error.message}

\n \n \n `, 500);\n }\n});\n\n// API endpoint for mathematical calculations\napp.post(\"/api/calculate\", async c => {\n try {\n const body = await c.req.json();\n const { operation, data } = body;\n\n switch (operation) {\n case \"project4dto3d\":\n // Handle 4D to 3D projection calculations\n return c.json({\n success: true,\n result: \"Projection calculation would be performed here\",\n data: data\n });\n \n case \"project5dto3d\":\n // Handle 5D to 3D projection calculations\n return c.json({\n success: true,\n result: \"5D projection calculation would be performed here\",\n data: data\n });\n \n case \"crosssection\":\n // Handle cross-section calculations\n return c.json({\n success: true,\n result: \"Cross-section calculation would be performed here\",\n data: data\n });\n \n default:\n return c.json({\n success: false,\n error: \"Unknown operation\"\n }, 400);\n }\n } catch (error) {\n console.error(\"API calculation error:\", error);\n return c.json({\n success: false,\n error: \"Calculation failed\",\n details: error.message\n }, 500);\n }\n});\n\n// API endpoint for shape data\napp.get(\"/api/shapes/:dimension/:shape\", async c => {\n try {\n const dimension = parseInt(c.req.param(\"dimension\"));\n const shape = c.req.param(\"shape\");\n\n if (![4, 5].includes(dimension)) {\n return c.json({\n success: false,\n error: \"Invalid dimension. Only 4D and 5D are supported.\"\n }, 400);\n }\n\n // Return shape metadata\n const shapeData = {\n 4: {\n tesseract: {\n name: \"Tesseract (4D Cube)\",\n vertices: 16,\n edges: 32,\n faces: 24,\n cells: 8,\n description: \"The tesseract is the 4-dimensional analog of a cube.\",\n complexity: \"low\"\n },\n \"16-cell\": {\n name: \"16-Cell (4D Cross-polytope)\",\n vertices: 8,\n edges: 24,\n faces: 32,\n cells: 16,\n description: \"The 16-cell is the 4D analog of an octahedron.\",\n complexity: \"medium\"\n },\n \"600-cell\": {\n name: \"600-Cell\",\n vertices: 120,\n edges: 720,\n faces: 1200,\n cells: 600,\n description: \"The 600-cell is one of the six regular convex 4-polytopes.\",\n complexity: \"high\"\n },\n \"120-cell\": {\n name: \"120-Cell\",\n vertices: 600,\n edges: 1200,\n faces: 720,\n cells: 120,\n description: \"The 120-cell is the largest of the six regular convex 4-polytopes.\",\n complexity: \"very high\"\n }\n },\n 5: {\n penteract: {\n name: \"Penteract (5D Cube)\",\n vertices: 32,\n edges: 80,\n faces: 80,\n cells: 40,\n hypercells: 10,\n description: \"The penteract is the 5-dimensional hypercube.\",\n complexity: \"medium\"\n },\n \"5-simplex\": {\n name: \"5-Simplex (5D Tetrahedron)\",\n vertices: 6,\n edges: 15,\n faces: 20,\n cells: 15,\n hypercells: 6,\n description: \"The 5-simplex is the simplest regular polytope in 5D space.\",\n complexity: \"low\"\n },\n \"5-orthoplex\": {\n name: \"5-Orthoplex (5D Cross-polytope)\",\n vertices: 10,\n edges: 40,\n faces: 80,\n cells: 80,\n hypercells: 32,\n description: \"The 5-orthoplex is the 5D analog of an octahedron.\",\n complexity: \"medium\"\n },\n custom: {\n name: \"Custom 5D Shape\",\n vertices: \"variable\",\n edges: \"variable\",\n faces: \"variable\",\n cells: \"variable\",\n hypercells: \"variable\",\n description: \"User-defined 5D geometric shape.\",\n complexity: \"variable\"\n }\n }\n };\n\n const data = shapeData[dimension as keyof typeof shapeData]?.[shape as keyof typeof shapeData[4]];\n \n if (!data) {\n return c.json({\n success: false,\n error: \"Shape not found\"\n }, 404);\n }\n\n return c.json({\n success: true,\n shape: data\n });\n } catch (error) {\n console.error(\"Shape data error:\", error);\n return c.json({\n success: false,\n error: \"Failed to retrieve shape data\"\n }, 500);\n }\n});\n\n// Performance monitoring endpoint\napp.get(\"/api/performance\", c => {\n return c.json({\n success: true,\n performance: {\n serverTime: Date.now(),\n memoryUsage: \"Not available in this environment\",\n uptime: \"Not available in this environment\",\n recommendations: [\n \"Enable hardware acceleration in your browser\",\n \"Close other tabs to free up memory\",\n \"Use a modern browser with WebGL 2.0 support\",\n \"Reduce the number of visible elements for better performance\"\n ]\n }\n });\n});\n\n// Health check endpoint\napp.get(\"/api/health\", c => {\n return c.json({\n status: \"healthy\",\n timestamp: new Date().toISOString(),\n version: \"1.0.0\",\n features: {\n \"4d-geometry\": true,\n \"5d-geometry\": true,\n \"real-time-rendering\": true,\n \"cross-sections\": true,\n \"multiple-projections\": true\n }\n });\n});\n\n// Error handling for 404s\napp.notFound(c => {\n return c.html(`\n \n \n 404 - Not Found\n \n \n \n

404 - Page Not Found

The requested resource could not be found.

\n Return to Geometry Visualizer\n

\n \n \n `, 404);\n});\n\n// This is the entry point for HTTP vals\nexport default app.fetch;",[],[156,313],["D",1751721700504],[172],[156],["D",1751721027052],{"_98":97,"_105":101},{"_98":97,"_99":-5,"_100":101,"_18":56,"_102":103,"_104":25},{"_13":87,"_32":88,"_44":43,"_89":45,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":-5,"_95":46,"_96":97},"ctx",{"_80":-5,"_125":360,"_361":362,"_363":364,"_365":25,"_366":25,"_367":25,"_368":60,"_369":-5,"_370":-7,"_371":-7,"_372":64,"_373":25,"_374":25,"_375":-5,"_376":25,"_377":25,"_378":25,"_379":-5},"ENV",{"_331":332,"_333":334,"_335":88,"_336":337,"_338":339,"_340":341,"_342":343,"_344":345,"_346":347,"_348":349,"_350":351,"_352":353,"_354":355,"_356":357,"_358":359},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v19