\n {currentUsername && currentValName ? (\n // Show individual post page\n

\n {\n e.preventDefault();\n setCurrentUsername(null);\n setCurrentValName(null);\n window.history.pushState({}, '', '/');\n }}\n >\n build.moi\n $\"logo\"$ \n \n \n {\n e.preventDefault();\n setCurrentValName(null);\n window.history.pushState({}, '', `/@${currentUsername}`);\n }}\n >\n ← Back to @{currentUsername}\n \n

\n \n \n

\n ) : currentUsername ? (\n // If a username is set, show the profile page (UNCHANGED)\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

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

\n );\n}",[],[203,209,215],{"_105":224,"_96":225,"_160":226,"_162":210,"_163":143,"_164":165,"_166":119,"_107":227,"_101":32,"_168":219,"_170":228,"_171":22,"_172":-5,"_173":229,"_100":230},"eb05f172-4555-11f0-973d-76b3cceeab13","EditProfileHeader.tsx","696a1c3a-2541-47aa-8b56-a3cffdaff3b4",["D",1749489576590],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface EditProfileHeaderProps {\n isDarkMode: boolean;\n isEditing: boolean;\n onToggleEditMode: () => void;\n apiKey: string;\n onApiKeyChange: (key: string) => void;\n username: string | null;\n}\n\nexport function EditProfileHeader({\n isDarkMode,\n isEditing,\n onToggleEditMode,\n apiKey,\n onApiKeyChange,\n username\n}: EditProfileHeaderProps) {\n const [showApiInput, setShowApiInput] = useState(false);\n const [inputKey, setInputKey] = useState(apiKey);\n const [savedUser, setSavedUser] = useState(null);\n\n // Update inputKey when apiKey changes (from localStorage)\n useEffect(() => {\n setInputKey(apiKey);\n }, [apiKey]);\n \n // Update savedUser when username is available\n useEffect(() => {\n if (username) {\n setSavedUser(username);\n }\n }, [username]);\n\n const handleSaveApiKey = () => {\n onApiKeyChange(inputKey);\n setShowApiInput(false);\n };\n\n return (\n

\n {!showApiInput ? (\n <>\n {apiKey ? (\n

\n \n {savedUser ? `@${savedUser}` : 'API Key Set'}\n \n setShowApiInput(true)}\n className={`ml-1 p-1 text-xs rounded ${\n isDarkMode \n ? 'bg-gray-700 hover:bg-gray-600 text-gray-300' \n : 'bg-gray-200 hover:bg-gray-300 text-gray-600'\n }`}\n title=\"Edit API Key\"\n >\n Edit Key\n \n \n {isEditing ? 'Exit Edit Mode' : 'Edit Profile'}\n \n

\n ) : (\n setShowApiInput(true)}\n className={`px-2 py-1 text-xs rounded ${\n isDarkMode \n ? 'bg-blue-700 hover:bg-blue-600 text-white' \n : 'bg-blue-600 hover:bg-blue-500 text-white'\n }`}\n >\n Edit Your Profile\n \n )}\n \n ) : (\n

\n setInputKey(e.target.value)}\n className={`px-2 py-1 text-xs rounded ${\n isDarkMode \n ? 'bg-gray-700 text-white border border-gray-600' \n : 'bg-white text-gray-700 border border-gray-300'\n }`}\n />\n \n Get Key\n \n \n \n Save\n \n setShowApiInput(false)}\n className={`px-2 py-1 text-xs rounded ${\n isDarkMode \n ? 'bg-gray-700 hover:bg-gray-600 text-white' \n : 'bg-gray-300 hover:bg-gray-400 text-gray-700'\n }`}\n >\n Cancel\n \n

\n )}\n

\n );\n}",[],[203,209,225],{"_105":232,"_96":233,"_160":234,"_162":210,"_163":143,"_164":165,"_166":119,"_107":235,"_101":32,"_168":219,"_170":236,"_171":22,"_172":-5,"_173":237,"_100":238},"eb05f532-4555-11f0-973d-76b3cceeab13","Editor.tsx","75398473-11d9-4a54-8776-94bc103df0f0",["D",1749489576590],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\n\ninterface EditorProps {\n value: string;\n onChange: (value: string) => void;\n disabled?: boolean;\n key?: string; // Added key prop to help force re-render when needed\n}\n\n// Simple text area-based editor component\nexport default function Editor({ value, onChange, disabled = false, key }: EditorProps) {\n // Use a ref to track controlled textarea\n const textareaRef = useRef(null);\n \n // Local state to manage the editor value\n const [localValue, setLocalValue] = useState(value || '');\n \n // Track internal updates to prevent circular issues\n const isUpdatingRef = useRef(false);\n \n // Debug logging\n useEffect(() => {\n console.log(`[TEXT_EDITOR] Received value of length: ${value?.length || 0}`);\n \n // Skip if we're in the middle of an internal update\n if (isUpdatingRef.current) {\n console.log(`[TEXT_EDITOR] Skipping update because we're already updating`);\n return;\n }\n \n // IMPORTANT: Update local value when prop changes and it's different from current\n if (value !== undefined && value !== localValue) {\n console.log(`[TEXT_EDITOR] Updating local value from props (${value.length} bytes)`);\n isUpdatingRef.current = true;\n setLocalValue(value);\n setTimeout(() => {\n isUpdatingRef.current = false;\n }, 0);\n }\n }, [value]);\n \n // Handle content changes\n const handleChange = (e: React.ChangeEvent) => {\n if (disabled) return;\n \n const newValue = e.target.value;\n console.log(`[TEXT_EDITOR] Content changed: ${newValue.length} bytes`);\n \n // Set flag to prevent circular updates\n isUpdatingRef.current = true;\n \n // Update local state\n setLocalValue(newValue);\n \n // Propagate changes to parent through onChange callback\n onChange(newValue);\n \n // Reset flag after a small timeout to allow React to process updates\n setTimeout(() => {\n isUpdatingRef.current = false;\n }, 0);\n };\n \n return (\n

\n \n

\n );\n}",[],[203,209,233],{"_105":240,"_96":241,"_160":242,"_162":210,"_163":143,"_164":165,"_166":119,"_107":243,"_101":32,"_168":219,"_170":244,"_171":22,"_172":-5,"_173":245,"_100":246},"eb05f834-4555-11f0-973d-76b3cceeab13","HomePage.tsx","3d48a8ce-303a-465a-ba35-fae0332b890e",["D",1749489576590],"/** @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 const logoUrl = \"https://dcm31--316ac864ae3647a9ae12e7f1664969de.web.val.run/image/image_1747183081756_Black%20Lipstick%20Kiss%20on%20Checkerboard.png\";\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}",[],[203,209,241],{"_105":248,"_96":249,"_160":250,"_162":210,"_163":143,"_164":165,"_166":119,"_107":251,"_101":32,"_168":219,"_170":252,"_171":22,"_172":-5,"_173":253,"_100":254},"eb06036a-4555-11f0-973d-76b3cceeab13","MarkdownPreview.tsx","b4d92afc-fea3-4049-91c4-9c03a322fa9a",["D",1749489576590],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface MarkdownPreviewProps {\n content: string;\n}\n\n// Simple markdown preview component\n// This is a placeholder - in a full implementation you'd use a markdown renderer library\nexport default function MarkdownPreview({ content }: MarkdownPreviewProps) {\n // Format the markdown with basic styling\n const formatMarkdown = (markdown: string): string => {\n // Replace headers\n let formatted = markdown\n .replace(/^# (.+)$/gm, '

$1

')\n .replace(/^## (.+)$/gm, '

$1

')\n .replace(/^### (.+)$/gm, '

$1

');\n \n // Replace bold and italic\n formatted = formatted\n .replace(/\\*\\*(.+?)\\*\\*/g, '$1')\n .replace(/\\*(.+?)\\*/g, '$1');\n \n // Replace code blocks\n formatted = formatted.replace(/```(.+?)```/gs, '

$1

');\n \n // Replace inline code\n formatted = formatted.replace(/`(.+?)`/g, '$1');\n \n // Replace lists\n formatted = formatted.replace(/^- (.+)$/gm, '

');\n \n // Replace paragraphs\n formatted = formatted.replace(/^(?!<[h|l|p])(.+)$/gm, '

');\n \n return formatted;\n };\n \n return (\n

