\n {currentUsername ? (\n // If a username is set, show the profile page\n

\n {\n e.preventDefault();\n setCurrentUsername(null);\n window.history.pushState({}, '', '/');\n }}\n >\n build.moi\n $\"logo\"$ \n \n

\n \n \n

\n ) : (\n // Otherwise, show the homepage\n \n )}\n

\n );\n}",[],[101,208,214],{"_106":222,"_96":223,"_161":224,"_163":209,"_164":144,"_165":103,"_166":120,"_108":225,"_102":32,"_168":217,"_170":226,"_171":22,"_172":-5,"_173":227,"_100":228},"14377564-22fd-11f0-8d29-569c3dd06744","HomePage.tsx","f626e89a-aa82-48f9-a0ff-571cc78ed113",["D",1745713080962],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface HomePageProps {\n onSubmit: (username: string) => void;\n isDarkMode: boolean;\n}\n\nexport function HomePage({ onSubmit, isDarkMode }: HomePageProps) {\n const [username, setUsername] = useState(\"\");\n const [error, setError] = useState(null);\n const [showHowItWorks, setShowHowItWorks] = useState(false);\n\n const handleSubmit = (e: React.FormEvent) => {\n e.preventDefault();\n \n // Basic validation\n if (!username.trim()) {\n setError(\"Please enter a Val Town username\");\n return;\n }\n \n // Clear any previous errors\n setError(null);\n \n // Call the onSubmit callback with the entered username\n onSubmit(username.trim());\n };\n\n // Choose the right colors based on dark/light mode\n const bgClass = isDarkMode ? 'bg-gray-900' : 'bg-white';\n const textClass = isDarkMode ? 'text-white' : 'text-gray-900';\n const secondaryTextClass = isDarkMode ? 'text-gray-300' : 'text-gray-600';\n const infoBoxBgClass = isDarkMode ? 'bg-gray-800' : 'bg-orange-50';\n const infoBoxBorderClass = isDarkMode ? 'border-gray-700' : 'border-orange-200';\n const infoBoxTextClass = isDarkMode ? 'text-orange-300' : 'text-orange-800';\n const buttonBgClass = isDarkMode ? 'bg-emerald-600 hover:bg-emerald-700' : 'bg-emerald-600 hover:bg-emerald-700';\n const inputBgClass = isDarkMode ? 'bg-gray-800 border-gray-700' : 'border-gray-300 bg-white';\n const inputTextClass = isDarkMode ? 'text-white' : 'text-gray-900';\n const userButtonBgClass = isDarkMode ? 'bg-gray-800 hover:bg-gray-700 border-gray-700' : 'border-gray-300 hover:bg-gray-50';\n const howItWorksBtnClass = isDarkMode ? 'text-orange-400 hover:text-orange-300' : 'text-orange-600 hover:text-orange-500';\n const cardBgClass = isDarkMode ? 'bg-gray-800' : 'bg-orange-50';\n const cardBorderClass = isDarkMode ? 'border-gray-700' : 'border-orange-200';\n\n return (\n

\n build.moi\n $\"logo\"$ \n

\n A new creative home\n

\n \n

\n \n {showHowItWorks && (\n

How build.moi works:

Create a Val Town project (soon to be val) with your content
All public vals appear automatically in the \"Code\" tab
Create a \"Post\" by adding a moi.md file with YAML frontmatter
Include properties like title, description, imageUrl, and url
Your posts will then appear in the \"Posts\" tab on your build.moi profile

\n{`---\ntitle: \"My Project\"\ndescription: \"Project description\"\nimageUrl: \"https://example.com/image.jpg\"\nurl: \"https://myapp.web.val.run\"\n---`}\n

\n )}\n

\n \n

Showcase your work

Create beautiful profile pages that showcase your Val Town projects in a clean, modern grid layout.

\n \n

Simple integration

Just add a moi.md file to your projects and they'll automatically appear in your build.moi profile.

\n \n \n \n

See Charlie's Profile

\n onSubmit('dcm31')}\n className={`py-2 px-5 border ${userButtonBgClass} rounded-md transition-colors`}\n >\n @dcm31\n \n

\n );\n}",[],[101,208,223],{"_106":230,"_96":231,"_161":232,"_163":209,"_164":144,"_165":103,"_166":22,"_108":233,"_102":32,"_168":217,"_170":234,"_171":22,"_172":-5,"_173":235,"_100":236},"14377fa0-22fd-11f0-8d29-569c3dd06744","NavSidebar.tsx","5b3be648-6900-4f57-a9e7-d7fb0af9c3aa",["D",1745713080962],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\n\ninterface Val {\n id: string;\n url: string;\n name: string;\n username: string;\n description: string | null;\n image_url: string | null;\n forked_branch_id: string | null;\n updated_at: string;\n matchCount: number;\n moiConfig?: any;\n hasMoiMd?: boolean;\n httpEndpoint?: string | null;\n}\n\ninterface NavSidebarProps {\n vals: Val[];\n currentIndex: number;\n onNavItemClick: (index: number, e: React.MouseEvent) => void;\n isTransitioning: boolean;\n isDarkMode: boolean;\n debugLog: (message: string) => void;\n}\n\nconst NavSidebar: React.FC = ({\n vals,\n currentIndex,\n onNavItemClick,\n isTransitioning,\n isDarkMode,\n debugLog\n}) => {\n const navSidebarRef = useRef(null);\n const navInnerRef = useRef(null);\n const isScrollingNavRef = useRef(false);\n const navWheelLockTimer = useRef(null);\n const itemRefs = useRef<{[key: number]: HTMLDivElement | null}>({});\n\n // Get image for nav sidebar\n const getNavImage = useCallback((val: Val) => {\n if (val.image_url) {\n return val.image_url;\n } else if (val.moiConfig?.imageUrl) {\n return val.moiConfig.imageUrl;\n }\n return null;\n }, []);\n \n // Generate color for vals without images\n const getValColor = useCallback((val: Val) => {\n // Simple hash function for generating a color\n let hash = 0;\n const str = val.name + val.username;\n for (let i = 0; i < str.length; i++) {\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n \n // Convert hash to RGB color\n let r = ((hash & 0xFF0000) >> 16);\n let g = ((hash & 0x00FF00) >> 8);\n let b = hash & 0x0000FF;\n \n // For dark mode, make colors more muted but visible\n if (isDarkMode) {\n r = Math.min(((r + 100) % 256), 180);\n g = Math.min(((g + 100) % 256), 180);\n b = Math.min(((b + 100) % 256), 180);\n return `rgba(${r}, ${g}, ${b}, 0.5)`;\n } else {\n r = Math.min(((r + 155) % 256), 180);\n g = Math.min(((g + 155) % 256), 180);\n b = Math.min(((b + 155) % 256), 180);\n return `rgba(${r}, ${g}, ${b}, 0.4)`;\n }\n }, [isDarkMode]);\n\n // Improved function to scroll nav sidebar to the current item\n const scrollNavToCurrentItem = useCallback(() => {\n if (!navInnerRef.current) return;\n\n // We'll use the stored ref to the current item\n const currentItemRef = itemRefs.current[currentIndex];\n if (!currentItemRef) return;\n\n debugLog(`Scrolling nav sidebar to index ${currentIndex}`);\n isScrollingNavRef.current = true;\n\n try {\n // Get container dimensions\n const containerHeight = navInnerRef.current.clientHeight;\n const itemHeight = currentItemRef.offsetHeight;\n \n // Use getBoundingClientRect() for more precise positioning\n const navRect = navInnerRef.current.getBoundingClientRect();\n const itemRect = currentItemRef.getBoundingClientRect();\n \n // Calculate relative position\n const relativeTop = itemRect.top - navRect.top + navInnerRef.current.scrollTop;\n \n // Calculate target scroll position to center the item\n const targetScrollTop = relativeTop - (containerHeight / 2) + (itemHeight / 2);\n \n debugLog(`Nav scroll calculation: containerHeight=${containerHeight}, itemHeight=${itemHeight}, targetScroll=${targetScrollTop}`);\n \n // Use scrollTo with smooth behavior\n navInnerRef.current.scrollTo({\n top: targetScrollTop,\n behavior: 'smooth'\n });\n } catch (err) {\n debugLog(`Error in scrollNavToCurrentItem: ${err}`);\n \n // Fallback to simpler scrollIntoView if calculations fail\n currentItemRef.scrollIntoView({\n behavior: 'smooth',\n block: 'center'\n });\n }\n \n // Clear any previous timer and set a new one to release the scrolling lock\n if (navWheelLockTimer.current !== null) {\n clearTimeout(navWheelLockTimer.current);\n }\n \n navWheelLockTimer.current = setTimeout(() => {\n isScrollingNavRef.current = false;\n navWheelLockTimer.current = null;\n }, 600) as unknown as number;\n }, [currentIndex, debugLog]);\n\n // Handle wheel events in the nav sidebar for navigation\n const handleNavWheel = useCallback((e: WheelEvent) => {\n // Don't process if we're already in a scroll animation\n if (isScrollingNavRef.current || isTransitioning) {\n e.preventDefault();\n return;\n }\n \n if (Math.abs(e.deltaY) > 20) {\n e.preventDefault();\n e.stopPropagation();\n \n // Determine direction\n const direction = e.deltaY > 0 ? 1 : -1;\n const targetIndex = Math.max(0, Math.min(vals.length - 1, currentIndex + direction));\n \n // Only proceed if different\n if (targetIndex !== currentIndex) {\n debugLog(`Nav wheel scroll: deltaY=${e.deltaY}, changing to index ${targetIndex}`);\n \n // Lock wheel\n isScrollingNavRef.current = true;\n \n // Trigger the click handler with a simulated event\n const simulatedEvent = {\n preventDefault: () => {},\n stopPropagation: () => {}\n } as React.MouseEvent;\n \n onNavItemClick(targetIndex, simulatedEvent);\n \n // Reset after animation completes\n setTimeout(() => {\n isScrollingNavRef.current = false;\n }, 600);\n }\n }\n }, [currentIndex, isTransitioning, debugLog, vals.length, onNavItemClick]);\n\n // Update nav scroll position whenever currentIndex changes\n useEffect(() => {\n // Make sure we run the scroll after the DOM has updated\n requestAnimationFrame(() => {\n requestAnimationFrame(() => {\n scrollNavToCurrentItem();\n });\n });\n }, [currentIndex, scrollNavToCurrentItem]);\n\n // Set up wheel handler for nav\n useEffect(() => {\n const navElement = navSidebarRef.current;\n if (!navElement) return;\n \n // Add wheel event listener for navigation\n navElement.addEventListener('wheel', handleNavWheel, { passive: false });\n \n return () => {\n navElement.removeEventListener('wheel', handleNavWheel);\n \n // Clear any timers\n if (navWheelLockTimer.current !== null) {\n clearTimeout(navWheelLockTimer.current);\n }\n };\n }, [handleNavWheel]);\n\n // Add padding items at top and bottom for better snap scrolling\n const paddingItems = () => {\n return (\n