\n );\n}",[],[203,209,249],{"_105":256,"_96":257,"_160":258,"_162":210,"_163":143,"_164":165,"_166":119,"_107":259,"_101":32,"_168":219,"_170":260,"_171":22,"_172":-5,"_173":261,"_100":262},"eb06059a-4555-11f0-973d-76b3cceeab13","MoiEditorModal.tsx","5655133d-0ebf-4ae9-974d-cc16396e28cf",["D",1749489576590],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport QuickEditor from \"./QuickEditor.tsx\";\nimport MarkdownPreview from \"./MarkdownPreview.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 buildMoiUrl?: string;\n privacy?: string;\n}\n\ninterface MoiEditorModalProps {\n val: Val | null;\n moiContent: string;\n onContentChange: (content: string) => void;\n onSave: () => void;\n onClose: () => void;\n saving: boolean;\n saveError: string | null;\n saveSuccess: boolean;\n hasMoiFile: boolean;\n loadingItem: boolean;\n itemError: string | null;\n username: string;\n apiToken: string;\n disabled: boolean;\n onOpenVal?: (val: Val) => void;\n}\n\n/**\n * Modal component for editing moi.md files\n */\nconst MoiEditorModal: React.FC = ({\n val,\n moiContent,\n onContentChange,\n onSave,\n onClose,\n saving,\n saveError,\n saveSuccess,\n hasMoiFile,\n loadingItem,\n itemError,\n username,\n apiToken,\n disabled,\n onOpenVal\n}) => {\n // Reference to the editor component to get current content\n const editorRef = useRef(null);\n \n // Local state for tracking edited content\n const [editedContent, setEditedContent] = useState(null);\n const [isEditorReady, setIsEditorReady] = useState(false);\n\n // Debug our moiContent on mount\n useEffect(() => {\n console.log(`[MODAL] Initial moiContent length: ${moiContent?.length || 0}`);\n if (moiContent) {\n console.log(`[MODAL] Content preview: ${moiContent.substring(0, 100)}...`);\n }\n \n // Track when editor is ready (after initial render)\n if (moiContent) {\n setTimeout(() => {\n setIsEditorReady(true);\n }, 500);\n }\n }, [moiContent]);\n \n // Generate an editor key for forcing re-render\n const editorKey = val ? `editor-${val.id}-${Date.now()}` : 'editor-null';\n \n // Stop scroll propagation to prevent scrolling the background when modal is open\n useEffect(() => {\n const originalStyle = window.getComputedStyle(document.body).overflow;\n document.body.style.overflow = 'hidden';\n \n return () => {\n document.body.style.overflow = originalStyle;\n };\n }, []);\n \n // Handle escape key to close the modal\n useEffect(() => {\n const handleEscapeKey = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n // Don't sync and close if we're in the middle of saving\n if (!saving) {\n // When closing with escape, make sure we sync the content first\n syncAndClose();\n }\n }\n };\n \n window.addEventListener('keydown', handleEscapeKey);\n return () => {\n window.removeEventListener('keydown', handleEscapeKey);\n };\n }, [onClose, saving]);\n \n // Make sure to sync content before closing\n const syncAndClose = () => {\n if (!saving) {\n if (editedContent !== null) {\n // Make sure to update parent with latest content before closing\n console.log(`[MODAL] Syncing edited content before close: ${editedContent.length} bytes`);\n onContentChange(editedContent);\n } else if (editorRef.current?.getMarkdownContent) {\n try {\n const finalContent = editorRef.current.getMarkdownContent();\n console.log(`[MODAL] Syncing final content from editor: ${finalContent.length} bytes`);\n onContentChange(finalContent);\n } catch (error) {\n console.error('[MODAL] Error getting final content:', error);\n }\n }\n onClose();\n }\n };\n \n // Handle opening the val in a new tab\n const handleOpenVal = () => {\n if (val && onOpenVal) {\n onOpenVal(val);\n } else if (val) {\n window.open(`https://www.val.town/x/${val.username}/${val.name}/code`, '_blank');\n }\n };\n\n // Function to get the current content from editor\n const getCurrentContent = () => {\n // Access the editor via ref\n if (editorRef.current?.getMarkdownContent) {\n try {\n const content = editorRef.current.getMarkdownContent();\n console.log(`[MODAL] getMarkdownContent returned ${content.length} bytes`);\n return content;\n } catch (error) {\n console.error('[MODAL] Error getting markdown content:', error);\n }\n }\n \n // If we have edited content, use that\n if (editedContent !== null) {\n console.log(`[MODAL] Using editedContent: ${editedContent.length} bytes`);\n return editedContent;\n }\n \n console.log(`[MODAL] Falling back to original moiContent: ${moiContent.length} bytes`);\n return moiContent; // Fallback\n };\n\n // Handle save button press - this is where we explicitly sync content\n const handleSave = () => {\n try {\n // Get the latest content from the editor\n const currentContent = getCurrentContent();\n console.log(`[MODAL] Saving content: ${currentContent.substring(0, 50)}...`);\n \n // Always make a deep copy of the content to avoid reference issues\n const contentCopy = String(currentContent);\n \n // Update parent with current content before saving\n onContentChange(contentCopy);\n \n // Trigger save\n onSave();\n } catch (error) {\n console.error('[MODAL] Error during save:', error);\n }\n };\n\n // Handle local content changes - store them and propagate immediately to parent\n const handleLocalContentChange = (content: string) => {\n if (!saving && content) {\n console.log(`[MODAL] Local content changed: ${content.length} bytes`);\n \n // Store locally\n setEditedContent(content);\n \n // Also send to parent component to ensure it's always up to date\n // This is critical - the parent needs to have the latest content \n onContentChange(content);\n } else if (saving) {\n console.log(`[MODAL] Ignoring content change during save`);\n }\n };\n \n return (\n

\n {/* Modal container */}\n

\n {/* Modal header */}\n

\n {val ? (\n <>\n \n {val.name}\n \n - moi.md\n \n ) : (\n 'Editor'\n )}\n

\n \n {/* Tags for file status */}\n {val && (\n

\n {hasMoiFile ? (\n \n moi.md exists\n \n ) : (\n \n new file\n \n )}\n \n \n {val.privacy}\n \n

\n )}\n

\n \n

\n {/* Open Val link */}\n {val && (\n { e.preventDefault(); handleOpenVal(); }}\n className=\"text-sm text-blue-600 hover:text-blue-800 flex items-center\"\n title=\"Open val in new tab\"\n >\n Open Val\n \n \n )}\n \n {/* Close button - disabled during saving */}\n \n \n \n

\n \n {/* Controls */}\n

\n {editedContent !== null ? 'Unsaved changes' : 'No changes'}\n

\n \n \n {saving ? \"Saving...\" : \"Save\"}\n \n

\n \n {/* Loading indicator */}\n {loadingItem && (\n

\n Loading content...\n

\n )}\n \n {/* Error message */}\n {itemError && (\n

Error loading content

{itemError}

\n )}\n \n {/* Save Error message */}\n {saveError && (\n

Error saving content

{saveError}

\n )}\n \n {/* Save Success message */}\n {saveSuccess && (\n

Success

moi.md saved successfully!

\n )}\n \n {/* Editor section */}\n

\n \n

\n \n {/* Footer with note about privacy */}\n {val && val.privacy !== \"public\" && (\n

\n Note: Only Public vals will appear on your build.moi profile.\n

\n )}\n

\n );\n};\n\nexport default MoiEditorModal;",[],[203,209,257],{"_105":264,"_96":265,"_160":266,"_162":210,"_163":143,"_164":102,"_166":22,"_107":267,"_101":32,"_168":219,"_170":268,"_171":22,"_172":-5,"_173":269,"_100":270},"0f7dabf8-4556-11f0-b7e8-76b3cceeab13","PostPage.tsx","0f7dacc0-4556-11f0-b7e8-76b3cceeab13",["D",1749489637777],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface PostPageProps {\n username: string;\n valName: string;\n isDarkMode: boolean;\n}\n\ninterface ValData {\n id: string;\n name: string;\n description?: string;\n moiConfig?: {\n title?: string;\n description?: string;\n imageUrl?: string;\n url?: string;\n author?: string;\n tags?: string[];\n };\n httpEndpoint?: string;\n url?: string;\n}\n\nexport function PostPage({ username, valName, isDarkMode }: PostPageProps) {\n const [valData, setValData] = useState(null);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(null);\n\n useEffect(() => {\n async function fetchValData() {\n try {\n setLoading(true);\n setError(null);\n\n // Fetch the user's profile data to find the specific val\n const response = await fetch(`/api/profile/${username}`);\n if (!response.ok) {\n throw new Error(`Failed to fetch profile data: ${response.statusText}`);\n }\n\n const profileData = await response.json();\n \n // Find the val with the matching name\n const val = profileData.valResults?.find((v: any) => v.name === valName);\n if (!val) {\n throw new Error(`Val \"${valName}\" not found`);\n }\n\n setValData(val);\n } catch (err) {\n console.error('Error fetching val data:', err);\n setError(err instanceof Error ? err.message : 'Failed to load val data');\n } finally {\n setLoading(false);\n }\n }\n\n fetchValData();\n }, [username, valName]);\n\n if (loading) {\n return (\n

Loading post...

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

{error}

\n \n ← Back to @{username}\n \n

\n );\n }\n\n if (!valData) {\n return (\n

Val not found

\n \n ← Back to @{username}\n \n

\n );\n }\n\n // Get the display data from moi.md config or fallback to val data\n const displayTitle = valData.moiConfig?.title || valData.name;\n const displayDescription = valData.moiConfig?.description || valData.description || '';\n const displayAuthor = valData.moiConfig?.author || username;\n const displayTags = valData.moiConfig?.tags || [];\n const iframeUrl = valData.moiConfig?.url || valData.httpEndpoint;\n \n // Get share URL\n const shareUrl = `${window.location.origin}/@${username}/${valName}`;\n\n return (\n

\n {/* Post Header */}\n

{displayTitle}

\n by @{displayAuthor}\n

\n {displayDescription && (\n

\n {displayDescription}\n

\n )}\n {displayTags.length > 0 && (\n

\n {displayTags.map((tag, index) => (\n \n {tag}\n \n ))}\n

\n )}\n

\n \n {/* Share section */}\n

\n \n Share this post:\n \n {\n navigator.clipboard.writeText(shareUrl);\n // Could add a toast notification here\n }}\n className={`px-3 py-1 text-sm rounded ${\n isDarkMode \n ? 'bg-gray-800 hover:bg-gray-700 text-gray-300' \n : 'bg-gray-100 hover:bg-gray-200 text-gray-700'\n }`}\n >\n Copy Link\n \n \n {shareUrl}\n \n

\n\n {/* Iframe Container */}\n

\n {iframeUrl ? (\n \n ) : (\n

\n This val doesn't have a live URL configured.\n

\n \n View source on Val Town →\n \n

\n )}\n

\n );\n}",[],[203,209,265],{"_105":272,"_96":273,"_160":274,"_162":210,"_163":143,"_164":165,"_166":119,"_107":275,"_101":32,"_168":219,"_170":276,"_171":22,"_172":-5,"_173":277,"_100":278},"eb060ff4-4555-11f0-973d-76b3cceeab13","ProfileTabs.tsx","6131aedd-9da0-45bb-b8cb-937d91e4ad47",["D",1749489576590],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { ValGrid } from \"./ValGrid.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 buildMoiUrl?: string;\n privacy?: string;\n}\n\ninterface TabInfo {\n name: string;\n vals: Val[];\n}\n\ninterface TabContentProps {\n activeTab: string;\n allVals: Val[];\n customTabs: TabInfo[];\n isDarkMode: boolean;\n isEditing: boolean;\n onEditVal?: (val: Val) => void;\n setActiveTab: (tab: string) => void;\n}\n\n/**\n * TabContent component - handles filtering vals based on active tab and displaying them\n * This component abstracts the tab content rendering logic from UserProfile.tsx\n */\nexport function TabContent({ \n activeTab, \n allVals, \n customTabs, \n isDarkMode, \n isEditing, \n onEditVal,\n setActiveTab\n}: TabContentProps) {\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, show vals with moi.md that aren't excluded from posts\n return allVals.filter(val => \n val.hasMoiMd && \n (!val.moiConfig?.excludeFromPosts || val.moiConfig?.excludeFromPosts === false)\n );\n } else if (activeTab === 'code') {\n // For code tab, show all vals\n return allVals;\n } else {\n // For custom tabs, find the tab and return its vals\n const customTab = customTabs.find(tab => tab.name === activeTab);\n return customTab ? customTab.vals : [];\n }\n };\n \n // Get filtered vals based on active tab\n const filteredVals = getFilteredVals();\n \n // Display a message if no content is found for the active tab\n const showNoContentMessage = filteredVals.length === 0 && allVals.length > 0;\n\n if (showNoContentMessage) {\n return (\n