\n );\n };\n\n return (\n

\n {/* Top padding for better snap scrolling */}\n {paddingItems()}\n \n {vals.map((val, index) => {\n const image = getNavImage(val);\n const backgroundColor = getValColor(val);\n const isActive = index === currentIndex;\n const isPrev = index === currentIndex - 1;\n const isNext = index === currentIndex + 1;\n \n return (\n

itemRefs.current[index] = el}\n data-index={index}\n className={`nav-item ${isActive ? 'active' : ''} ${isPrev ? 'prev' : ''} ${isNext ? 'next' : ''}`}\n onClick={(e) => onNavItemClick(index, e)}\n >\n

\n {!image && (\n {val.name.substring(0, 2).toUpperCase()}\n )}\n

\n {/* Removed the name display as requested */}\n

\n );\n })}\n \n {/* Bottom padding for better snap scrolling */}\n {paddingItems()}\n

\n );\n};\n\nexport default NavSidebar;",[],[101,208,231],{"_106":238,"_96":239,"_161":240,"_163":209,"_164":144,"_165":103,"_166":22,"_108":241,"_102":32,"_168":217,"_170":242,"_171":22,"_172":-5,"_173":243,"_100":244},"143788b0-22fd-11f0-8d29-569c3dd06744","SwipeViewer.tsx","8a1a1508-a259-4dfe-8dcf-876fc4cbd909",["D",1745713080962],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { setupViewportHeight } from \"../utils/viewport.ts\";\nimport NavSidebar from \"./NavSidebar.tsx\";\nimport { forceTopPosition, fixPositioning, restorePositioning } from \"../utils/PositioningUtils.ts\";\n\ninterface Val {\n id: string;\n url: string;\n name: string;\n username: string;\n description: string | null;\n image_url: string | null;\n forked_branch_id: string | null;\n updated_at: string;\n matchCount: number;\n moiConfig?: any;\n hasMoiMd?: boolean;\n httpEndpoint?: string | null;\n}\n\ninterface SwipeViewerProps {\n vals: Val[];\n initialIndex?: number;\n onClose: () => void;\n isDarkMode: boolean;\n}\n\nexport function SwipeViewer({ vals, initialIndex = 0, onClose, isDarkMode }: SwipeViewerProps) {\n const [currentIndex, setCurrentIndex] = useState(initialIndex);\n const [isTransitioning, setIsTransitioning] = useState(false);\n const [isInteractMode, setIsInteractMode] = useState(false);\n const [loading, setLoading] = useState>({});\n const [debugInfo, setDebugInfo] = useState(\"\");\n const [showDebugOverlay, setShowDebugOverlay] = useState(false);\n const [hasNavSidebar, setHasNavSidebar] = useState(false);\n const [initialLoadComplete, setInitialLoadComplete] = useState(false);\n \n // Refs for DOM elements\n const contentContainerRef = useRef(null);\n const touchStartRef = useRef({ x: 0, y: 0, time: 0 });\n const touchMoveRef = useRef({ x: 0, y: 0 });\n const touchActiveRef = useRef(false);\n const preventScrollRef = useRef(false);\n \n // Page load timing stats\n const pageLoadTimeRef = useRef(Date.now());\n const didFirstRenderRef = useRef(false);\n const positioningAttemptsRef = useRef(0);\n const initialRenderTimeRef = useRef(null);\n \n // Track loaded vals for lazy loading\n const loadedValsRef = useRef>(new Set());\n const [visibleRange, setVisibleRange] = useState([Math.max(0, currentIndex - 1), Math.min(vals.length - 1, currentIndex + 1)]);\n\n // Add console logs for debugging\n const debugLog = useCallback((message: string) => {\n console.log(`[SwipeViewer DEBUG] ${message}`);\n setDebugInfo(prev => `${message}\\n${prev}`.slice(0, 500)); // Keep last 500 chars\n }, []);\n\n // Using a ref to track if component is mounted\n const isMountedRef = useRef(false);\n \n // Detect if we should show the sidebar based on screen width\n const checkForSidebar = useCallback(() => {\n if (typeof window !== \"undefined\") {\n const shouldShowSidebar = window.innerWidth >= 768;\n setHasNavSidebar(shouldShowSidebar);\n return shouldShowSidebar;\n }\n return false;\n }, []);\n\n // Effect for initial setup - very aggressive positioning\n useEffect(() => {\n debugLog(`Component mounted at ${new Date().toISOString()}`);\n isMountedRef.current = true;\n pageLoadTimeRef.current = Date.now();\n \n // Initial setup for viewport\n const cleanup = setupViewportHeight();\n \n // Create a more aggressive positioning function that combines all techniques\n const superAggressivePositioning = () => {\n // Ensure we have a clean slate first\n document.documentElement.style.overflow = 'hidden';\n document.body.style.overflow = 'hidden';\n document.body.style.position = 'fixed';\n document.body.style.top = '0';\n document.body.style.left = '0';\n document.body.style.width = '100%';\n document.body.style.height = '100%';\n \n // Force scroll position using all known methods\n window.scrollTo(0, 0);\n window.scrollTo({top: 0, left: 0, behavior: 'auto'});\n document.documentElement.scrollTop = 0;\n document.body.scrollTop = 0;\n \n if (typeof window.scrollTo === 'function') {\n try {\n // Try more aggressive scroll settings\n window.scrollTo({\n top: 0,\n left: 0,\n behavior: 'instant' // More immediate than 'auto'\n });\n } catch (e) {\n // Fallback if 'instant' isn't supported\n window.scrollTo(0, 0);\n }\n }\n \n // Set viewport height\n const vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty(\"--vh\", `${vh}px`);\n \n // Log current state\n debugLog(`Super aggressive positioning - Window: ${window.innerWidth}x${window.innerHeight}, Scroll: ${window.scrollX},${window.scrollY}`);\n \n // Run a standard positioning attempt for tracking\n fixPositioning(true, positioningAttemptsRef, pageLoadTimeRef, checkForSidebar, debugLog);\n };\n \n // CRITICAL: Immediately fix position before any rendering can complete\n superAggressivePositioning();\n forceTopPosition(debugLog);\n \n // Also fix position when document is fully loaded\n if (document.readyState === 'complete') {\n superAggressivePositioning();\n } else {\n window.addEventListener('load', superAggressivePositioning);\n }\n \n // Add scroll event listener to catch any unexpected scrolling\n const handleScroll = () => {\n if (window.scrollY !== 0) {\n debugLog(`⚠️ Unexpected scroll detected: ${window.scrollY}, forcing correction`);\n superAggressivePositioning();\n }\n };\n window.addEventListener('scroll', handleScroll, { passive: true });\n \n // Set up event listeners for orientation changes and resize\n window.addEventListener('resize', superAggressivePositioning);\n \n window.addEventListener('orientationchange', () => {\n // Multiple aggressive fixes after orientation change\n superAggressivePositioning();\n setTimeout(superAggressivePositioning, 100);\n setTimeout(superAggressivePositioning, 300);\n setTimeout(superAggressivePositioning, 500);\n });\n \n // Press Alt+D key to toggle debug overlay\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'd' && e.altKey) {\n e.preventDefault();\n setShowDebugOverlay(prev => !prev);\n }\n };\n window.addEventListener('keydown', handleKeyDown);\n \n // Run multiple position fixes on a delay for maximum reliability\n const timeouts = [];\n timeouts.push(setTimeout(() => {\n if (isMountedRef.current) {\n superAggressivePositioning();\n didFirstRenderRef.current = true;\n debugLog(\"First render complete\");\n \n // Flag initial load as complete\n setInitialLoadComplete(true);\n }\n }, 50));\n \n timeouts.push(setTimeout(() => {\n if (isMountedRef.current) {\n superAggressivePositioning();\n debugLog(\"200ms positioning check\");\n }\n }, 200));\n \n timeouts.push(setTimeout(() => {\n if (isMountedRef.current) {\n superAggressivePositioning();\n debugLog(\"500ms positioning check\");\n }\n }, 500));\n \n timeouts.push(setTimeout(() => {\n if (isMountedRef.current) {\n superAggressivePositioning();\n debugLog(\"1000ms positioning check\");\n }\n }, 1000));\n \n // Mutation observer to detect DOM changes that might affect position\n const observer = new MutationObserver(() => {\n if (isMountedRef.current) {\n superAggressivePositioning();\n }\n });\n \n observer.observe(document.body, { \n childList: true, \n subtree: true,\n attributes: true,\n attributeFilter: ['style', 'class']\n });\n \n // Cleanup function\n return () => {\n cleanup();\n isMountedRef.current = false;\n \n window.removeEventListener('resize', superAggressivePositioning);\n window.removeEventListener('orientationchange', superAggressivePositioning);\n window.removeEventListener('keydown', handleKeyDown);\n window.removeEventListener('load', superAggressivePositioning);\n window.removeEventListener('scroll', handleScroll);\n \n // Clear all timeouts\n timeouts.forEach(id => clearTimeout(id));\n \n observer.disconnect();\n \n // Restore body styling when component unmounts\n restorePositioning();\n \n debugLog(\"Component unmounted\");\n };\n }, [debugLog, checkForSidebar]);\n\n // Update visible range whenever currentIndex changes\n useEffect(() => {\n const newVisibleRange = [\n Math.max(0, currentIndex - 1),\n Math.min(vals.length - 1, currentIndex + 1)\n ];\n setVisibleRange(newVisibleRange);\n \n // Mark current and adjacent vals as loaded\n for (let i = newVisibleRange[0]; i <= newVisibleRange[1]; i++) {\n loadedValsRef.current.add(vals[i].id);\n }\n \n debugLog(`Current index changed to ${currentIndex}, visible range: [${newVisibleRange[0]}, ${newVisibleRange[1]}]`);\n \n // Re-fix positioning when changing pages - this is CRITICAL for reliability\n forceTopPosition(debugLog);\n fixPositioning(true, positioningAttemptsRef, pageLoadTimeRef, checkForSidebar, debugLog);\n \n }, [currentIndex, vals, debugLog, checkForSidebar]);\n\n // Handle iframe loading state\n const handleIframeLoad = useCallback((valId: string) => {\n debugLog(`Iframe loaded: ${valId}`);\n setLoading(prev => ({ ...prev, [valId]: false }));\n \n // Fix positioning after iframe load\n fixPositioning(true, positioningAttemptsRef, pageLoadTimeRef, checkForSidebar, debugLog);\n }, [debugLog, checkForSidebar]);\n\n const handleIframeError = useCallback((valId: string) => {\n debugLog(`Iframe error: ${valId}`);\n setLoading(prev => ({ ...prev, [valId]: false }));\n }, [debugLog]);\n\n // Bounce effect for reaching the end of content\n const bounceEffect = useCallback((direction) => {\n if (contentContainerRef.current) {\n contentContainerRef.current.style.transition = \"transform 0.3s cubic-bezier(.25,.75,.5,1.25)\";\n contentContainerRef.current.style.transform = `translateY(${direction * -20}px)`;\n setTimeout(() => {\n if (contentContainerRef.current) {\n contentContainerRef.current.style.transition = \"transform 0.2s cubic-bezier(.25,.75,.5,1.25)\";\n contentContainerRef.current.style.transform = \"translateY(0)\";\n }\n }, 250);\n }\n }, []);\n\n // Change index - Keeps interact mode when using sidebar\n const changeIndex = useCallback((direction) => {\n // Allow navigation with sidebar even in interact mode\n if (!hasNavSidebar && isInteractMode) return;\n if (isTransitioning) return;\n \n const newIndex = Math.max(0, Math.min(currentIndex + direction, vals.length - 1));\n \n if (newIndex !== currentIndex) {\n debugLog(`Changing index from ${currentIndex} to ${newIndex}`);\n setIsTransitioning(true);\n \n // Extra aggressive positioning approach when changing index\n // First, force top position and set position:fixed\n forceTopPosition(debugLog);\n \n // Double check window is at top\n if (typeof window !== \"undefined\" && window.scrollY !== 0) {\n window.scrollTo(0, 0);\n document.documentElement.scrollTop = 0;\n document.body.scrollTop = 0;\n debugLog(`Extra scroll correction applied: ${window.scrollY}→0`);\n }\n \n // Force body content to be completely at top\n const resetBodyPosition = () => {\n document.body.style.position = 'fixed';\n document.body.style.width = '100%';\n document.body.style.height = '100%';\n document.body.style.top = '0';\n document.body.style.left = '0';\n };\n \n resetBodyPosition();\n \n // Set the new index\n setCurrentIndex(newIndex);\n \n // Force multiple position fixings during transition\n const positionInterval = setInterval(() => {\n resetBodyPosition();\n window.scrollTo(0, 0);\n }, 50);\n \n // Allow time for transition\n setTimeout(() => {\n clearInterval(positionInterval);\n setIsTransitioning(false);\n forceTopPosition(debugLog); // One final forced positioning\n fixPositioning(true, positioningAttemptsRef, pageLoadTimeRef, checkForSidebar, debugLog);\n }, 600);\n } else {\n if ((direction > 0 && currentIndex === vals.length - 1) || \n (direction < 0 && currentIndex === 0)) { \n debugLog(`Bouncing at ${currentIndex === 0 ? 'start' : 'end'} with direction ${direction}`);\n bounceEffect(direction > 0 ? 1 : -1); \n }\n }\n }, [currentIndex, isTransitioning, vals.length, bounceEffect, isInteractMode, hasNavSidebar, debugLog, checkForSidebar]);\n\n // Wheel handler for the content area\n useEffect(() => {\n const container = contentContainerRef.current;\n if (!container) return;\n \n const handleWheel = (e: WheelEvent) => {\n // Allow scrolling when in interact mode without sidebar\n if (!hasNavSidebar && isInteractMode) return;\n if (isTransitioning) {\n e.preventDefault();\n return;\n }\n \n // Prevent default to avoid browser scrolling\n e.preventDefault();\n \n if (Math.abs(e.deltaY) > 30) { \n debugLog(`Wheel event: deltaY=${e.deltaY}`);\n changeIndex(e.deltaY > 0 ? 1 : -1); \n }\n };\n \n container.addEventListener(\"wheel\", handleWheel, { passive: false });\n return () => container.removeEventListener(\"wheel\", handleWheel);\n }, [isInteractMode, isTransitioning, changeIndex, hasNavSidebar, debugLog]);\n\n // Touch handlers\n const handleTouchStart = useCallback((e: React.TouchEvent) => {\n // Only handle touch in non-interact mode or with sidebar\n if (!hasNavSidebar && isInteractMode) return;\n \n touchStartRef.current = { \n x: e.touches[0].clientX, \n y: e.touches[0].clientY, \n time: Date.now() \n };\n touchMoveRef.current = { ...touchStartRef.current };\n touchActiveRef.current = true;\n \n debugLog(`Touch start: x=${touchStartRef.current.x}, y=${touchStartRef.current.y}`);\n \n if (contentContainerRef.current) { \n contentContainerRef.current.style.transition = \"none\"; \n }\n }, [isInteractMode, hasNavSidebar, debugLog]);\n\n const handleTouchMove = useCallback((e: React.TouchEvent) => {\n if ((!hasNavSidebar && isInteractMode) || !touchActiveRef.current) return;\n \n touchMoveRef.current = { \n x: e.touches[0].clientX, \n y: e.touches[0].clientY \n };\n \n const deltaY = touchMoveRef.current.y - touchStartRef.current.y;\n \n if (contentContainerRef.current) {\n let resistance = 1;\n if ((currentIndex === 0 && deltaY > 0) || \n (currentIndex === vals.length - 1 && deltaY < 0)) {\n resistance = 3;\n }\n contentContainerRef.current.style.transform = `translateY(${deltaY / resistance}px)`;\n }\n }, [currentIndex, vals.length, isInteractMode, hasNavSidebar]);\n\n const handleTouchEnd = useCallback((e: React.TouchEvent) => {\n if ((!hasNavSidebar && isInteractMode) || !touchActiveRef.current) {\n touchActiveRef.current = false;\n return;\n }\n \n touchActiveRef.current = false;\n const endY = e.changedTouches[0].clientY;\n const deltaY = endY - touchStartRef.current.y;\n const deltaTime = Date.now() - touchStartRef.current.time;\n const velocity = deltaTime > 0 ? Math.abs(deltaY) / deltaTime : 0;\n \n debugLog(`Touch end: deltaY=${deltaY}, velocity=${velocity.toFixed(2)}`);\n \n if (contentContainerRef.current) {\n contentContainerRef.current.style.transition = \"transform 0.3s ease-out\";\n contentContainerRef.current.style.transform = \"translateY(0)\";\n }\n \n const viewportHeight = typeof window !== \"undefined\" ? window.innerHeight : 600;\n if (Math.abs(deltaY) > (viewportHeight * 0.15) || velocity > 0.3) { \n changeIndex(deltaY > 0 ? -1 : 1); \n }\n }, [changeIndex, isInteractMode, hasNavSidebar, debugLog]);\n\n // Toggle interact mode\n const toggleInteractMode = useCallback((e: React.MouseEvent) => {\n e.stopPropagation();\n \n // If we have sidebar, always stay in interact mode\n if (hasNavSidebar) return;\n \n setIsInteractMode(prev => {\n debugLog(`Toggle interact mode: ${prev ? 'swipe' : 'interactive'}`);\n return !prev;\n });\n }, [hasNavSidebar, debugLog]);\n\n // Function to get appropriate URL for a val\n const getValUrl = useCallback((val: Val) => {\n // Priority order:\n // 1. Use explicit url from moiConfig if available\n if (val.moiConfig?.url) {\n return val.moiConfig.url;\n }\n // 2. Use httpEndpoint if available\n else if (val.httpEndpoint) {\n return val.httpEndpoint;\n }\n // 3. Fallback to code URL - not ideal for iframe, but better than nothing\n else {\n return val.url;\n }\n }, []);\n\n // Close the viewer\n const handleClose = useCallback((e: React.MouseEvent) => {\n e.stopPropagation();\n debugLog(\"Closing viewer\");\n \n // Restore scroll before closing\n restorePositioning();\n \n onClose();\n }, [onClose, debugLog]);\n \n // Handle nav item click - callback for NavSidebar component\n const handleNavItemClick = useCallback((index: number, e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n \n if (index !== currentIndex && !isTransitioning) {\n debugLog(`Nav item clicked: ${index}`);\n \n // Extra aggressive approach to prevent any position drift\n const resetPositioning = () => {\n // Force document to absolute top\n window.scrollTo(0, 0);\n document.documentElement.scrollTop = 0;\n document.body.scrollTop = 0;\n \n // Force fixed position\n document.body.style.position = 'fixed';\n document.body.style.width = '100%';\n document.body.style.height = '100%';\n document.body.style.top = '0';\n document.body.style.left = '0';\n \n forceTopPosition(debugLog);\n };\n \n // Apply positioning fixes\n resetPositioning();\n \n // Set transitioning state and change index\n setIsTransitioning(true);\n setCurrentIndex(index);\n \n // Multiple positioning fixes during transition\n const fixInterval = setInterval(resetPositioning, 50);\n \n // Reset transitioning state after animation completes\n setTimeout(() => {\n clearInterval(fixInterval);\n resetPositioning(); // Final positioning fix\n setIsTransitioning(false);\n fixPositioning(true, positioningAttemptsRef, pageLoadTimeRef, checkForSidebar, debugLog);\n }, 600);\n }\n }, [currentIndex, isTransitioning, debugLog, checkForSidebar]);\n\n // Safety check - don't render if no vals or empty array\n if (!vals || vals.length === 0) {\n return null;\n }\n\n // Get current val\n const currentVal = vals[currentIndex];\n \n // Determine if in interact mode\n // With sidebar, always in interact mode for content\n const effectiveInteractMode = hasNavSidebar || isInteractMode;\n\n return (\n