\n {activeTab === 'posts' \n ? \"No posts found. Add a moi.md file to your vals to display them here.\"\n : activeTab === 'code'\n ? \"No code found.\"\n : `No content found for the ${activeTab} tab.`\n }\n

\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\n // Render the ValGrid with the filtered vals\n return (\n

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

\n );\n}\n\n/**\n * TabNavigation component - handles rendering the tabs navigation\n */\nexport function TabNavigation({ \n activeTab, \n setActiveTab, \n customTabs, \n allValsCount, \n isDarkMode \n}: {\n activeTab: string;\n setActiveTab: (tab: string) => void;\n customTabs: TabInfo[];\n allValsCount: number;\n isDarkMode: boolean;\n}) {\n // Choose the right background color based on dark/light mode\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\n return (\n

\n setActiveTab('posts')}\n >\n Posts\n \n \n {/* Custom Tabs - Rendered dynamically */}\n {customTabs.map((tab) => (\n setActiveTab(tab.name)}\n >\n {tab.name} ({tab.vals.length})\n \n ))}\n \n setActiveTab('code')}\n >\n Code ({allValsCount})\n \n

\n );\n}",[],[203,209,273],{"_105":280,"_96":281,"_160":282,"_162":210,"_163":143,"_164":165,"_166":119,"_107":283,"_101":32,"_168":219,"_170":284,"_171":22,"_172":-5,"_173":285,"_100":286},"eb061468-4555-11f0-973d-76b3cceeab13","QuickEditor.tsx","4827850e-6029-49c6-b43a-6d580fe488db",["D",1749489576590],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from \"https://esm.sh/react@18.2.0\";\nimport Editor from \"./Editor.tsx\";\n\ninterface QuickEditorProps {\n value: string;\n onChange: (value: string) => void;\n disabled?: boolean;\n username?: string;\n valId?: string;\n apiToken?: string;\n key?: string; // For forced re-rendering\n showAdvancedByDefault?: boolean;\n isSaving?: boolean; // Added prop to track saving state\n}\n\n// Interface for the editor's exposed methods\nexport interface QuickEditorRef {\n getMarkdownContent: () => string;\n}\n\n// Simple metadata structure\ninterface Metadata {\n title: string;\n description: string;\n imageUrl?: string;\n tags: string[];\n author?: string;\n url?: string;\n tier?: number | string;\n tabs?: string[];\n excludeFromPosts?: boolean;\n content: string;\n}\n\n// Using forwardRef to expose the editor's methods to parent components\nconst QuickEditor = forwardRef((props, ref) => {\n const {\n value,\n onChange,\n disabled = false,\n username = '',\n valId = '',\n apiToken = '',\n key,\n showAdvancedByDefault = false,\n isSaving = false\n } = props;\n\n // Track whether internal changes are happening\n const isUpdating = useRef(false);\n const initialized = useRef(false);\n \n // Local editor state - keeps the content in local state only until explicitly saved\n const [metadata, setMetadata] = useState({\n title: '',\n description: '',\n imageUrl: '',\n tags: ['val-town'],\n author: username || '',\n url: '',\n tier: undefined,\n tabs: [],\n excludeFromPosts: false,\n content: ''\n });\n \n const [tagsInput, setTagsInput] = useState('val-town');\n const [tabsInput, setTabsInput] = useState('');\n const [showAdvanced, setShowAdvanced] = useState(showAdvancedByDefault);\n \n // Only parse the value on initial load or when it clearly changes from outside\n useEffect(() => {\n // Skip if we're in the middle of saving or updating internal state\n if (isSaving || isUpdating.current) {\n console.log(`[EDITOR] Skipping parse because isSaving=${isSaving} or isUpdating=${isUpdating.current}`);\n return;\n }\n \n if (!value) {\n console.log(`[EDITOR] Skipping parse because value is empty`);\n return;\n }\n \n // Don't re-parse if we've already initialized and are actively editing\n if (initialized.current) {\n console.log(`[EDITOR] Skipping parse because already initialized`);\n return;\n }\n \n console.log(`[EDITOR] Parsing markdown of length: ${value.length}`);\n console.log(`[EDITOR] Content to parse: ${value.substring(0, 100)}...`);\n \n try {\n const parsed = parseMdContent(value);\n \n // First, mark updating to prevent triggering effects\n isUpdating.current = true;\n \n // Update all the state fields\n setMetadata({\n title: parsed.title || '',\n description: parsed.description || '',\n imageUrl: parsed.imageUrl || '',\n url: parsed.url || '',\n tags: parsed.tags || ['val-town'],\n author: parsed.author || username || '',\n tier: parsed.tier,\n tabs: parsed.tabs || [],\n excludeFromPosts: parsed.excludeFromPosts || false,\n content: parsed.content || ''\n });\n \n setTagsInput((parsed.tags || ['val-town']).join(', '));\n setTabsInput((parsed.tabs || []).join(', '));\n \n // We're initialized\n initialized.current = true;\n \n // Done updating\n isUpdating.current = false;\n \n console.log(`[EDITOR] Parsed content - title: ${parsed.title}, description: ${parsed.description}`);\n \n } catch (error) {\n console.error('[EDITOR] Error parsing markdown:', error);\n isUpdating.current = false;\n }\n }, [value, username, isSaving]);\n \n // Function to generate markdown from current metadata state\n const generateMarkdown = (data: Metadata): string => {\n console.log(\"[EDITOR] Generating markdown with metadata:\", {\n title: data.title,\n description: data.description ? data.description.substring(0, 30) + \"...\" : \"\",\n tags: data.tags.length\n });\n \n let frontmatter = '---\\n';\n frontmatter += `title: \"${data.title}\"\\n`;\n frontmatter += `description: \"${data.description}\"\\n`;\n \n if (data.imageUrl) {\n frontmatter += `imageUrl: \"${data.imageUrl}\"\\n`;\n }\n \n if (data.url) {\n frontmatter += `url: \"${data.url}\"\\n`;\n }\n \n if (data.author) {\n frontmatter += `author: \"${data.author}\"\\n`;\n }\n \n frontmatter += `tags: ${JSON.stringify(data.tags)}\\n`;\n \n // Add tier if provided\n if (data.tier !== undefined && data.tier !== '') {\n // Convert to number if possible\n const tierValue = parseFloat(String(data.tier));\n if (!isNaN(tierValue)) {\n frontmatter += `tier: ${tierValue}\\n`;\n }\n }\n \n // Add tabs if provided\n if (data.tabs && data.tabs.length > 0) {\n frontmatter += `tabs: ${JSON.stringify(data.tabs)}\\n`;\n }\n \n // Add excludeFromPosts if true\n if (data.excludeFromPosts === true) {\n frontmatter += `excludeFromPosts: true\\n`;\n }\n \n frontmatter += '---\\n\\n';\n \n return frontmatter + data.content;\n };\n \n // Expose the getMarkdownContent method to parent components via ref\n useImperativeHandle(ref, () => ({\n getMarkdownContent: () => {\n // Generate from current metadata state\n const currentMetadata = { ...metadata };\n console.log(\"[EDITOR] Generating content with metadata:\", {\n title: currentMetadata.title,\n description: currentMetadata.description ? currentMetadata.description.substring(0, 30) + \"...\" : \"\",\n content: currentMetadata.content ? currentMetadata.content.substring(0, 30) + \"...\" : \"\"\n });\n \n const content = generateMarkdown(currentMetadata);\n console.log(`[EDITOR] Generated markdown content: ${content.length} bytes`);\n console.log(`[EDITOR] Content preview: ${content.substring(0, 100)}...`);\n return content;\n }\n }));\n \n // Update a field in the metadata - local state only\n const updateField = (field: keyof Metadata, value: string | string[] | number | boolean) => {\n // Don't update if disabled or in saving mode\n if (disabled || isSaving) return;\n \n console.log(`[EDITOR] Updating field ${field}:`, \n typeof value === 'string' && value.length > 30 \n ? value.substring(0, 30) + \"...\" \n : value\n );\n \n // Update the metadata state\n setMetadata(prev => {\n const newMetadata = { ...prev, [field]: value };\n \n // Important: when any field changes, regenerate the complete markdown and propagate upward\n // This ensures the parent always has the latest complete content, not just the individual field\n if (field === 'description') {\n // Special debug for description field updates\n console.log(`[EDITOR] Updating field description: ${value}`);\n }\n \n // Don't update content upward if we're in the middle of processing\n if (!isUpdating.current && !isSaving) {\n const completeMd = generateMarkdown(newMetadata);\n onChange(completeMd);\n }\n \n return newMetadata;\n });\n };\n \n // Handle tags input change\n const handleTagsChange = (value: string) => {\n // Don't update if disabled or in saving mode\n if (disabled || isSaving) return;\n \n setTagsInput(value);\n \n const tags = value\n .split(',')\n .map(tag => tag.trim())\n .filter(tag => tag.length > 0);\n \n updateField('tags', tags);\n };\n \n // Handle tabs input change\n const handleTabsChange = (value: string) => {\n // Don't update if disabled or in saving mode\n if (disabled || isSaving) return;\n \n setTabsInput(value);\n \n const tabs = value\n .split(',')\n .map(tab => tab.trim())\n .filter(tab => tab.length > 0);\n \n updateField('tabs', tabs);\n };\n \n // Toggle advanced options\n const toggleAdvanced = () => {\n // Don't toggle if disabled or in saving mode\n if (disabled || isSaving) return;\n \n setShowAdvanced(prev => !prev);\n };\n \n // Handle content change from the editor - update local state only\n const handleContentChange = (content: string) => {\n // Don't update if disabled or in saving mode\n if (disabled || isSaving) return;\n \n updateField('content', content);\n };\n \n // Determine if editor is in read-only mode\n const isReadOnly = disabled || isSaving;\n \n return (\n

\n {/* Basic fields */}\n

\n \n Title\n \n updateField('title', e.target.value)}\n className={`w-full p-2 border rounded-md ${isReadOnly ? 'bg-gray-100' : ''}`}\n placeholder=\"Val title\"\n disabled={isReadOnly}\n />\n

\n \n

\n \n Description\n \n updateField('description', e.target.value)}\n className={`w-full p-2 border rounded-md ${isReadOnly ? 'bg-gray-100' : ''}`}\n placeholder=\"Brief description of this val\"\n disabled={isReadOnly}\n />\n

\n \n

\n \n Image URL (Optional)\n \n updateField('imageUrl', e.target.value)}\n className={`w-full p-2 border rounded-md ${isReadOnly ? 'bg-gray-100' : ''}`}\n placeholder=\"https://example.com/image.png\"\n disabled={isReadOnly}\n />\n

\n \n

\n \n Tags (Comma separated)\n \n handleTagsChange(e.target.value)}\n className={`w-full p-2 border rounded-md ${isReadOnly ? 'bg-gray-100' : ''}`}\n placeholder=\"val-town, tool, utility\"\n disabled={isReadOnly}\n />\n

\n \n {/* Advanced options toggle */}\n

\n \n {showAdvanced ? '▼' : '►'} {showAdvanced ? 'Hide' : 'Show'} Advanced Options\n \n

\n \n {/* Advanced options */}\n {showAdvanced && (\n

\n \n Author (Optional)\n \n updateField('author', e.target.value)}\n className={`w-full p-2 border rounded-md ${isReadOnly ? 'bg-gray-100' : ''}`}\n placeholder={username || \"username\"}\n disabled={isReadOnly}\n />\n

\n \n

\n \n URL (Optional)\n \n updateField('url', e.target.value)}\n className={`w-full p-2 border rounded-md ${isReadOnly ? 'bg-gray-100' : ''}`}\n placeholder=\"Leave blank unless you have a specific endpoint URL\"\n disabled={isReadOnly}\n />\n

\n \n

\n \n Priority Tier (Optional, lower numbers appear first)\n \n updateField('tier', e.target.value)}\n className={`w-full p-2 border rounded-md ${isReadOnly ? 'bg-gray-100' : ''}`}\n placeholder=\"1.0\"\n disabled={isReadOnly}\n />\n

\n Determines display order in build.moi. Example: 1, 2.5, 3\n

\n \n

\n \n Tabs (Comma separated, optional)\n \n handleTabsChange(e.target.value)}\n className={`w-full p-2 border rounded-md ${isReadOnly ? 'bg-gray-100' : ''}`}\n placeholder=\"Projects, Tutorials, Demos\"\n disabled={isReadOnly}\n />\n

\n Custom tab categories for build.moi navigation\n

\n \n

\n updateField('excludeFromPosts', e.target.checked)}\n className={`h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500 ${isReadOnly ? 'bg-gray-100' : ''}`}\n disabled={isReadOnly}\n />\n \n Exclude from main Posts tab (but keep in custom tabs)\n \n

\n When checked, this content will only appear in custom tabs and the Code tab, not in the main Posts tab\n

\n )}\n \n {/* Content editor */}\n

\n \n Content\n \n \n

\n \n {/* Warning if saving is in progress */}\n {isSaving && (\n

\n Save in progress... Please do not close this window until saving completes.\n

\n )}\n

\n );\n});\n\n// Helper to parse Markdown content\nconst parseMdContent = (markdown: string): {\n title: string;\n description: string;\n imageUrl?: string;\n url?: string;\n author?: string;\n tags: string[];\n tier?: number | string;\n tabs?: string[];\n excludeFromPosts?: boolean;\n content: string;\n} => {\n // Default result\n const result = {\n title: '',\n description: '',\n imageUrl: undefined,\n url: undefined,\n author: undefined,\n tags: ['val-town'],\n tier: undefined,\n tabs: undefined,\n excludeFromPosts: false,\n content: markdown\n };\n \n // Check if content has frontmatter\n if (!markdown.startsWith('---')) {\n return result;\n }\n \n // Find the end of frontmatter\n const endIndex = markdown.indexOf('---', 3);\n if (endIndex === -1) {\n return result;\n }\n \n // Extract frontmatter and content\n const frontmatterText = markdown.substring(3, endIndex).trim();\n const content = markdown.substring(endIndex + 3).trim();\n \n // Parse frontmatter\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 key-value pair\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 // Remove quotes if present\n if ((value.startsWith('\"') && value.endsWith('\"')) || \n (value.startsWith(\"'\") && value.endsWith(\"'\"))) {\n value = value.substring(1, value.length - 1);\n }\n \n // Handle different fields\n switch (key) {\n case 'title':\n result.title = value;\n break;\n case 'description':\n result.description = value;\n break;\n case 'imageUrl':\n result.imageUrl = value;\n break;\n case 'url':\n result.url = value;\n break;\n case 'author':\n result.author = value;\n break;\n case 'tags':\n // Parse tags array\n if (value.startsWith('[') && value.endsWith(']')) {\n try {\n result.tags = JSON.parse(value);\n } catch (e) {\n // Fallback to simple parsing\n const tagStr = value.substring(1, value.length - 1);\n result.tags = tagStr\n .split(',')\n .map(tag => {\n tag = tag.trim();\n if ((tag.startsWith('\"') && tag.endsWith('\"')) || \n (tag.startsWith(\"'\") && tag.endsWith(\"'\"))) {\n return tag.substring(1, tag.length - 1);\n }\n return tag;\n })\n .filter(tag => tag.length > 0);\n }\n }\n break;\n case 'tier':\n // Try to parse as number\n const numValue = parseFloat(value);\n result.tier = isNaN(numValue) ? value : numValue;\n break;\n case 'tabs':\n // Parse tabs array\n if (value.startsWith('[') && value.endsWith(']')) {\n try {\n result.tabs = JSON.parse(value);\n } catch (e) {\n // Fallback to simple parsing\n const tabStr = value.substring(1, value.length - 1);\n result.tabs = tabStr\n .split(',')\n .map(tab => {\n tab = tab.trim();\n if ((tab.startsWith('\"') && tab.endsWith('\"')) || \n (tab.startsWith(\"'\") && tab.endsWith(\"'\"))) {\n return tab.substring(1, tab.length - 1);\n }\n return tab;\n })\n .filter(tab => tab.length > 0);\n }\n }\n break;\n case 'excludeFromPosts':\n result.excludeFromPosts = value.toLowerCase() === 'true';\n break;\n }\n }\n \n result.content = content;\n return result;\n};\n\nexport default QuickEditor;",[],[203,209,281],{"_105":288,"_96":289,"_160":290,"_162":210,"_163":143,"_164":165,"_166":119,"_107":291,"_101":32,"_168":219,"_170":292,"_171":22,"_172":-5,"_173":293,"_100":294},"eb0621e2-4555-11f0-973d-76b3cceeab13","SwipeViewer.tsx","052310f6-094f-49e5-8e50-207370d19f1b",["D",1749489576590],"/** @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\";\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); // Default: Swipe Mode\n const [loading, setLoading] = useState>({});\n const [debugInfo, setDebugInfo] = useState(\"\");\n const [horizontalSwipeActive, setHorizontalSwipeActive] = useState(false);\n const [showSwipeIndicator, setShowSwipeIndicator] = useState(true);\n \n const touchStartRef = useRef({ x: 0, y: 0, time: 0 });\n const touchMoveRef = useRef({ x: 0, y: 0 });\n const containerRef = useRef(null);\n const touchActiveRef = useRef(false);\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 = (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 // Show swipe indicator for a few seconds\n useEffect(() => {\n if (showSwipeIndicator) {\n const timer = setTimeout(() => {\n setShowSwipeIndicator(false);\n }, 3000);\n \n return () => clearTimeout(timer);\n }\n }, [showSwipeIndicator]);\n\n // Hide swipe indicator when entering interact mode\n useEffect(() => {\n if (isInteractMode) {\n setShowSwipeIndicator(false);\n } else {\n // Show swipe indicator again when returning to swipe mode\n setShowSwipeIndicator(true);\n \n // Hide it after 3 seconds\n const timer = setTimeout(() => {\n setShowSwipeIndicator(false);\n }, 3000);\n \n return () => clearTimeout(timer);\n }\n }, [isInteractMode]);\n\n // Listen for ESC key to return to swipe mode on desktop\n useEffect(() => {\n const handleKeyDown = (e: KeyboardEvent) => {\n if (e.key === 'Escape' && isInteractMode) {\n debugLog(\"ESC key pressed, returning to swipe mode\");\n setIsInteractMode(false);\n }\n };\n\n window.addEventListener('keydown', handleKeyDown);\n\n return () => {\n window.removeEventListener('keydown', handleKeyDown);\n };\n }, [isInteractMode]);\n\n // Function to force the iframe to display at the top\n const fixPositioning = useCallback(() => {\n if (typeof window !== \"undefined\") {\n debugLog(`Window: ${window.innerWidth}x${window.innerHeight}, Scroll: ${window.scrollX},${window.scrollY}`);\n \n // Prevent scrolling\n document.documentElement.style.overflow = 'hidden';\n document.body.style.overflow = 'hidden';\n \n // Position fixed approach\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 // Force scroll to top (multiple methods for cross-browser support)\n window.scrollTo(0, 0);\n \n // Set viewport height\n const vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty(\"--vh\", `${vh}px`);\n \n debugLog(`Set viewport height: --vh = ${vh}px`);\n }\n }, []);\n\n // Effect to handle viewport height on mobile\n useEffect(() => {\n debugLog(\"Component mounted\");\n isMountedRef.current = true;\n \n // Initial setup for viewport\n const cleanup = setupViewportHeight();\n \n // Initial position fix\n fixPositioning();\n \n // Set up event listeners for orientation changes\n window.addEventListener('resize', fixPositioning);\n window.addEventListener('orientationchange', fixPositioning);\n \n // Also run on a delay to catch any potential post-render movement\n const timeout1 = setTimeout(fixPositioning, 50);\n const timeout2 = setTimeout(fixPositioning, 200);\n const timeout3 = setTimeout(fixPositioning, 500);\n const timeout4 = setTimeout(fixPositioning, 1000);\n \n // Mutation observer to detect DOM changes that might affect position\n const observer = new MutationObserver(() => {\n if (isMountedRef.current) {\n fixPositioning();\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', fixPositioning);\n window.removeEventListener('orientationchange', fixPositioning);\n \n clearTimeout(timeout1);\n clearTimeout(timeout2);\n clearTimeout(timeout3);\n clearTimeout(timeout4);\n \n observer.disconnect();\n \n // Restore body styling when component unmounts\n document.documentElement.style.overflow = '';\n document.body.style.overflow = '';\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 debugLog(\"Component unmounted\");\n };\n }, [fixPositioning]);\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\n fixPositioning();\n }, [currentIndex, vals, fixPositioning]);\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();\n }, [fixPositioning]);\n\n const handleIframeError = useCallback((valId: string) => {\n debugLog(`Iframe error: ${valId}`);\n setLoading(prev => ({ ...prev, [valId]: false }));\n }, []);\n\n // Bounce effect for reaching the end of content\n const bounceEffect = useCallback((direction, axis = 'vertical') => {\n if (axis === 'vertical' && containerRef.current) {\n containerRef.current.style.transition = \"transform 0.3s cubic-bezier(.25,.75,.5,1.25)\";\n containerRef.current.style.transform = `translateY(${direction * -20}px)`;\n setTimeout(() => {\n if (containerRef.current) {\n containerRef.current.style.transition = \"transform 0.2s cubic-bezier(.25,.75,.5,1.25)\";\n containerRef.current.style.transform = \"translateY(0)\";\n }\n }, 250);\n } else if (axis === 'horizontal' && containerRef.current) {\n containerRef.current.style.transition = \"transform 0.3s cubic-bezier(.25,.75,.5,1.25)\";\n containerRef.current.style.transform = `translateX(${direction * -20}px)`;\n setTimeout(() => {\n if (containerRef.current) {\n containerRef.current.style.transition = \"transform 0.2s cubic-bezier(.25,.75,.5,1.25)\";\n containerRef.current.style.transform = \"translateX(0)\";\n }\n }, 250);\n }\n }, []);\n\n // Change index - Only works in swipe mode\n const changeIndex = useCallback((direction) => {\n if (isInteractMode || isTransitioning) return;\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 setCurrentIndex(newIndex);\n // Keep interact mode state when navigating\n setTimeout(() => setIsTransitioning(false), 500);\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, 'vertical'); \n }\n }\n }, [currentIndex, isTransitioning, vals.length, bounceEffect, isInteractMode]);\n\n // Wheel handler\n useEffect(() => {\n const container = containerRef.current;\n if (!container) return;\n \n const handleWheel = (e: WheelEvent) => {\n if (isInteractMode) {\n return; // Let the iframe handle the wheel event when in interact mode\n }\n e.preventDefault();\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, changeIndex]);\n\n // Touch handlers\n const handleTouchStart = useCallback((e: React.TouchEvent) => {\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 setHorizontalSwipeActive(false);\n \n debugLog(`Touch start: x=${touchStartRef.current.x}, y=${touchStartRef.current.y}, interact mode: ${isInteractMode}`);\n \n if (containerRef.current) { \n containerRef.current.style.transition = \"none\"; \n }\n }, [isInteractMode]);\n\n const handleTouchMove = useCallback((e: React.TouchEvent) => {\n if (!touchActiveRef.current) return;\n \n touchMoveRef.current = { \n x: e.touches[0].clientX, \n y: e.touches[0].clientY \n };\n \n const deltaX = touchMoveRef.current.x - touchStartRef.current.x;\n const deltaY = touchMoveRef.current.y - touchStartRef.current.y;\n \n // Determine if this is primarily a horizontal swipe\n const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY) * 1.5;\n \n // If in interact mode, only care about right swipes (positive deltaX)\n if (isInteractMode) {\n if (isHorizontalSwipe && deltaX > 30) {\n // This is a right swipe in interact mode, could be to return to feed\n setHorizontalSwipeActive(true);\n if (containerRef.current) {\n containerRef.current.style.transform = `translateX(${deltaX / 3}px)`;\n }\n e.preventDefault(); // Prevent default to avoid scrolling iframe content\n }\n return;\n }\n \n // In swipe mode, handle vertical swipes\n if (!isHorizontalSwipe) {\n if (containerRef.current) {\n let resistance = 1;\n if ((currentIndex === 0 && deltaY > 0) || \n (currentIndex === vals.length - 1 && deltaY < 0)) {\n resistance = 3;\n }\n containerRef.current.style.transform = `translateY(${deltaY / resistance}px)`;\n }\n }\n }, [currentIndex, vals.length, isInteractMode]);\n\n const handleTouchEnd = useCallback((e: React.TouchEvent) => {\n if (!touchActiveRef.current) {\n return;\n }\n \n touchActiveRef.current = false;\n const endX = e.changedTouches[0].clientX;\n const endY = e.changedTouches[0].clientY;\n const deltaX = endX - touchStartRef.current.x;\n const deltaY = endY - touchStartRef.current.y;\n const deltaTime = Date.now() - touchStartRef.current.time;\n const velocityX = deltaTime > 0 ? Math.abs(deltaX) / deltaTime : 0;\n const velocityY = deltaTime > 0 ? Math.abs(deltaY) / deltaTime : 0;\n \n // Is this a horizontal swipe?\n const isHorizontalSwipe = Math.abs(deltaX) > Math.abs(deltaY) * 1.5;\n \n // In interact mode, check for right swipe to go back to feed\n if (isInteractMode) {\n if (containerRef.current) {\n containerRef.current.style.transition = \"transform 0.3s ease-out\";\n containerRef.current.style.transform = \"translateX(0)\";\n }\n \n if (isHorizontalSwipe && deltaX > 0) {\n const viewportWidth = typeof window !== \"undefined\" ? window.innerWidth : 375;\n if (deltaX > viewportWidth * 0.25 || (deltaX > 60 && velocityX > 0.3)) {\n // This is a right swipe with enough distance/velocity to go back to feed\n debugLog(\"Right swipe detected in interact mode - going back to feed\");\n onClose(); // Close the viewer to go back to feed\n }\n }\n return;\n }\n \n // In swipe mode\n \n // Check if this was more of a tap than a swipe\n const isSmallMovement = Math.abs(deltaX) < 10 && Math.abs(deltaY) < 10;\n const isQuickTap = deltaTime < 300;\n \n debugLog(`Touch end: deltaX=${deltaX}, deltaY=${deltaY}, velocityX=${velocityX.toFixed(2)}, velocityY=${velocityY.toFixed(2)}, isHorizontalSwipe=${isHorizontalSwipe}`);\n \n if (containerRef.current) {\n containerRef.current.style.transition = \"transform 0.3s ease-out\";\n containerRef.current.style.transform = \"translateY(0)\";\n }\n \n // Handle as tap if small movement and quick\n if (isSmallMovement && isQuickTap) {\n debugLog(\"Detected tap, entering interact mode\");\n setIsInteractMode(true);\n return;\n }\n \n // Otherwise handle as swipe (only process vertical swipes in swipe mode)\n if (!isHorizontalSwipe) {\n const viewportHeight = typeof window !== \"undefined\" ? window.innerHeight : 600;\n if (Math.abs(deltaY) > (viewportHeight * 0.15) || velocityY > 0.3) { \n changeIndex(deltaY > 0 ? -1 : 1); \n }\n }\n }, [changeIndex, isInteractMode, onClose]);\n\n // Toggle interact mode\n const toggleInteractMode = useCallback(() => {\n setIsInteractMode(prev => {\n debugLog(`Toggle interact mode: ${prev ? 'swipe' : 'interactive'}`);\n return !prev;\n });\n }, []);\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 - make sure this properly returns to profile\n const handleClose = useCallback((e: React.MouseEvent) => {\n e.preventDefault();\n e.stopPropagation();\n debugLog(\"Closing viewer and returning to profile\");\n \n // Restore scroll before closing\n document.documentElement.style.overflow = '';\n document.body.style.overflow = '';\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 // Call the onClose function to properly return to profile\n onClose();\n }, [onClose]);\n\n // Back to swipe mode\n const handleBackToSwipe = useCallback((e: React.MouseEvent) => {\n e.stopPropagation();\n debugLog(\"Back to swipe mode\");\n setIsInteractMode(false);\n }, []);\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 return (\n