\n {/* Content Container */}\n \n {/* Pages container with page divider */}\n

\n {vals.map((val, index) => {\n // Only load iframes that are in visible range (current + adjacent)\n const isInRange = index >= visibleRange[0] && index <= visibleRange[1];\n const shouldRender = isInRange || loadedValsRef.current.has(val.id);\n const isActive = index === currentIndex;\n \n if (!shouldRender) return null;\n \n return (\n \n {/* Top divider line */}\n

\n \n

\n {/* Show loading state while iframe loads */}\n {loading[val.id] && (\n

\n )}\n \n handleIframeLoad(val.id)}\n onError={() => handleIframeError(val.id)}\n />\n \n {/* Overlay for the active iframe page */}\n {isActive && (\n <>\n {/* Overlay is only shown in swipe mode (not in interact mode) */}\n {!effectiveInteractMode && (\n

\n )}\n \n {/* Lock/unlock button (only visible without sidebar) */}\n {!hasNavSidebar && (\n \n {isInteractMode ? \"🔓\" : \"🔒\"}\n \n )}\n \n {/* Close button - always visible */}\n \n ✕\n \n \n )}\n

\n \n {/* Bottom divider line */}\n

\n );\n })}\n

\n \n {/* Pagination dots - only visible on mobile and without sidebar */}\n {!hasNavSidebar && (\n

\n {vals.map((val, index) => (\n {\n if (!isInteractMode && !isTransitioning && index !== currentIndex) {\n forceTopPosition(debugLog);\n setCurrentIndex(index);\n setIsTransitioning(true);\n setTimeout(() => {\n setIsTransitioning(false);\n fixPositioning(true, positioningAttemptsRef, pageLoadTimeRef, checkForSidebar, debugLog);\n }, 500);\n }\n }}\n />\n ))}\n

\n )}\n

\n \n {/* Navigation Sidebar - only visible on desktop */}\n {hasNavSidebar && (\n \n )}\n \n {/* Debug overlay - visible during development or when toggled with Alt+D */}\n {showDebugOverlay && (\n

\n              {`Current Index: ${currentIndex} of ${vals.length - 1}\nHas Nav Sidebar: ${hasNavSidebar}\nInteract Mode: ${isInteractMode}\nPositioning Attempts: ${positioningAttemptsRef.current}\nElapsed since load: ${Date.now() - pageLoadTimeRef.current}ms\n\nDebug Log:\n${debugInfo}`}\n

\n )}\n

\n \n );\n}\n\nexport default SwipeViewer;",[],[101,208,239],{"_106":246,"_96":247,"_161":248,"_163":209,"_164":144,"_165":103,"_166":120,"_108":249,"_102":32,"_168":217,"_170":250,"_171":22,"_172":-5,"_173":251,"_100":252},"1437b66e-22fd-11f0-8d29-569c3dd06744","UserProfile.tsx","65d5751f-cbf2-43be-ae1f-26e99dfc0687",["D",1745713080962],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport { ValGrid } from \"./ValGrid.tsx\";\n\ninterface UserProfileProps {\n username: string;\n}\n\ninterface Val {\n id: string;\n url: string;\n name: string;\n username: string;\n description: string | null;\n image_url: string | null;\n forked_branch_id: string | null;\n updated_at: string;\n matchCount: number;\n moiConfig?: any;\n hasMoiMd?: boolean;\n httpEndpoint?: string | null;\n}\n\ninterface UserValsResponse {\n valResults: Val[];\n totalValResults: number;\n page: number;\n pageSize: number;\n totalPages: number;\n executionTimeMs: number;\n}\n\ntype TabType = 'posts' | 'code';\n\nexport function UserProfile({ username }: UserProfileProps) {\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n const [profileData, setProfileData] = useState(null);\n const [allVals, setAllVals] = useState([]);\n const [loadingMore, setLoadingMore] = useState(false);\n const [profileImageError, setProfileImageError] = useState(false);\n const [activeTab, setActiveTab] = useState('posts');\n \n // Check for system dark mode preference\n const prefersDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;\n const [isDarkMode, setIsDarkMode] = useState(prefersDarkMode);\n \n // Listen for changes in color scheme preference\n useEffect(() => {\n const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\n const handleChange = (e: MediaQueryListEvent) => {\n setIsDarkMode(e.matches);\n };\n \n mediaQuery.addEventListener('change', handleChange);\n return () => mediaQuery.removeEventListener('change', handleChange);\n }, []);\n\n // Generate a deterministic background color based on username\n const getProfileColor = () => {\n // Simple hash function for generating a color\n let hash = 0;\n for (let i = 0; i < username.length; i++) {\n hash = username.charCodeAt(i) + ((hash << 5) - hash);\n }\n \n // Convert hash to RGB color, ensuring it's not too dark\n let r = ((hash & 0xFF0000) >> 16);\n let g = ((hash & 0x00FF00) >> 8);\n let b = (hash & 0x0000FF);\n \n // For dark mode, make colors more muted\n if (isDarkMode) {\n // Ensure colors are visible on dark background\n r = Math.min(((r + 120) % 256), 200);\n g = Math.min(((g + 120) % 256), 200);\n b = Math.min(((b + 120) % 256), 200);\n \n // Add transparency for a more muted look\n return `rgba(${r}, ${g}, ${b}, 0.65)`;\n } else {\n // For light mode, ensure colors are more muted\n r = Math.min(((r + 180) % 256), 200);\n g = Math.min(((g + 180) % 256), 200);\n b = Math.min(((b + 180) % 256), 200);\n \n // Add transparency for a more muted look\n return `rgba(${r}, ${g}, ${b}, 0.55)`;\n }\n };\n\n // Modified to fetch all vals for a user\n useEffect(() => {\n const fetchAllVals = async () => {\n setLoading(true);\n setError(null);\n setAllVals([]);\n \n try {\n // Fetch the first page to get total pages info\n const initialResponse = await fetch(`/api/profile/${username}?page=1`);\n \n if (!initialResponse.ok) {\n throw new Error(`Failed to fetch profile data: ${initialResponse.statusText}`);\n }\n \n const initialData = await initialResponse.json();\n setProfileData(initialData);\n \n // Add the first page results to our allVals array\n const results = [...initialData.valResults];\n \n // If there are more pages, fetch them all in parallel\n if (initialData.totalPages > 1) {\n setLoadingMore(true);\n \n const remainingPagePromises = [];\n for (let page = 2; page <= initialData.totalPages; page++) {\n remainingPagePromises.push(\n fetch(`/api/profile/${username}?page=${page}`)\n .then(res => res.json())\n .then(data => data.valResults)\n );\n }\n \n // Wait for all remaining page requests to complete\n const remainingPagesResults = await Promise.all(remainingPagePromises);\n \n // Flatten the results and add to our array\n for (const pageResults of remainingPagesResults) {\n results.push(...pageResults);\n }\n \n setLoadingMore(false);\n }\n \n setAllVals(results);\n console.log(`[DEBUG] Fetched a total of ${results.length} vals for user ${username}`);\n \n } catch (err) {\n console.error(\"Error fetching profile:\", err);\n setError(err instanceof Error ? err.message : \"Unknown error occurred\");\n } finally {\n setLoading(false);\n setLoadingMore(false);\n }\n };\n \n fetchAllVals();\n }, [username]);\n\n // Filter vals based on active tab\n const getFilteredVals = () => {\n if (!allVals || allVals.length === 0) return [];\n \n if (activeTab === 'posts') {\n // For posts tab, only show vals with moi.md\n return allVals.filter(val => val.hasMoiMd);\n } else {\n // For code tab, show all vals\n return allVals;\n }\n };\n\n if (loading) {\n return (\n