\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 \n {/* Bottom divider line */}\n

\n );\n })}\n

\n \n {/* Tap overlay - only shows in swipe mode with no background */}\n {!isInteractMode && (\n

\n Tap Anywhere\n

\n )}\n \n {/* Navigation buttons - Animated to transform between states */}\n

\n {isInteractMode ? (\n \n ‹\n \n ) : (\n \n ✕\n \n )}\n

\n \n {/* Swipe indicator - tiktok/instagram style at bottom edge */}\n {!isInteractMode && showSwipeIndicator && vals.length > 1 && (\n

\n SWIPE\n

▼

\n )}\n \n {/* Pagination dots - only visible in swipe mode */}\n {!isInteractMode && (\n

\n {vals.map((val, index) => (\n {\n if (!isTransitioning && index !== currentIndex) {\n setCurrentIndex(index);\n setIsTransitioning(true);\n setTimeout(() => setIsTransitioning(false), 500);\n }\n }}\n />\n ))}\n

\n )}\n \n {/* Debug overlay - only visible during development */}\n {false && (\n

{debugInfo}

\n )}\n

\n \n );\n}\n\nexport default SwipeViewer;",[],[203,209,289],{"_105":296,"_96":297,"_160":298,"_162":210,"_163":143,"_164":165,"_166":119,"_107":299,"_101":32,"_168":219,"_170":300,"_171":22,"_172":-5,"_173":301,"_100":302},"eb0631f0-4555-11f0-973d-76b3cceeab13","UserProfile.tsx","38c48d6a-847c-45cd-af93-ddedeb249e0e",["D",1749489576590],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect } from \"https://esm.sh/react@18.2.0\";\nimport MoiEditorModal from \"./MoiEditorModal.tsx\";\nimport { TabNavigation, TabContent } from \"./ProfileTabs.tsx\";\n\ninterface UserProfileProps {\n username: string;\n isEditing?: boolean;\n apiKey?: 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 buildMoiUrl?: string;\n privacy?: string;\n}\n\ninterface TabInfo {\n name: string;\n vals: Val[];\n}\n\ninterface UserValsResponse {\n valResults: Val[];\n totalValResults: number;\n page: number;\n pageSize: number;\n totalPages: number;\n executionTimeMs: number;\n tabs?: TabInfo[];\n}\n\n// Expanded type for tabs\ntype TabType = 'posts' | 'code' | string;\n\nexport function UserProfile({ username, isEditing = false, apiKey = '' }: 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 [customTabs, setCustomTabs] = useState([]);\n const [loadingMore, setLoadingMore] = useState(false);\n const [profileImageError, setProfileImageError] = useState(false);\n const [activeTab, setActiveTab] = useState('posts');\n \n // Editor state\n const [editingVal, setEditingVal] = useState(null);\n const [showEditor, setShowEditor] = useState(false);\n const [moiContent, setMoiContent] = useState('');\n const [contentToSave, setContentToSave] = useState(null);\n const [saving, setSaving] = useState(false);\n const [saveError, setSaveError] = useState(null);\n const [saveSuccess, setSaveSuccess] = useState(false);\n const [loadingItem, setLoadingItem] = useState(false);\n const [itemError, setItemError] = useState(null);\n \n // Extract valname from URL if present for direct val viewing\n const [directVal, setDirectVal] = useState(null);\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 // Check if the URL contains a direct val reference\n useEffect(() => {\n const { pathname } = window.location;\n const match = pathname.match(/^\\/@([^\\/]+)\\/([^\\/]+)/);\n if (match && match[2]) {\n setDirectVal(match[2]);\n }\n }, []);\n\n // Handle editing a val\n const handleEditVal = async (val: Val) => {\n setEditingVal(val);\n setMoiContent('');\n setContentToSave(null);\n setSaveError(null);\n setSaveSuccess(false);\n setItemError(null);\n setLoadingItem(true);\n \n console.log(`[EDIT] Starting edit for val: ${val.name} (${val.id})`);\n \n try {\n // Fetch current moi.md content if it exists\n if (val.hasMoiMd) {\n console.log(`[EDIT] Fetching existing moi.md content for ${val.name}`);\n const response = await fetch(`/api/vals/${val.id}/moi`, {\n headers: {\n 'Authorization': `Bearer ${apiKey}`\n }\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.content) {\n console.log(`[EDIT] Successfully loaded moi.md content (${data.content.length} bytes)`);\n console.log(`[EDIT] Content preview: ${data.content.substring(0, 100)}...`);\n const loadedContent = data.content;\n setMoiContent(loadedContent);\n setContentToSave(loadedContent);\n } else {\n console.log(`[EDIT] API returned empty content for moi.md`);\n \n // Default content with frontmatter\n const defaultContent = `---\ntitle: \"${val.name}\"\ndescription: \"${val.description || ''}\"\nimageUrl: \"${val.image_url || ''}\"\nurl: \"${val.httpEndpoint || ''}\"\nauthor: \"${username}\"\ntags: [\"val-town\"]\n---\n\n# ${val.name}\n\n${val.description || 'Add a description here...'}\n`;\n setMoiContent(defaultContent);\n setContentToSave(defaultContent);\n }\n } else {\n console.log(`[EDIT] Failed to fetch moi.md - Status: ${response.status}`);\n throw new Error(`Failed to load moi.md content: ${response.statusText}`);\n }\n } else {\n console.log(`[EDIT] Creating new moi.md for ${val.name}`);\n \n // Default content with frontmatter for new moi.md\n const defaultContent = `---\ntitle: \"${val.name}\"\ndescription: \"${val.description || ''}\"\nimageUrl: \"${val.image_url || ''}\"\nurl: \"${val.httpEndpoint || ''}\"\nauthor: \"${username}\"\ntags: [\"val-town\"]\n---\n\n# ${val.name}\n\n${val.description || 'Add a description here...'}\n`;\n console.log(`[EDIT] Created default content (${defaultContent.length} bytes)`);\n console.log(`[EDIT] Content preview: ${defaultContent.substring(0, 100)}...`);\n setMoiContent(defaultContent);\n setContentToSave(defaultContent);\n }\n } catch (error) {\n console.error('[EDIT] Error loading moi.md:', error);\n setItemError('Failed to load moi.md content');\n \n // Provide a default template even if loading fails\n const fallbackContent = `---\ntitle: \"${val.name}\"\ndescription: \"\"\nauthor: \"${username}\"\ntags: [\"val-town\"]\n---\n\n# ${val.name}\n\n`;\n setMoiContent(fallbackContent);\n setContentToSave(fallbackContent);\n } finally {\n setLoadingItem(false);\n setShowEditor(true);\n }\n };\n\n // Handle content updates from the editor\n const handleContentChange = (content: string) => {\n // Don't update if we're in the middle of saving\n if (!saving) {\n console.log(`[CONTENT] Updating content: ${content.substring(0, 50)}...`);\n \n // This is critical - we update the content that will be saved\n setContentToSave(content);\n } else {\n console.log(`[CONTENT] Ignoring content update during save`);\n }\n };\n\n // Handle saving moi.md\n const handleSaveMoi = async () => {\n if (!editingVal || !apiKey || !contentToSave) {\n console.error(\"[SAVE] Cannot save - missing val, API key, or content\");\n return;\n }\n \n // Set saving state to prevent unwanted changes\n setSaving(true);\n setSaveError(null);\n setSaveSuccess(false);\n \n // Make a clean copy of the content for saving\n const contentForSaving = String(contentToSave);\n \n console.log(`[SAVE] Starting save for val: ${editingVal.name} (${editingVal.id})`);\n console.log(`[SAVE] API Key: ${apiKey.substring(0, 5)}...`);\n console.log(`[SAVE] Content to save: ${contentForSaving.length} bytes`);\n console.log(`[SAVE] Using endpoint: /api/vals/${editingVal.id}/moi`);\n console.log(`[SAVE] Content preview: ${contentForSaving.substring(0, 100)}...`);\n \n try {\n // Debug on what's actually being sent \n const requestBody = JSON.stringify({ content: contentForSaving });\n console.log(`[SAVE] Request body preview:`, requestBody.substring(0, 200));\n \n const response = await fetch(`/api/vals/${editingVal.id}/moi`, {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Authorization': `Bearer ${apiKey}`\n },\n body: requestBody\n });\n \n console.log(`[SAVE] Response status: ${response.status}`);\n console.log(`[SAVE] Response headers:`, Object.fromEntries(response.headers.entries()));\n \n const responseText = await response.text();\n console.log(`[SAVE] Response text:`, responseText);\n \n // Parse the response to check for errors\n let responseJson;\n try {\n responseJson = JSON.parse(responseText);\n } catch (e) {\n console.error(\"[SAVE] Error parsing response JSON:\", e);\n }\n \n if (!response.ok) {\n throw new Error(`Failed to save moi.md: ${responseText}`);\n }\n \n // Set success and update UI state\n setSaveSuccess(true);\n console.log(`[SAVE] Save successful!`);\n \n // Update the val's hasMoiMd status in the local state\n setAllVals(prevVals => prevVals.map(v => \n v.id === editingVal.id ? { ...v, hasMoiMd: true } : v\n ));\n \n // Close editor after a delay\n setTimeout(() => {\n setShowEditor(false);\n setSaving(false);\n }, 1500);\n } catch (error) {\n console.error('[SAVE] Error saving moi.md:', error);\n setSaveError(error instanceof Error ? error.message : 'Failed to save moi.md');\n // Keep editing open so user can retry\n setSaving(false);\n }\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 \n // Process custom tabs if available\n if (initialData.tabs && initialData.tabs.length > 0) {\n setCustomTabs(initialData.tabs);\n }\n \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 // If viewing a direct val, find and display only that val\n const getDirectValContent = () => {\n if (!directVal || !allVals || allVals.length === 0) return null;\n \n const val = allVals.find(v => v.name === directVal);\n if (!val) return null;\n \n return (\n

\n \n

{val.name}

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

\n \n {val.httpEndpoint ? (\n \n ) : (\n

No endpoint available for this val

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

\n )}\n

\n );\n };\n\n if (directVal) {\n return getDirectValContent() || (\n

Loading val...

\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 // User profile image logic\n const profileImageUrl = !profileImageError \n ? `https://pic.val.run/${username}`\n : null;\n \n const profileColor = getProfileColor();\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 borderClass = isDarkMode ? 'border-gray-700' : 'border-gray-200';\n\n return (\n

{/* Increased max width for more columns */}\n {/* Profile Header - Mobile layout puts username and link next to profile image */}\n

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

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

\n \n

@{username}

\n \n

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

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

\n \n {/* Tabs Navigation */}\n \n \n {/* Tab Content */}\n \n \n {/* Loading indicator if fetching more pages */}\n {loadingMore && (\n

\n Loading more...\n

\n )}\n

\n \n {/* Moi Editor Modal */}\n {showEditor && editingVal && (\n {\n // Only close if not in the middle of saving\n if (!saving) {\n setShowEditor(false);\n setEditingVal(null);\n setContentToSave(null);\n }\n }}\n saving={saving}\n saveError={saveError}\n saveSuccess={saveSuccess}\n hasMoiFile={editingVal.hasMoiMd || false}\n loadingItem={loadingItem}\n itemError={itemError}\n username={username}\n apiToken={apiKey}\n disabled={saving} // Disable the editor during saving\n />\n )}\n

\n );\n}",[],[203,209,297],{"_105":304,"_96":305,"_160":306,"_162":210,"_163":143,"_164":165,"_166":119,"_107":307,"_101":32,"_168":219,"_170":308,"_171":22,"_172":-5,"_173":309,"_100":310},"eb06419a-4555-11f0-973d-76b3cceeab13","ValGrid.tsx","c00f04b1-32c0-4bfd-a560-1ec9a33fe4be",["D",1749489576590],"/** @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: string;\n isDarkMode: boolean;\n isEditing?: boolean;\n onEditVal?: (val: Val) => void;\n}\n\nexport function ValGrid({ vals, activeTab, isDarkMode, isEditing = false, onEditVal }: ValGridProps) {\n // State for the swipe viewer\n const [swipeViewerOpen, setSwipeViewerOpen] = useState(false);\n const [selectedValIndex, setSelectedValIndex] = useState(-1);\n \n // Enable swipe viewer on the posts tab and custom tabs (not code tab), but not in editing mode\n const enableSwipeViewer = (activeTab === 'posts' || activeTab !== 'code') && !isEditing;\n \n // Handle grid item click to open the swipe viewer or edit\n const handleGridItemClick = (index: number, val: Val) => {\n if (isEditing && onEditVal) {\n // In edit mode, open the editor\n onEditVal(val);\n } else if (enableSwipeViewer && (val.moiConfig?.url || val.httpEndpoint)) {\n // Otherwise open swipe viewer if in posts or custom tab and val has proper URL\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 (for posts and custom tabs)\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={\n (isEditing || (enableSwipeViewer && (val.moiConfig?.url || val.httpEndpoint))) \n ? \"cursor-pointer\" \n : \"\"\n }\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}",[],[203,209,305],{"_105":312,"_96":313,"_160":314,"_162":210,"_163":143,"_164":165,"_166":119,"_107":315,"_101":32,"_168":219,"_170":316,"_171":22,"_172":-5,"_173":317,"_100":318},"eb064500-4555-11f0-973d-76b3cceeab13","ValGridItem.tsx","2aa3507c-6b8c-4384-9393-bc3b805c3f4b",["D",1749489576590],"/** @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: string;\n isDarkMode: boolean;\n isEditing?: boolean;\n}\n\nexport function ValGridItem({ val, activeTab, isDarkMode, isEditing = false }: 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 // Special case for code tab - always link directly to Val Town code URL\n if (activeTab === 'code') {\n return val.url;\n }\n \n // For posts tab and custom tabs, use the same URL resolution logic:\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\n else {\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 or custom tabs\n const hasProperLink = () => {\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 hasLink = hasProperLink();\n \n // Get the description to display (either from val or from moiConfig)\n const displayDescription = val.description || val.moiConfig?.description || null;\n \n // Is this val in the posts or a custom tab (but not code tab), and has a proper link for swipe view\n const isSwipeViewEnabled = activeTab !== 'code' && hasLink;\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 action indicator */}\n

\n {isEditing ? (\n \n {val.hasMoiMd ? 'Edit moi.md' : 'Add moi.md'}\n \n ) : isSwipeViewEnabled ? (\n \n Live App\n \n ) : (\n View Code\n )}\n

\n );\n}",[],[203,209,313],[203,209],{"_105":321,"_96":322,"_160":323,"_162":204,"_163":143,"_164":165,"_166":119,"_107":324,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":325,"_100":342},"eb065432-4555-11f0-973d-76b3cceeab13","utils","417abb52-6e15-4380-b493-1f0f92547b22",["D",1749489576590],[326,334],{"_105":327,"_96":328,"_160":329,"_162":323,"_163":143,"_164":165,"_166":119,"_107":330,"_101":32,"_168":219,"_170":331,"_171":22,"_172":-5,"_173":332,"_100":333},"eb064c80-4555-11f0-973d-76b3cceeab13","moiConfig.tsx","cd188e9f-f374-4942-aabd-a493c1ffa278",["D",1749489576590],"/** \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",[],[203,322,328],{"_105":335,"_96":336,"_160":337,"_162":323,"_163":143,"_164":165,"_166":119,"_107":338,"_101":32,"_168":219,"_170":339,"_171":22,"_172":-5,"_173":340,"_100":341},"eb0651ee-4555-11f0-973d-76b3cceeab13","viewport.ts","6a2bde21-561d-43a1-bce1-92a925b0a3d9",["D",1749489576590],"// 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 setVh = () => {\n if (typeof window !== \"undefined\") {\n const vh = window.innerHeight * 0.01;\n document.documentElement.style.setProperty(\"--vh\", `${vh}px`);\n }\n };\n\n // Initial setup\n setVh();\n \n // Setup resize/orientation handlers with debounce\n let timeoutId: number | undefined;\n \n const handleResize = () => {\n if (typeof window !== \"undefined\") {\n clearTimeout(timeoutId);\n timeoutId = setTimeout(setVh, 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\", handleResize);\n }\n \n // Return cleanup function\n return () => {\n if (typeof window !== \"undefined\") {\n if (timeoutId) clearTimeout(timeoutId);\n window.removeEventListener(\"resize\", handleResize);\n window.removeEventListener(\"orientationchange\", handleResize);\n }\n };\n};\n\nexport default setupViewportHeight;",[],[203,322,336],[203,322],{"_105":344,"_96":345,"_160":346,"_162":204,"_163":143,"_164":165,"_166":119,"_107":347,"_101":32,"_168":196,"_170":348,"_171":22,"_172":-5,"_173":349,"_100":350},"eb065590-4555-11f0-973d-76b3cceeab13","index.html","ddd51acd-1ede-43ff-8985-7bd7d4443e06",["D",1749489576590],"\n\n\n \n \n \n \n build.moi - Share your Val Town projects\n \n \n \n\n\n