\n );\n }\n\n if (error) {\n return (\n

Error

{error}

\n \n

\n );\n }\n\n if (!profileData || !allVals || allVals.length === 0) {\n return (\n

No vals found

We couldn't find any vals for user @{username}.

\n \n

\n );\n }\n \n // Get filtered vals based on active tab\n const filteredVals = getFilteredVals();\n \n // Display a message if no posts vals are found but code vals exist\n const showNoPostsMessage = activeTab === 'posts' && \n filteredVals.length === 0 && \n allVals.length > 0;\n\n // User profile image logic\n const profileImageUrl = !profileImageError \n ? `https://pic.val.run/${username}`\n : null;\n \n const profileColor = getProfileColor();\n\n // Find user profile description from moiConfig if available\n // Look through vals to find any with moiConfig that might have description\n const userDescription = allVals.find(val => \n val.moiConfig && val.moiConfig.description && val.username === username\n )?.moiConfig?.description;\n\n // Choose the right background color based on dark/light mode\n const bgClass = isDarkMode ? 'bg-gray-900 text-white' : 'bg-white text-gray-900';\n const tabActiveBgClass = isDarkMode ? 'bg-gray-800' : 'bg-white';\n const tabInactiveBgClass = isDarkMode ? 'bg-gray-700' : 'bg-gray-100';\n const tabActiveTextClass = isDarkMode ? 'text-white' : 'text-gray-900';\n const tabInactiveTextClass = isDarkMode ? 'text-gray-300' : 'text-gray-500';\n const borderClass = isDarkMode ? 'border-gray-700' : 'border-gray-200';\n\n return (\n

{/* Increased max width for more columns */}\n {/* Profile Header */}\n