\n \n \n\n",[],[203,345],{"_105":352,"_96":353,"_160":354,"_162":204,"_163":143,"_164":165,"_166":119,"_107":355,"_101":32,"_168":219,"_170":356,"_171":22,"_172":-5,"_173":357,"_100":358},"eb065d42-4555-11f0-973d-76b3cceeab13","index.tsx","cbe178d1-25d0-45e9-b130-447d2859ffd3",["D",1749489576590],"/** @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}",[],[203,353],[203],{"_105":361,"_96":362,"_160":363,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":364,"_101":32,"_168":196,"_170":365,"_171":22,"_172":-5,"_173":366,"_100":367},"eb066012-4555-11f0-973d-76b3cceeab13","README-custom-tabs-swipe.md","500d155d-e01a-42d6-8a64-16c6c2edda12",["D",1749489576590],"# Custom Tabs Swipe View Feature\n\nThis branch implements the feature to make custom tabs behave like the \"Posts\" tab, allowing vals in custom tabs to be viewed in the swipe viewer.\n\n## Changes Made\n\n1. **ValGrid Component**:\n - Updated to support swipe viewer for both \"Posts\" tab and any custom tabs\n - Added logic to only exclude \"code\" tab from swipe viewer functionality\n\n2. **ValGridItem Component**:\n - Modified to handle link URLs differently based on tab types\n - Added special handling for code tab items to always link directly to Val Town\n - Improved UI indicators to show when swipe view is available\n\n3. **Project Refactoring**:\n - Created a new `ProfileTabs.tsx` component to extract tab navigation and content functionality\n - Split UserProfile.tsx code into smaller, more maintainable components\n - Added proper tab switching functionality within components\n\n## How It Works\n\nCustom tabs now have the same behavior as the \"Posts\" tab:\n- When clicking on a val in a custom tab, if it has a proper URL (from moiConfig or httpEndpoint), it will open in the swipe viewer\n- Users can swipe through all vals in that custom tab\n- This maintains the existing behavior of the \"code\" tab, which still links directly to Val Town\n\n## Testing Notes\n\n- Verify that custom tabs show the swipe viewer when clicking on vals\n- Confirm that swipe navigation works within custom tabs\n- Check that the \"code\" tab still links directly to Val Town pages\n- Test that \"View All Code\" button works correctly when a custom tab has no content",[],[362],{"_105":369,"_96":370,"_160":371,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":372,"_101":32,"_168":196,"_170":373,"_171":22,"_172":-5,"_173":374,"_100":375},"eb0662c4-4555-11f0-973d-76b3cceeab13","README.md","eaaf89ba-4481-4fdb-9afd-051952d56344",["D",1749489576590],"# 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### Viewing\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- **Custom Tabs**: Group vals into collections with custom tab categories\n- **Priority Tier System**: Control display order with numeric tier values\n- **Exclude from Posts**: Keep content in custom tabs but hide from the main Posts tab\n- **Direct Val Viewing**: View vals directly in full-screen mode with /@username/valname URLs\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### Editing (NEW!)\n- **Edit Your Profile**: Add API key to enter editing mode\n- **Create/Edit moi.md**: Click any val in edit mode to create or modify its moi.md file\n- **Visual Editor**: Form-based editor with metadata fields:\n - Title\n - Description\n - Image URL\n - Tags\n - Priority Tier\n - Custom Tabs\n - Exclude from Posts option\n - Raw markdown content\n- **Advanced Mode**: Toggle to show/hide advanced options\n- **Real-time Saving**: Saves changes directly to your Val Town account\n- **Visual Feedback**: Indicators show which vals have moi.md files and which need them\n\n## Usage\n\n### Viewing Profiles\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\nTo view a specific val directly in full-screen mode:\n\n```\n/@username/valname\n```\n\nWhere `valname` is the name of the val you want to display.\n\n### Editing Your Profile\n\n1. **Enter Edit Mode**: Click \"Edit Your Profile\" in the header and enter your Val Town API key\n2. **Edit Content**: Once API key is set, the interface will show your username and an \"Edit Profile\" button\n3. **Click Vals**: In edit mode, clicking any val will open the moi.md editor\n4. **Create/Edit**: Add or modify the moi.md content for your vals\n5. **Save Changes**: Use the Save button to persist changes\n6. **Exit Edit Mode**: Click \"Exit Edit Mode\" to return to view-only mode\n\n### Securing Your API Key\n\nYour Val Town API key is:\n- Stored securely in your browser's localStorage\n- Never sent to any third-party servers\n- Only used to authenticate with Val Town's API directly\n- Can be removed by clearing your browser data\n\n## Tabs Functionality\n\nbuild.moi has three types of tabs:\n\n1. **Posts**: Shows only vals with a `moi.md` file that aren't excluded from Posts, and links to their endpoints\n2. **Custom Tabs**: Created from tab collections specified in moi.md files\n3. **Code**: Shows all vals and links to their code on Val Town\n\nThe Posts tab is perfect for highlighting your working applications, custom tabs allow you to create focused collections, while the Code tab gives visitors access to all your Val Town code.\n\n## Priority System\n\nThe priority tier system allows you to control the display order of your vals:\n\n- Lower values appear first (e.g., tier 1 vals appear before tier 2)\n- Decimal values are supported (e.g., 1.5, 2.3)\n- Vals without a tier value appear after all vals with tier values\n- Vals with the same tier maintain their original order\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\"]\ntier: 1.5\ntabs: [\"Projects\", \"Tutorials\"]\nexcludeFromPosts: false\n---\n\n# My Project\n\nAdditional markdown content here will be used as documentation for your project.\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- `tier`: Priority level for display order (lower numbers appear first, can use decimal values like 1.5)\n- `tabs`: Array of tab names where this content should appear\n- `excludeFromPosts`: Boolean to exclude content from the main Posts tab while keeping it in custom tabs\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\n4. **Val Town API** (via SDK) for creating/updating moi.md files when in edit mode\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.",[],[370],{"_105":377,"_96":378,"_160":379,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":380,"_101":32,"_168":196,"_170":381,"_171":22,"_172":-5,"_173":382,"_100":383},"eb0668be-4555-11f0-973d-76b3cceeab13","moi.md","a0f6ffda-23cb-49ec-ba02-e869d66b917f",["D",1749489576590],"---\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\"]\ntier: 1\nexcludeFromPosts: true\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- Custom Tabs for organizing content into collections\n- Priority ranking system for organizing content display order\n- Content exclusion from the main Posts tab\n- Direct val viewing with full-screen display\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\nYou can also view a specific val directly using:\n\n```\n/@username/valname\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\n- `tier`: Priority level for display order (lower numbers appear first, can use decimal values like 1.5)\n- `tabs`: Array of tab names where this content should appear\n- `excludeFromPosts`: Boolean to exclude content from the main Posts tab (true/false)\n\n### Priority System\n\nThe `tier` field determines the display order of your content:\n\n- Lower tier values (e.g., 1) appear before higher values (e.g., 3)\n- Decimal values are supported (e.g., 0.5, 1.3, 2.7)\n- Items with the same tier value maintain their original order\n- Items without a tier value appear after all items with tier values\n\nExample:\n```yaml\ntier: 1.5\n```\n\n### Custom Tabs\n\nThe `tabs` field allows you to categorize your content into custom collections:\n\n- Content can belong to multiple tabs by listing multiple tab names\n- Tabs appear between the \"Posts\" and \"Code\" navigation items\n- Each tab contains only content explicitly assigned to it\n\nExample:\n```yaml\ntabs: [\"Projects\", \"Tutorials\", \"Experiments\"]\n```\n\n### Exclude From Posts\n\nThe `excludeFromPosts` field lets you exclude content from the main Posts tab while keeping it in custom tabs:\n\n- When set to `true`, the val won't appear in the main Posts tab\n- The val will still appear in any custom tabs specified in the `tabs` field\n- The val will always appear in the Code tab regardless of this setting\n\nExample:\n```yaml\nexcludeFromPosts: true\ntabs: [\"Tutorials\"]\n```\n\nThis configuration would show the val in the \"Tutorials\" tab and the Code tab, but not in the main Posts tab.",[],[378],"files",[157,175,185,191,201,207,213,223,231,239,247,255,263,271,279,287,295,303,311,320,326,334,343,351,360,368,376],"counts",{"_388":142,"_389":148,"_390":32,"_391":392,"_395":396},"pulls","branches","forks","envVars",{"_393":32,"_394":32},"count","emptyCount","connections",{"_393":32,"_397":32},"unfilledCount","contents",[400,403,406,409,412,415],{"_105":158,"_96":159,"_160":161,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":401,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":402},["D",1749489576590],[159],{"_105":186,"_96":187,"_160":188,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":404,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":405},["D",1749489576590],[187],{"_105":202,"_96":203,"_160":204,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":407,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":408},["D",1749489576590],[203],{"_105":361,"_96":362,"_160":363,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":410,"_101":32,"_168":196,"_170":365,"_171":22,"_172":-5,"_100":411},["D",1749489576590],[362],{"_105":369,"_96":370,"_160":371,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":413,"_101":32,"_168":196,"_170":373,"_171":22,"_172":-5,"_100":414},["D",1749489576590],[370],{"_105":377,"_96":378,"_160":379,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":416,"_101":32,"_168":196,"_170":381,"_171":22,"_172":-5,"_100":417},["D",1749489576590],[378],"upstreamProject","upstreamBranch",{"_105":146,"_107":421,"_422":423,"_96":44,"_144":106,"_101":424,"_145":425,"_147":426,"_427":428,"_109":-5,"_154":22,"_111":112,"_153":95,"_16":124,"_152":97},["D",1745630485630],"updatedAt",["D",1749490295274],20,"961078ea-f528-11ef-aa68-569c3dd06744",39,"lockfileKey","1749490325161-esm.town_v_dcm31_buildDotMoi@20-main","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_94":95,"_96":97,"_98":99,"_101":102,"_100":73,"_103":435,"_155":440,"_384":522,"_196":-7,"_398":523,"_536":537,"_540":-5,"_541":32,"_542":32,"_543":544,"_391":-5},{"_105":106,"_96":97,"_107":436,"_109":-5,"_110":22,"_111":112,"_113":-5,"_114":-5,"_14":115,"_116":117,"_118":119,"_120":-5,"_121":122,"_123":32,"_16":124,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":126,"_23":437,"_137":438,"_140":439,"_154":22},["D",1745630485630],{"_94":95,"_135":136},{"_94":95,"_139":136,"_14":115},{"_101":142,"_96":99,"_105":143,"_144":106,"_145":146,"_147":148,"_149":112,"_150":106,"_151":124,"_152":97,"_153":95},[441,447,453,513,516,519],{"_105":158,"_96":159,"_160":161,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":167,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":442,"_100":446},[443],{"_105":176,"_96":177,"_160":178,"_162":161,"_163":143,"_164":165,"_166":119,"_107":179,"_101":32,"_168":180,"_170":181,"_171":22,"_172":-5,"_173":444,"_100":445},[],[159,177],[159],{"_105":186,"_96":187,"_160":188,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":189,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":448,"_100":452},[449],{"_105":192,"_96":193,"_160":194,"_162":188,"_163":143,"_164":165,"_166":119,"_107":195,"_101":32,"_168":196,"_170":197,"_171":22,"_172":-5,"_173":450,"_100":451},[],[187,193],[187],{"_105":202,"_96":203,"_160":204,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":205,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":454,"_100":512},[455,497,506,509],{"_105":208,"_96":209,"_160":210,"_162":204,"_163":143,"_164":165,"_166":119,"_107":211,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":456,"_100":496},[457,460,463,466,469,472,475,478,481,484,487,490,493],{"_105":214,"_96":215,"_160":216,"_162":210,"_163":143,"_164":217,"_166":119,"_107":218,"_101":165,"_168":219,"_170":220,"_171":22,"_172":-5,"_173":458,"_100":459},[],[203,209,215],{"_105":224,"_96":225,"_160":226,"_162":210,"_163":143,"_164":165,"_166":119,"_107":227,"_101":32,"_168":219,"_170":228,"_171":22,"_172":-5,"_173":461,"_100":462},[],[203,209,225],{"_105":232,"_96":233,"_160":234,"_162":210,"_163":143,"_164":165,"_166":119,"_107":235,"_101":32,"_168":219,"_170":236,"_171":22,"_172":-5,"_173":464,"_100":465},[],[203,209,233],{"_105":240,"_96":241,"_160":242,"_162":210,"_163":143,"_164":165,"_166":119,"_107":243,"_101":32,"_168":219,"_170":244,"_171":22,"_172":-5,"_173":467,"_100":468},[],[203,209,241],{"_105":248,"_96":249,"_160":250,"_162":210,"_163":143,"_164":165,"_166":119,"_107":251,"_101":32,"_168":219,"_170":252,"_171":22,"_172":-5,"_173":470,"_100":471},[],[203,209,249],{"_105":256,"_96":257,"_160":258,"_162":210,"_163":143,"_164":165,"_166":119,"_107":259,"_101":32,"_168":219,"_170":260,"_171":22,"_172":-5,"_173":473,"_100":474},[],[203,209,257],{"_105":264,"_96":265,"_160":266,"_162":210,"_163":143,"_164":102,"_166":22,"_107":267,"_101":32,"_168":219,"_170":268,"_171":22,"_172":-5,"_173":476,"_100":477},[],[203,209,265],{"_105":272,"_96":273,"_160":274,"_162":210,"_163":143,"_164":165,"_166":119,"_107":275,"_101":32,"_168":219,"_170":276,"_171":22,"_172":-5,"_173":479,"_100":480},[],[203,209,273],{"_105":280,"_96":281,"_160":282,"_162":210,"_163":143,"_164":165,"_166":119,"_107":283,"_101":32,"_168":219,"_170":284,"_171":22,"_172":-5,"_173":482,"_100":483},[],[203,209,281],{"_105":288,"_96":289,"_160":290,"_162":210,"_163":143,"_164":165,"_166":119,"_107":291,"_101":32,"_168":219,"_170":292,"_171":22,"_172":-5,"_173":485,"_100":486},[],[203,209,289],{"_105":296,"_96":297,"_160":298,"_162":210,"_163":143,"_164":165,"_166":119,"_107":299,"_101":32,"_168":219,"_170":300,"_171":22,"_172":-5,"_173":488,"_100":489},[],[203,209,297],{"_105":304,"_96":305,"_160":306,"_162":210,"_163":143,"_164":165,"_166":119,"_107":307,"_101":32,"_168":219,"_170":308,"_171":22,"_172":-5,"_173":491,"_100":492},[],[203,209,305],{"_105":312,"_96":313,"_160":314,"_162":210,"_163":143,"_164":165,"_166":119,"_107":315,"_101":32,"_168":219,"_170":316,"_171":22,"_172":-5,"_173":494,"_100":495},[],[203,209,313],[203,209],{"_105":321,"_96":322,"_160":323,"_162":204,"_163":143,"_164":165,"_166":119,"_107":324,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_173":498,"_100":505},[499,502],{"_105":327,"_96":328,"_160":329,"_162":323,"_163":143,"_164":165,"_166":119,"_107":330,"_101":32,"_168":219,"_170":331,"_171":22,"_172":-5,"_173":500,"_100":501},[],[203,322,328],{"_105":335,"_96":336,"_160":337,"_162":323,"_163":143,"_164":165,"_166":119,"_107":338,"_101":32,"_168":219,"_170":339,"_171":22,"_172":-5,"_173":503,"_100":504},[],[203,322,336],[203,322],{"_105":344,"_96":345,"_160":346,"_162":204,"_163":143,"_164":165,"_166":119,"_107":347,"_101":32,"_168":196,"_170":348,"_171":22,"_172":-5,"_173":507,"_100":508},[],[203,345],{"_105":352,"_96":353,"_160":354,"_162":204,"_163":143,"_164":165,"_166":119,"_107":355,"_101":32,"_168":219,"_170":356,"_171":22,"_172":-5,"_173":510,"_100":511},[],[203,353],[203],{"_105":361,"_96":362,"_160":363,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":364,"_101":32,"_168":196,"_170":365,"_171":22,"_172":-5,"_173":514,"_100":515},[],[362],{"_105":369,"_96":370,"_160":371,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":372,"_101":32,"_168":196,"_170":373,"_171":22,"_172":-5,"_173":517,"_100":518},[],[370],{"_105":377,"_96":378,"_160":379,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":380,"_101":32,"_168":196,"_170":381,"_171":22,"_172":-5,"_173":520,"_100":521},[],[378],[441,443,447,449,453,455,457,460,463,466,469,472,475,478,481,484,487,490,493,497,499,502,506,509,513,516,519],[524,526,528,530,532,534],{"_105":158,"_96":159,"_160":161,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":401,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":525},[159],{"_105":186,"_96":187,"_160":188,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":404,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":527},[187],{"_105":202,"_96":203,"_160":204,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":407,"_101":32,"_168":169,"_170":-5,"_171":22,"_172":-5,"_100":529},[203],{"_105":361,"_96":362,"_160":363,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":410,"_101":32,"_168":196,"_170":365,"_171":22,"_172":-5,"_100":531},[362],{"_105":369,"_96":370,"_160":371,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":413,"_101":32,"_168":196,"_170":373,"_171":22,"_172":-5,"_100":533},[370],{"_105":377,"_96":378,"_160":379,"_162":-5,"_163":143,"_164":165,"_166":119,"_107":416,"_101":32,"_168":196,"_170":381,"_171":22,"_172":-5,"_100":535},[378],"upstream",{"_105":146,"_107":538,"_422":539,"_96":44,"_144":106,"_101":424,"_145":425,"_147":426,"_427":428,"_109":-5,"_154":22,"_111":112,"_153":95,"_16":124,"_152":97},["D",1745630485630],["D",1749490295274],"pull","ahead","behind","templates",[],"actionData","errors"]

\n build.moi\n \n

How build.moi works:

Showcase your work

Simple integration

See Charlie's Profile

$1

$1

$1

\n {val ? (\n <>\n \n {val.name}\n \n - moi.md\n \n ) : (\n 'Editor'\n )}\n

Error loading content

Error saving content

Success

{displayTitle}

{val.name}

Loading val...

Error

No vals found

@{username}

{val.name}

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