\n {profileImageUrl ? (\n {`@${username}'s

setProfileImageError(true)}\n />\n ) : (\n \n {username.charAt(0).toUpperCase()}\n \n )}\n

\n \n

@{username}

\n \n View on Val Town\n \n

\n \n

\n {profileData.totalValResults} {profileData.totalValResults === 1 ? 'val' : 'vals'}\n

\n \n {/* Display description if available */}\n {userDescription && (\n

\n {userDescription}\n

\n )}\n

\n \n {/* Tabs */}\n

\n setActiveTab('posts')}\n >\n Posts\n \n setActiveTab('code')}\n >\n Code ({allVals.length})\n \n

\n \n {/* No Posts Message */}\n {showNoPostsMessage && (\n

No posts found. Add a moi.md file to your vals to display them here.

\n setActiveTab('code')}\n className=\"mt-4 px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition duration-200\"\n >\n View All Code\n \n

\n )}\n \n {/* Image Grid */}\n {!showNoPostsMessage && (\n

{/* Remove padding for edge-to-edge grid */}\n \n

\n )}\n \n {/* Loading indicator if fetching more pages */}\n {loadingMore && (\n

\n Loading more...\n

\n )}\n

\n );\n}",[],[101,208,247],{"_106":254,"_96":255,"_161":256,"_163":209,"_164":144,"_165":103,"_166":120,"_108":257,"_102":32,"_168":217,"_170":258,"_171":22,"_172":-5,"_173":259,"_100":260},"1437c258-22fd-11f0-8d29-569c3dd06744","ValGrid.tsx","cf6250c3-5e8b-4fbc-b1ff-f023049d66d3",["D",1745713080962],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { ValGridItem } from \"./ValGridItem.tsx\";\nimport SwipeViewer from \"./SwipeViewer.tsx\";\n\ninterface Val {\n id: string;\n url: string;\n name: string;\n username: string;\n description: string | null;\n image_url: string | null;\n forked_branch_id: string | null;\n updated_at: string;\n matchCount: number;\n moiConfig?: any;\n hasMoiMd?: boolean;\n httpEndpoint?: string | null;\n}\n\ninterface ValGridProps {\n vals: Val[];\n activeTab: 'posts' | 'code';\n isDarkMode: boolean;\n}\n\nexport function ValGrid({ vals, activeTab, isDarkMode }: ValGridProps) {\n // State for the swipe viewer\n const [swipeViewerOpen, setSwipeViewerOpen] = useState(false);\n const [selectedValIndex, setSelectedValIndex] = useState(-1);\n \n // Only enable swipe viewer on the posts tab\n const enableSwipeViewer = activeTab === 'posts';\n \n // Handle grid item click to open the swipe viewer\n const handleGridItemClick = (index: number, val: Val) => {\n // Only open swipe viewer if in posts tab and val has proper URL\n if (enableSwipeViewer && (val.moiConfig?.url || val.httpEndpoint)) {\n setSelectedValIndex(index);\n setSwipeViewerOpen(true);\n }\n };\n \n // Close swipe viewer\n const handleCloseSwipeViewer = () => {\n setSwipeViewerOpen(false);\n setSelectedValIndex(-1);\n };\n\n if (!vals || vals.length === 0) {\n return (\n

\n No vals found.\n

\n );\n }\n\n // Filter out vals that don't have a proper URL for the swipe viewer (posts tab only)\n const swipeableVals = enableSwipeViewer\n ? vals.filter(val => val.moiConfig?.url || val.httpEndpoint)\n : [];\n\n return (\n <>\n {/* Grid layout */}\n

\n {vals.map((val, index) => (\n

handleGridItemClick(index, val)}\n className={enableSwipeViewer && (val.moiConfig?.url || val.httpEndpoint) ? \"cursor-pointer\" : \"\"}\n >\n \n

\n ))}\n

\n \n {/* SwipeViewer component */}\n {swipeViewerOpen && selectedValIndex >= 0 && swipeableVals.length > 0 && (\n v.id === vals[selectedValIndex].id)}\n onClose={handleCloseSwipeViewer}\n isDarkMode={isDarkMode}\n />\n )}\n \n );\n}",[],[101,208,255],{"_106":262,"_96":263,"_161":264,"_163":209,"_164":144,"_165":103,"_166":120,"_108":265,"_102":32,"_168":217,"_170":266,"_171":22,"_172":-5,"_173":267,"_100":268},"1437c578-22fd-11f0-8d29-569c3dd06744","ValGridItem.tsx","49c96c62-15c0-4bb4-8228-862669d15a72",["D",1745713080962],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\n\ninterface Val {\n id: string;\n url: string;\n name: string;\n username: string;\n description: string | null;\n image_url: string | null;\n forked_branch_id: string | null;\n updated_at: string;\n matchCount: number;\n moiConfig?: any;\n hasMoiMd?: boolean;\n httpEndpoint?: string | null;\n}\n\ninterface ValGridItemProps {\n val: Val;\n activeTab: 'posts' | 'code';\n isDarkMode: boolean;\n}\n\nexport function ValGridItem({ val, activeTab, isDarkMode }: ValGridItemProps) {\n const [imgError, setImgError] = useState(false);\n \n // Create a deterministic background color based on val name\n const getBackgroundColor = () => {\n // Simple hash function for generating a color\n let hash = 0;\n const str = val.name + val.username;\n for (let i = 0; i < str.length; i++) {\n hash = str.charCodeAt(i) + ((hash << 5) - hash);\n }\n \n // Convert hash to RGB color\n let r = (hash & 0xFF0000) >> 16;\n let g = (hash & 0x00FF00) >> 8;\n let b = hash & 0x0000FF;\n \n // For dark mode, make colors more muted but visible\n if (isDarkMode) {\n // Ensure colors are visible on dark background but very muted\n r = Math.min(((r + 100) % 256), 180);\n g = Math.min(((g + 100) % 256), 180);\n b = Math.min(((b + 100) % 256), 180);\n \n // Add transparency for a more muted look\n return `rgba(${r}, ${g}, ${b}, 0.5)`;\n } else {\n // Ensure relatively pastel, more muted colors for light mode\n r = Math.min(((r + 155) % 256), 180);\n g = Math.min(((g + 155) % 256), 180);\n b = Math.min(((b + 155) % 256), 180);\n \n // Add transparency for a more muted look\n return `rgba(${r}, ${g}, ${b}, 0.4)`;\n }\n };\n\n // Format the date\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n return date.toLocaleDateString('en-US', {\n year: 'numeric',\n month: 'short',\n day: 'numeric'\n });\n };\n\n // Determine the image URL to use\n const getImageUrl = () => {\n // Priority order:\n // 1. Val's image_url from API if available\n // 2. moiConfig imageUrl if available\n // 3. Return null to use color placeholder\n if (val.image_url && !imgError) {\n return val.image_url;\n } else if (val.moiConfig?.imageUrl && !imgError) {\n return val.moiConfig.imageUrl;\n } else {\n return null;\n }\n };\n \n // Determine the URL to link to based on active tab\n const getLinkUrl = () => {\n if (activeTab === 'posts') {\n // For posts tab, priority order:\n // 1. Use explicit url from moiConfig if available\n if (val.moiConfig?.url) {\n return val.moiConfig.url;\n }\n // 2. Use httpEndpoint if available\n else if (val.httpEndpoint) {\n return val.httpEndpoint;\n }\n // 3. Fallback to code URL\n else {\n return val.url;\n }\n } else {\n // For code tab, always link to project code\n return val.url;\n }\n };\n \n // Format name for display in placeholder with line breaks\n const getFormattedName = () => {\n // Replace dashes, underscores, and camelCase with line breaks\n let formatted = val.name;\n \n // Replace dashes and underscores with line breaks\n formatted = formatted.replace(/[-_]/g, '\\n');\n \n // Add line breaks at camelCase transitions\n formatted = formatted.replace(/([a-z])([A-Z])/g, '$1\\n$2');\n \n // Limit to a reasonable number of lines\n const lines = formatted.split('\\n');\n if (lines.length > 3) {\n return lines.slice(0, 3).join('\\n') + '...';\n }\n \n return formatted;\n };\n \n // Determine if this val has a proper link for the Posts tab\n const hasProperPostsLink = () => {\n return val.moiConfig?.url || val.httpEndpoint;\n };\n \n const imageUrl = getImageUrl();\n const backgroundColor = getBackgroundColor();\n const linkUrl = getLinkUrl();\n const formattedName = getFormattedName();\n const hasPostsLink = hasProperPostsLink();\n \n // Get the description to display (either from val or from moiConfig)\n const displayDescription = val.description || val.moiConfig?.description || null;\n \n return (\n

\n {imageUrl ? (\n ${val.name}\n$ setImgError(true)}\n />\n ) : (\n

\n \n {formattedName}\n \n

\n )}\n \n {/* Overlay with val info on hover */}\n

{val.name}

\n {displayDescription && (\n

\n {displayDescription}\n

\n )}\n

\n Updated: {formatDate(val.updated_at)}\n

\n \n {/* Show appropriate link type */}\n

\n {activeTab === 'posts' && hasPostsLink ? (\n \n Live App\n \n ) : (\n View Code\n )}\n

\n );\n}",[],[101,208,263],[101,208],{"_106":271,"_96":272,"_161":273,"_163":203,"_164":144,"_165":103,"_166":120,"_108":274,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":275,"_100":300},"1437db94-22fd-11f0-8d29-569c3dd06744","utils","d66c0b4e-57f6-42e2-830f-82d0262e49a5",["D",1745713080962],[276,284,292],{"_106":277,"_96":278,"_161":279,"_163":273,"_164":144,"_165":103,"_166":22,"_108":280,"_102":32,"_168":217,"_170":281,"_171":22,"_172":-5,"_173":282,"_100":283},"1437cdb6-22fd-11f0-8d29-569c3dd06744","PositioningUtils.ts","7d0200cb-43b8-4eb1-b22e-46b074b4482a",["D",1745713080962],"/**\n * Utilities for handling viewport positioning issues\n * These are critical for ensuring proper display on mobile and desktop\n */\n\n/**\n * Aggressively forces the window to position at the top\n * Uses multiple techniques to ensure reliable positioning\n * @param debugLog Optional logging function\n */\nexport const forceTopPosition = (debugLog?: (message: string) => void) => {\n if (typeof window !== \"undefined\") {\n if (debugLog) debugLog(\"FORCING TOP POSITION - CRITICAL PATH\");\n \n // Multiple approaches to force position\n window.scrollTo(0, 0);\n document.documentElement.scrollTop = 0;\n document.body.scrollTop = 0;\n \n // Force position fixed\n document.body.style.position = 'fixed';\n document.body.style.top = '0';\n document.body.style.left = '0';\n document.body.style.width = '100%';\n document.body.style.height = '100%';\n \n // Use setTimeout to catch any browser reflow\n setTimeout(() => window.scrollTo(0, 0), 5);\n setTimeout(() => window.scrollTo(0, 0), 15);\n setTimeout(() => window.scrollTo(0, 0), 50);\n }\n};\n\n/**\n * Creates a fixed positioning state for the entire viewport\n * Helps prevent navigation bars and other elements from causing layout shifts\n * @param forced Whether this is a forced update (more aggressive)\n * @param attemptRef Reference to positioning attempt counter\n * @param pageLoadTimeRef Reference to page load time\n * @param checkSidebarFn Optional function to check if sidebar should be shown\n * @param debugLog Optional logging function\n */\nexport const fixPositioning = (\n forced = false, \n attemptRef?: React.MutableRefObject,\n pageLoadTimeRef?: React.MutableRefObject,\n checkSidebarFn?: () => boolean,\n debugLog?: (message: string) => void\n) => {\n if (typeof window !== \"undefined\") {\n // Track attempts if reference provided\n if (attemptRef) {\n attemptRef.current += 1;\n \n if (debugLog && pageLoadTimeRef) {\n const attempt = attemptRef.current;\n const timeElapsed = Date.now() - pageLoadTimeRef.current;\n debugLog(`Positioning attempt #${attempt} (${timeElapsed}ms since load) ${forced ? '(FORCED)' : ''}`);\n debugLog(`Window: ${window.innerWidth}x${window.innerHeight}, Scroll: ${window.scrollX},${window.scrollY}`);\n }\n }\n \n // Super aggressive approach for positioning - multiple techniques combined\n \n // 1. Set overflow hidden on html and body\n document.documentElement.style.overflow = 'hidden';\n document.body.style.overflow = 'hidden';\n document.documentElement.style.position = 'relative';\n \n // 2. Position fixed approach for body\n document.body.style.position = 'fixed';\n document.body.style.width = '100%';\n document.body.style.height = '100%';\n document.body.style.top = '0';\n document.body.style.left = '0';\n \n // 3. Force scroll to top with multiple methods\n window.scrollTo(0, 0);\n document.documentElement.scrollTop = 0;\n document.body.scrollTop = 0;\n \n // 4. Set viewport height\n const vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty(\"--vh\", `${vh}px`);\n \n if (debugLog) debugLog(`Set viewport height: --vh = ${vh}px`);\n \n // 5. Check if we need sidebar if function provided\n if (checkSidebarFn) checkSidebarFn();\n \n // 6. Check scroll position after a short delay to confirm it worked\n if (forced) {\n setTimeout(() => {\n if (window.scrollY !== 0) {\n if (debugLog) {\n debugLog(`WARNING: Scroll position is not 0 after fixPositioning: ${window.scrollY}, forcing another fix`);\n }\n // Try again with more direct approach\n window.scrollTo({top: 0, left: 0, behavior: 'auto'});\n document.documentElement.scrollTop = 0;\n document.body.scrollTop = 0;\n }\n }, 10);\n }\n }\n};\n\n/**\n * Restores normal document positioning\n * Should be called when unmounting components that used fixPositioning\n */\nexport const restorePositioning = () => {\n document.documentElement.style.overflow = '';\n document.body.style.overflow = '';\n document.documentElement.style.position = '';\n document.body.style.position = '';\n document.body.style.width = '';\n document.body.style.height = '';\n document.body.style.top = '';\n document.body.style.left = '';\n};\n\nexport default {\n forceTopPosition,\n fixPositioning,\n restorePositioning\n};",[],[101,272,278],{"_106":285,"_96":286,"_161":287,"_163":273,"_164":144,"_165":103,"_166":120,"_108":288,"_102":32,"_168":217,"_170":289,"_171":22,"_172":-5,"_173":290,"_100":291},"1437d176-22fd-11f0-8d29-569c3dd06744","moiConfig.tsx","f822e12d-bc5c-4bb3-9764-1678711b4a05",["D",1745713080962],"/** \n * Utility for parsing and handling moi.md configuration files\n */\n\ninterface MoiConfig {\n title?: string;\n description?: string;\n imageUrl?: string;\n author?: string;\n tags?: string[];\n [key: string]: any; // Allow for any additional properties\n}\n\n/**\n * Parse YAML frontmatter from a string\n */\nfunction parseFrontmatter(content: string): MoiConfig | null {\n try {\n // Check if content has frontmatter (starts with ---)\n if (!content.startsWith('---')) {\n return null;\n }\n\n // Find the end of the frontmatter block\n const endIndex = content.indexOf('---', 3);\n if (endIndex === -1) {\n return null;\n }\n\n // Extract the frontmatter section\n const frontmatterText = content.substring(3, endIndex).trim();\n \n // Parse YAML manually (simple version)\n const config: MoiConfig = {};\n const lines = frontmatterText.split('\\n');\n \n for (const line of lines) {\n // Skip empty lines\n if (!line.trim()) continue;\n \n // Find the first colon, which separates key and value\n const colonIndex = line.indexOf(':');\n if (colonIndex === -1) continue;\n \n const key = line.substring(0, colonIndex).trim();\n let value = line.substring(colonIndex + 1).trim();\n \n // If value is wrapped in quotes, remove them\n if ((value.startsWith('\"') && value.endsWith('\"')) || \n (value.startsWith(\"'\") && value.endsWith(\"'\"))) {\n value = value.substring(1, value.length - 1);\n }\n \n // Handle arrays (very simple implementation)\n if (value.startsWith('[') && value.endsWith(']')) {\n const arrayStr = value.substring(1, value.length - 1);\n const arrayItems = arrayStr.split(',').map(item => {\n item = item.trim();\n // Remove quotes if present\n if ((item.startsWith('\"') && item.endsWith('\"')) || \n (item.startsWith(\"'\") && item.endsWith(\"'\"))) {\n return item.substring(1, item.length - 1);\n }\n return item;\n });\n config[key] = arrayItems;\n } else {\n config[key] = value;\n }\n }\n \n return config;\n } catch (error) {\n console.error(\"Error parsing frontmatter:\", error);\n return null;\n }\n}\n\n/**\n * Fetch and parse moi.md for a project\n * Returns the parsed configuration or null if not found or invalid\n */\nexport async function fetchMoiConfig(baseUrl: string): Promise {\n try {\n // Try to fetch the moi.md file from the project root\n const response = await fetch(`${baseUrl}/moi.md`);\n \n // If file doesn't exist, return null\n if (!response.ok) {\n return null;\n }\n \n const content = await response.text();\n return parseFrontmatter(content);\n } catch (error) {\n console.error(\"Error fetching moi.md:\", error);\n return null;\n }\n}\n\n/**\n * Get image URL from moi config or use default\n */\nexport function getProfileImageUrl(\n username: string, \n moiConfig: MoiConfig | null,\n defaultImageUrl: string | null\n): string {\n // First priority: Use imageUrl from moi.md if available\n if (moiConfig?.imageUrl) {\n return moiConfig.imageUrl;\n }\n \n // Second priority: Use default image URL if provided\n if (defaultImageUrl) {\n return defaultImageUrl;\n }\n \n // Fallback: Use Val Town profile pic API\n return `https://pic.val.run/${username}`;\n}\n",[],[101,272,286],{"_106":293,"_96":294,"_161":295,"_163":273,"_164":144,"_165":103,"_166":22,"_108":296,"_102":32,"_168":217,"_170":297,"_171":22,"_172":-5,"_173":298,"_100":299},"1437d4be-22fd-11f0-8d29-569c3dd06744","viewport.ts","ec87b6c6-076e-439b-8fe8-ba62140c6173",["D",1745713080962],"// Viewport utility functions for mobile compatibility\n\n/**\n * Sets a CSS variable for viewport height to handle mobile browser address bars\n * This is used to ensure proper sizing on mobile devices where 100vh can be problematic\n */\nexport const setupViewportHeight = (): (() => void) => {\n const logInfo = (message: string) => {\n console.log(`[ViewportUtil] ${message}`);\n };\n\n const logDebug = (message: string) => {\n if (typeof window !== \"undefined\") {\n console.log(`[ViewportUtil DEBUG] ${message}`);\n console.log(`[ViewportUtil DEBUG] Window size: ${window.innerWidth}x${window.innerHeight}, devicePixelRatio: ${window.devicePixelRatio}`);\n console.log(`[ViewportUtil DEBUG] User agent: ${navigator.userAgent}`);\n console.log(`[ViewportUtil DEBUG] Scroll position: ${window.scrollX},${window.scrollY}`);\n console.log(`[ViewportUtil DEBUG] Document size: ${document.documentElement.scrollWidth}x${document.documentElement.scrollHeight}`);\n \n // Check for any existing CSS transformations that might affect positioning\n const computedStyle = window.getComputedStyle(document.body);\n console.log(`[ViewportUtil DEBUG] Body transform: ${computedStyle.transform}`);\n console.log(`[ViewportUtil DEBUG] Body position: ${computedStyle.position}`);\n \n // Check the viewport meta tag\n const viewport = document.querySelector('meta[name=\"viewport\"]');\n console.log(`[ViewportUtil DEBUG] Viewport meta: ${viewport ? viewport.getAttribute('content') : 'not found'}`);\n }\n };\n\n const setVh = () => {\n if (typeof window !== \"undefined\") {\n const originalHeight = window.innerHeight;\n const vh = originalHeight * 0.01;\n document.documentElement.style.setProperty(\"--vh\", `${vh}px`);\n \n logInfo(`Setting viewport height: --vh = ${vh}px (window.innerHeight: ${originalHeight}px)`);\n \n // Force scroll to top multiple times to ensure we're at the top\n window.scrollTo(0, 0);\n \n // Add a slight delay and check if we're still at the top\n setTimeout(() => {\n if (window.scrollY !== 0) {\n logInfo(`WARNING: Not at top after scrollTo (scrollY: ${window.scrollY})`);\n window.scrollTo(0, 0);\n }\n \n // Check if the height changed after the first scrollTo\n if (window.innerHeight !== originalHeight) {\n const newVh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty(\"--vh\", `${newVh}px`);\n logInfo(`Height changed after scrollTo: ${originalHeight}px -> ${window.innerHeight}px, updating --vh = ${newVh}px`);\n }\n }, 50);\n }\n };\n\n // Log initial state\n logInfo(\"Initializing viewport height utility\");\n logDebug(\"Initial state\");\n \n // Initial setup\n setVh();\n \n // Setup resize/orientation handlers with debounce\n let timeoutId: number | undefined;\n let orientationTimeoutId: number | undefined;\n \n const handleResize = () => {\n if (typeof window !== \"undefined\") {\n logInfo(`Resize event triggered: ${window.innerWidth}x${window.innerHeight}`);\n clearTimeout(timeoutId);\n timeoutId = setTimeout(() => {\n setVh();\n logDebug(\"After resize\");\n }, 150) as unknown as number;\n }\n };\n \n const handleOrientationChange = () => {\n if (typeof window !== \"undefined\") {\n logInfo(`Orientation change detected`);\n \n // Reset any existing orientation timeout\n if (orientationTimeoutId) clearTimeout(orientationTimeoutId);\n \n // Set viewport height immediately\n setVh();\n \n // Then check again after a delay for iOS Safari which sometimes updates height after a delay\n orientationTimeoutId = setTimeout(() => {\n setVh();\n logDebug(\"After orientation change\");\n \n // Run another check after a longer delay for problematic browsers\n setTimeout(() => {\n setVh();\n logDebug(\"Final orientation change check\");\n }, 500);\n }, 150) as unknown as number;\n }\n };\n \n // Add event listeners\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"resize\", handleResize);\n window.addEventListener(\"orientationchange\", handleOrientationChange);\n \n // Add scroll event listener to log unexpected scrolling\n window.addEventListener(\"scroll\", () => {\n logInfo(`Scroll event detected: ${window.scrollX},${window.scrollY}`);\n });\n \n // Also listen for page visibility changes, which can sometimes trigger layout recalculations\n document.addEventListener(\"visibilitychange\", () => {\n logInfo(`Visibility changed: ${document.visibilityState}`);\n if (document.visibilityState === \"visible\") {\n setVh();\n logDebug(\"After visibility change to visible\");\n }\n });\n }\n \n // Run additional checks after page is fully loaded\n if (typeof window !== \"undefined\") {\n window.addEventListener(\"load\", () => {\n logInfo(\"Window load event\");\n setVh();\n logDebug(\"After window load\");\n \n // Run another check after a delay\n setTimeout(() => {\n setVh();\n logDebug(\"Delayed check after window load\");\n }, 500);\n });\n }\n \n // Return cleanup function\n return () => {\n logInfo(\"Cleaning up viewport height utility\");\n \n if (typeof window !== \"undefined\") {\n if (timeoutId) clearTimeout(timeoutId);\n if (orientationTimeoutId) clearTimeout(orientationTimeoutId);\n window.removeEventListener(\"resize\", handleResize);\n window.removeEventListener(\"orientationchange\", handleOrientationChange);\n window.removeEventListener(\"scroll\", () => {});\n document.removeEventListener(\"visibilitychange\", () => {});\n }\n };\n};\n\nexport default setupViewportHeight;",[],[101,272,294],[101,272],{"_106":302,"_96":303,"_161":304,"_163":203,"_164":144,"_165":103,"_166":22,"_108":305,"_102":32,"_168":196,"_170":306,"_171":22,"_172":-5,"_173":307,"_100":308},"1437dd2e-22fd-11f0-8d29-569c3dd06744","index.html","a80385d2-4f4f-4d21-936c-b44bfe2ea15c",["D",1745713080962],"\n\n\n \n \n \n \n build.moi - Share your Val Town projects\n \n \n \n\n\n

\n \n \n\n",[],[101,303],{"_106":310,"_96":311,"_161":312,"_163":203,"_164":144,"_165":103,"_166":120,"_108":313,"_102":32,"_168":217,"_170":314,"_171":22,"_172":-5,"_173":315,"_100":316},"1437e396-22fd-11f0-8d29-569c3dd06744","index.tsx","2713fca2-248b-4cca-bf75-0802163be07c",["D",1745713080962],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\n// Wait for DOM to load\nif (document.readyState === \"loading\") {\n document.addEventListener(\"DOMContentLoaded\", initApp);\n} else {\n initApp();\n}\n\nfunction initApp() {\n const root = document.getElementById(\"root\");\n if (!root) {\n throw new Error(\"No root element found\");\n }\n\n createRoot(root).render();\n}",[],[101,311],[101],{"_106":319,"_96":320,"_161":321,"_163":-5,"_164":144,"_165":103,"_166":120,"_108":322,"_102":32,"_168":196,"_170":323,"_171":22,"_172":-5,"_173":324,"_100":325},"1437e710-22fd-11f0-8d29-569c3dd06744","README.md","3c5f800c-151a-4dcc-9612-9c0b90af9de6",["D",1745713080962],"# build.moi - A New Creative Home\n\nbuild.moi is a modern showcase platform for Val Town users, displaying their vals and projects in a clean, elegant grid layout.\n\n## Features\n\n- View any Val Town user profile in a beautiful grid gallery\n- **Posts / Code tabs**: Filter between vals with moi.md (Posts) and all vals (Code)\n- **Live app links**: Posts tab links directly to HTTP endpoints or custom URLs\n- 2:3 aspect ratio cards (portrait mode)\n- **Minimal spacing grid**: Edge-to-edge on mobile with tighter spacing\n- Responsive design (mobile and desktop friendly)\n- **Dark mode support**: Automatically follows system preferences\n- Circle-cropped profile pictures\n- **Muted colorful placeholders** with wrapped val names\n- Hover effects to display val details\n- **Responsive grid**: More columns on larger screens (3-5 columns)\n- Client-side routing (/@username paths)\n- Custom profile configuration via moi.md files\n- **Infinite content loading**: No pagination, content loads as needed\n\n## Usage\n\nVisit the main page and enter a Val Town username to view their profile. You can also directly navigate to:\n\n```\n/@username\n```\n\nWhere `username` is the Val Town username you want to view.\n\n## Tabs Functionality\n\nbuild.moi has two main tabs:\n\n1. **Posts**: Shows only vals with a `moi.md` file and links to their live HTTP endpoints or custom URLs\n2. **Code**: Shows all vals and links to their code on Val Town\n\nThe Posts tab is perfect for highlighting your working applications, while the Code tab gives visitors access to all your Val Town code.\n\n## Custom Profile Configuration with moi.md\n\nbuild.moi supports custom profile configuration using a `moi.md` file at the root of your Val Town project. This file uses YAML frontmatter to specify custom metadata for your profile or individual vals.\n\n### Example moi.md\n\n```markdown\n---\ntitle: \"My Awesome Val Town Project\"\ndescription: \"A detailed description of my project\"\nimageUrl: \"https://example.com/my-custom-image.jpg\"\nurl: \"https://my-live-app-endpoint.web.val.run\"\nauthor: \"username\"\ntags: [\"javascript\", \"react\", \"val-town\"]\n---\n\n# My Project\n\nAdditional markdown content here will be ignored by build.moi but can be used for documentation.\n```\n\n### Supported Configuration Options\n\n- `title`: Custom display title\n- `description`: Extended description\n- `imageUrl`: Custom image URL to override the default profile/val image (2:3 aspect ratio recommended, e.g., 800x1200px)\n- `url`: **Direct URL to your app's live endpoint** (used by the Posts tab)\n- `author`: Custom author display name\n- `tags`: Array of tags for categorization\n\n## Image Guidelines\n\n- **Profile Images**: Square images work best, as they will be displayed in a circle\n- **Val/Project Images**: 2:3 aspect ratio (portrait orientation) works best, like 800x1200 pixels\n- **Placeholders**: If no image is available, colorful placeholders with the val name (auto-wrapped at hyphens, underscores, and camelCase) will be shown\n\n## Technical Details\n\n- Built with React (client-side)\n- Hono (server-side)\n- Tailwind CSS (styling)\n- Uses Charlie's User Search API for val discovery\n- Val Town SDK for fetching moi.md configurations and HTTP endpoints\n- Uses Val Town's profile picture proxy for user avatars\n- Dark mode support based on system preferences\n\n## API & SDK Integration\n\nThe app uses a hybrid approach:\n\n1. **Charlie's User Search API** (`https://charliesusersearch.val.run/?user=${username}`) for discovering user vals\n2. **Val Town SDK** (`npm:@valtown/sdk`) for fetching and parsing moi.md files and determining HTTP endpoints\n3. Val Town Profile Pic Proxy (`https://pic.val.run/${username}`) for user avatars\n\n## URL Priority Order for Posts Tab\n\nWhen determining which URL to use for a val in the Posts tab, build.moi follows this priority:\n\n1. Custom `url` field from the val's moi.md file\n2. HTTP endpoint automatically detected via the Val Town SDK\n3. Fallback to the code URL if no app URL is found\n\n## Credits\n\nBuilt by dcm31 on Val Town.",[],[320],{"_106":327,"_96":328,"_161":329,"_163":-5,"_164":144,"_165":103,"_166":120,"_108":330,"_102":32,"_168":196,"_170":331,"_171":22,"_172":-5,"_173":332,"_100":333},"1437eada-22fd-11f0-8d29-569c3dd06744","moi.md","f45be4c7-0b28-4606-b65c-07ca142fc46d",["D",1745713080962],"---\ntitle: \"build.moi\"\ndescription: \"A new creative home for your Val Town projects\"\nimageUrl: \"https://chatgpt.com/backend-api/public_content/enc/eyJpZCI6Im1fNjgwZDBmMmI2OWQ0ODE5MWJjNjI4NDdkZDNhOTJiOTA6ZmlsZV8wMDAwMDAwMGFjYzQ2MjMwOGE3NTIxMTE1MmVlYTNlMyIsInRzIjoiNDg0OTEyIiwicCI6InB5aSIsInNpZyI6ImI5YjNkOWNlMmVmZDE2NTlhYzgwMjYzYzE2ZThjYjA1N2RjOTM5MDFkNjhkNTA1OTE5YjBhYzI4OTM2ZDgyMTMiLCJ2IjoiMCIsImdpem1vX2lkIjpudWxsfQ==\"\nurl: \"https://dcm31--199443aefb4c4d6a9062b10c53996a6b.web.val.run\"\nauthor: \"dcm31\"\ntags: [\"showcase\", \"gallery\", \"profile\", \"val-town\", \"typescript\"]\n---\n\n# build.moi\n\nbuild.moi provides a modern showcase for Val Town profiles, making it easy to browse and discover vals and projects in a clean, minimalist layout.\n\n## Features\n\n- Clean grid layout for vals and projects\n- Posts tab shows vals with moi.md and links to live apps\n- Code tab shows all vals and links to their source code\n- 2:3 aspect ratio for all val cards\n- Profile view with user details\n- Hover effects to display val information\n- Responsive design for all devices\n- Custom profile configuration via moi.md \n- Infinite content loading without pagination\n\n## Usage\n\nVisit the main page and enter a Val Town username, or go directly to:\n\n```\n/@username\n```\n\n## Custom Configuration\n\nbuild.moi supports custom profile and val configuration through moi.md files. Add a moi.md file to your Val Town project root with YAML frontmatter to customize your profile display in build.moi.\n\n### Supported Configuration Options\n\n- `title`: Custom display title\n- `description`: Extended description\n- `imageUrl`: Custom image URL to override the default (2:3 aspect ratio recommended)\n- `url`: Direct URL to your app's live endpoint (used in Posts tab)\n- `author`: Custom author display name\n- `tags`: Array of tags for categorization",[],[328],"files",[158,175,185,191,201,206,212,221,229,237,245,253,261,270,276,284,292,301,309,318,326],"counts",{"_338":339,"_340":341,"_342":32,"_343":344,"_347":348},"pulls",4,"branches",19,"forks","envVars",{"_345":32,"_346":32},"count","emptyCount","connections",{"_345":32,"_349":32},"unfilledCount","contents",[352,355,358,361],{"_106":207,"_96":208,"_161":209,"_163":203,"_164":144,"_165":103,"_166":120,"_108":353,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":354},["D",1745713080962],[101,208],{"_106":271,"_96":272,"_161":273,"_163":203,"_164":144,"_165":103,"_166":120,"_108":356,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":357},["D",1745713080962],[101,272],{"_106":302,"_96":303,"_161":304,"_163":203,"_164":144,"_165":103,"_166":22,"_108":359,"_102":32,"_168":196,"_170":306,"_171":22,"_172":-5,"_100":360},["D",1745713080962],[101,303],{"_106":310,"_96":311,"_161":312,"_163":203,"_164":144,"_165":103,"_166":120,"_108":362,"_102":32,"_168":217,"_170":314,"_171":22,"_172":-5,"_100":363},["D",1745713080962],[101,311],{"_106":202,"_96":101,"_161":203,"_163":-5,"_164":144,"_165":103,"_166":120,"_108":365,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":366},["D",1745713080962],[101],"upstreamProject","upstreamBranch",{"_106":147,"_108":370,"_371":372,"_96":373,"_145":107,"_102":149,"_146":374,"_148":375,"_376":377,"_110":-5,"_155":22,"_112":113,"_154":95,"_16":125,"_153":97},["D",1745710537236],"updatedAt",["D",1745713014848],"swipe-with-nav","bd02be98-22d4-11f0-8f89-569c3dd06744",12,"lockfileKey","1765208077913-esm.town_v_dcm31_buildDotMoi@13-swipe-with-nav","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":99,"_102":103,"_100":101,"_104":384,"_156":389,"_334":453,"_196":454,"_350":456,"_465":466,"_469":-5,"_470":471,"_472":32,"_473":474,"_343":-5},{"_106":107,"_96":97,"_108":385,"_110":-5,"_111":22,"_112":113,"_114":-5,"_115":-5,"_14":116,"_117":118,"_119":120,"_121":-5,"_122":123,"_124":32,"_16":125,"_126":127,"_128":127,"_129":130,"_131":130,"_132":130,"_133":127,"_134":127,"_23":386,"_138":387,"_141":388,"_155":22},["D",1745630485630],{"_94":95,"_136":137},{"_94":95,"_140":137,"_14":116},{"_102":143,"_96":99,"_106":144,"_145":107,"_146":147,"_148":149,"_150":113,"_151":107,"_152":125,"_153":97,"_154":95},[390,396,402,447,450],{"_106":159,"_96":160,"_161":162,"_163":-5,"_164":144,"_165":103,"_166":120,"_108":167,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":391,"_100":395},[392],{"_106":176,"_96":177,"_161":178,"_163":162,"_164":144,"_165":103,"_166":120,"_108":179,"_102":32,"_168":180,"_170":181,"_171":22,"_172":-5,"_173":393,"_100":394},[],[160,177],[160],{"_106":186,"_96":187,"_161":188,"_163":-5,"_164":144,"_165":103,"_166":120,"_108":189,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":397,"_100":401},[398],{"_106":192,"_96":193,"_161":194,"_163":188,"_164":144,"_165":103,"_166":120,"_108":195,"_102":32,"_168":196,"_170":197,"_171":22,"_172":-5,"_173":399,"_100":400},[],[187,193],[187],{"_106":202,"_96":101,"_161":203,"_163":-5,"_164":144,"_165":103,"_166":120,"_108":204,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":403,"_100":446},[404,428,440,443],{"_106":207,"_96":208,"_161":209,"_163":203,"_164":144,"_165":103,"_166":120,"_108":210,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":405,"_100":427},[406,409,412,415,418,421,424],{"_106":213,"_96":214,"_161":215,"_163":209,"_164":144,"_165":103,"_166":120,"_108":216,"_102":32,"_168":217,"_170":218,"_171":22,"_172":-5,"_173":407,"_100":408},[],[101,208,214],{"_106":222,"_96":223,"_161":224,"_163":209,"_164":144,"_165":103,"_166":120,"_108":225,"_102":32,"_168":217,"_170":226,"_171":22,"_172":-5,"_173":410,"_100":411},[],[101,208,223],{"_106":230,"_96":231,"_161":232,"_163":209,"_164":144,"_165":103,"_166":22,"_108":233,"_102":32,"_168":217,"_170":234,"_171":22,"_172":-5,"_173":413,"_100":414},[],[101,208,231],{"_106":238,"_96":239,"_161":240,"_163":209,"_164":144,"_165":103,"_166":22,"_108":241,"_102":32,"_168":217,"_170":242,"_171":22,"_172":-5,"_173":416,"_100":417},[],[101,208,239],{"_106":246,"_96":247,"_161":248,"_163":209,"_164":144,"_165":103,"_166":120,"_108":249,"_102":32,"_168":217,"_170":250,"_171":22,"_172":-5,"_173":419,"_100":420},[],[101,208,247],{"_106":254,"_96":255,"_161":256,"_163":209,"_164":144,"_165":103,"_166":120,"_108":257,"_102":32,"_168":217,"_170":258,"_171":22,"_172":-5,"_173":422,"_100":423},[],[101,208,255],{"_106":262,"_96":263,"_161":264,"_163":209,"_164":144,"_165":103,"_166":120,"_108":265,"_102":32,"_168":217,"_170":266,"_171":22,"_172":-5,"_173":425,"_100":426},[],[101,208,263],[101,208],{"_106":271,"_96":272,"_161":273,"_163":203,"_164":144,"_165":103,"_166":120,"_108":274,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":429,"_100":439},[430,433,436],{"_106":277,"_96":278,"_161":279,"_163":273,"_164":144,"_165":103,"_166":22,"_108":280,"_102":32,"_168":217,"_170":281,"_171":22,"_172":-5,"_173":431,"_100":432},[],[101,272,278],{"_106":285,"_96":286,"_161":287,"_163":273,"_164":144,"_165":103,"_166":120,"_108":288,"_102":32,"_168":217,"_170":289,"_171":22,"_172":-5,"_173":434,"_100":435},[],[101,272,286],{"_106":293,"_96":294,"_161":295,"_163":273,"_164":144,"_165":103,"_166":22,"_108":296,"_102":32,"_168":217,"_170":297,"_171":22,"_172":-5,"_173":437,"_100":438},[],[101,272,294],[101,272],{"_106":302,"_96":303,"_161":304,"_163":203,"_164":144,"_165":103,"_166":22,"_108":305,"_102":32,"_168":196,"_170":306,"_171":22,"_172":-5,"_173":441,"_100":442},[],[101,303],{"_106":310,"_96":311,"_161":312,"_163":203,"_164":144,"_165":103,"_166":120,"_108":313,"_102":32,"_168":217,"_170":314,"_171":22,"_172":-5,"_173":444,"_100":445},[],[101,311],[101],{"_106":319,"_96":320,"_161":321,"_163":-5,"_164":144,"_165":103,"_166":120,"_108":322,"_102":32,"_168":196,"_170":323,"_171":22,"_172":-5,"_173":448,"_100":449},[],[320],{"_106":327,"_96":328,"_161":329,"_163":-5,"_164":144,"_165":103,"_166":120,"_108":330,"_102":32,"_168":196,"_170":331,"_171":22,"_172":-5,"_173":451,"_100":452},[],[328],[390,392,396,398,402,404,406,409,412,415,418,421,424,428,430,433,436,440,443,447,450],{"_106":202,"_96":101,"_161":203,"_163":-5,"_164":144,"_165":103,"_166":120,"_108":365,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":455},[101],[457,459,461,463],{"_106":207,"_96":208,"_161":209,"_163":203,"_164":144,"_165":103,"_166":120,"_108":353,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":458},[101,208],{"_106":271,"_96":272,"_161":273,"_163":203,"_164":144,"_165":103,"_166":120,"_108":356,"_102":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":460},[101,272],{"_106":302,"_96":303,"_161":304,"_163":203,"_164":144,"_165":103,"_166":22,"_108":359,"_102":32,"_168":196,"_170":306,"_171":22,"_172":-5,"_100":462},[101,303],{"_106":310,"_96":311,"_161":312,"_163":203,"_164":144,"_165":103,"_166":120,"_108":362,"_102":32,"_168":217,"_170":314,"_171":22,"_172":-5,"_100":464},[101,311],"upstream",{"_106":147,"_108":467,"_371":468,"_96":373,"_145":107,"_102":149,"_146":374,"_148":375,"_376":377,"_110":-5,"_155":22,"_112":113,"_154":95,"_16":125,"_153":97},["D",1745710537236],["D",1745713014848],"pull","ahead",5,"behind","templates",[],"actionData","errors"]

\n build.moi\n \n

How build.moi works:

Showcase your work

Simple integration

See Charlie's Profile

Error

No vals found

@{username}

{val.name}

\n build.moi\n $\"logo\"$ \n