[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_334":335,"_336":337},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_110":89,"_27":111,"_13":14,"_112":-5,"_11":113,"_114":115,"_116":117,"_118":119,"_120":121,"_20":-5,"_122":-5,"_123":124,"_125":25,"_126":127,"_128":60,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":82,"_83":84,"_85":86,"_87":25},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/ProfilePreview.tsx","latestPath","fileId","d1d4f803-6cd1-49f0-b7ab-285b5cfb9eca","name","ProfilePreview.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState } from \"https://esm.sh/react@18.2.0\";\nimport { Val } from \"../../shared/types.ts\";\n\n// Props for the ProfilePreview component\ninterface ProfilePreviewProps {\n vals: Val[];\n username: string;\n onValSelect: (val: Val) => void;\n selectedValId?: string;\n}\n\n/**\n * ProfilePreview Component\n * Mimics the buildDotMoi profile page layout with tabs for Public, Unlisted, and Private vals\n */\nconst ProfilePreview: React.FC = ({ \n vals, \n username, \n onValSelect,\n selectedValId \n}) => {\n // State for the active tab (public, unlisted, private)\n const [activeTab, setActiveTab] = useState(\"public\");\n \n // Filter vals by privacy\n const publicVals = vals.filter(val => val.privacy === \"public\");\n const unlistedVals = vals.filter(val => val.privacy === \"unlisted\");\n const privateVals = vals.filter(val => val.privacy === \"private\");\n \n // Check if a val has a moi.md file (in a real implementation, this would be fetched from the API)\n const hasMoiMd = (val: Val): boolean => {\n // In a real implementation, we'd check if the val has a moi.md file\n // For now, we'll just return false to simulate that none of them have moi.md files yet\n return false;\n };\n \n // Function to render a val card\n const renderValCard = (val: Val) => {\n const isSelected = val.id === selectedValId;\n const hasMoi = hasMoiMd(val);\n \n return (\n

onValSelect(val)}\n className={`bg-white rounded-lg shadow-sm p-4 hover:shadow-md transition-shadow cursor-pointer border ${\n isSelected ? 'border-[#00b5de] ring-2 ring-[#00b5de]' : 'border-gray-200'\n }`}\n >\n {/* Val Image (if available) */}\n {val.imageUrl && (\n

{\n // Handle image loading errors\n (e.target as HTMLImageElement).src = 'data:image/svg+xml,';\n }}\n />\n

\n )}\n \n {/* Val Type Badge */}\n

\n \n {val.type}\n \n \n {/* Modified date in a subtle format */}\n \n {new Date(val.updatedAt).toLocaleDateString('en-US', { \n month: 'short', \n day: 'numeric' \n })}\n \n

\n \n {/* Val Name */}\n

\n {val.name}\n

\n \n {/* Val Description (truncated) */}\n

\n {val.description || 'No description'}\n

\n \n {/* Footer section */}\n

\n {/* HTTP endpoint indicator */}\n {val.httpEndpoint && (\n \n \n HTTP\n \n )}\n \n {/* Moi.md indicator */}\n \n \n {hasMoi ? 'moi.md' : 'Edit moi.md'}\n \n

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

\n {/* Profile Header */}\n

\n {username}'s buildDotMoi Profile Preview\n

\n A preview of how your vals will appear on your build.moi profile. Click any val to add or edit its moi.md file.\n

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

\n setActiveTab(\"public\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"public\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\"\n }`}\n >\n Code (Public Vals)\n \n setActiveTab(\"unlisted\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"unlisted\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-400 hover:text-gray-500 hover:border-gray-300\"\n } opacity-70`}\n >\n Unlisted\n \n setActiveTab(\"private\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"private\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-400 hover:text-gray-500 hover:border-gray-300\"\n } opacity-70`}\n >\n Private\n \n

\n \n {/* Loading state */}\n {vals.length === 0 && (\n

Loading vals...

\n )}\n \n {/* Public Vals Grid */}\n {activeTab === \"public\" && vals.length > 0 && (\n <>\n {publicVals.length > 0 ? (\n

\n {publicVals.map(renderValCard)}\n

\n ) : (\n

\n No public vals to display.\n

\n )}\n \n )}\n \n {/* Unlisted Vals Grid */}\n {activeTab === \"unlisted\" && vals.length > 0 && (\n <>\n {unlistedVals.length > 0 ? (\n

\n {unlistedVals.map(renderValCard)}\n

\n ) : (\n

\n No unlisted vals to display.\n

\n )}\n

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

\n \n )}\n \n {/* Private Vals Grid */}\n {activeTab === \"private\" && vals.length > 0 && (\n <>\n {privateVals.length > 0 ? (\n

\n {privateVals.map(renderValCard)}\n

\n ) : (\n

\n No private vals to display.\n

\n )}\n

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

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

How to Use This Tool:

Browse your vals in the tabs above (Public, Unlisted, Private).
Click any val to open the editor and create or edit its moi.md file.
Save your changes to make the val appear in your build.moi profile.
Remember that only Public vals will appear in your build.moi profile.

\n \n {/* No vals message */}\n {vals.length > 0 && publicVals.length === 0 && unlistedVals.length === 0 && privateVals.length === 0 && (\n

No Vals Found

\n It looks like you don't have any vals yet. Create some vals in Val Town to get started!\n

\n \n Go to Val Town\n \n

\n )}\n

\n );\n};\n\nexport default ProfilePreview;","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { MoiConfig, Val } from \"../../shared/types.ts\";\n\n// Props for the ProfilePreview component\ninterface ProfilePreviewProps {\n vals: Val[];\n username: string;\n onValSelect: (val: Val) => void;\n selectedValId?: string;\n onOpenVal?: (val: Val) => void;\n}\n\n// Extended val interface with moi information\ninterface ValWithMoi extends Val {\n hasMoi: boolean;\n moiConfig?: MoiConfig | null;\n}\n\n/**\n * ProfilePreview Component\n * Displays a view similar to buildDotMoi profile with custom tabs based on moi.md files\n */\nconst ProfilePreview: React.FC = ({ \n vals, \n username, \n onValSelect,\n selectedValId,\n onOpenVal\n}) => {\n // Enhanced state that includes vals with moi info\n const [valsWithMoi, setValsWithMoi] = useState([]);\n // State for the active tab\n const [activeTab, setActiveTab] = useState(\"posts\");\n // State for available custom tabs from moi.md files\n const [customTabs, setCustomTabs] = useState([]);\n // Loading state for fetching moi info\n const [loadingMoi, setLoadingMoi] = useState(false);\n \n // Fetch moi.md info for all vals when vals list changes\n useEffect(() => {\n const fetchMoiInfo = async () => {\n if (vals.length === 0) return;\n \n setLoadingMoi(true);\n try {\n // Fetch moi info for all vals in parallel\n const valsWithMoiPromises = vals.map(async (val) => {\n try {\n const response = await fetch(`/api/vals/${val.id}/moi`);\n if (response.ok) {\n const data = await response.json();\n return {\n ...val,\n hasMoi: data.exists,\n moiConfig: data.config\n } as ValWithMoi;\n }\n } catch (error) {\n console.error(`Error fetching moi for ${val.name}:`, error);\n }\n // Default if fetch fails\n return { ...val, hasMoi: false, moiConfig: null } as ValWithMoi;\n });\n \n const enhancedVals = await Promise.all(valsWithMoiPromises);\n setValsWithMoi(enhancedVals);\n \n // Extract all unique custom tabs from moi configs\n const allTabs = enhancedVals\n .filter(val => val.hasMoi && val.moiConfig?.tabs)\n .flatMap(val => val.moiConfig?.tabs || []);\n \n // Remove duplicates and sort alphabetically\n const uniqueTabs = [...new Set(allTabs)].sort();\n setCustomTabs(uniqueTabs);\n } catch (error) {\n console.error(\"Error fetching moi information:\", error);\n } finally {\n setLoadingMoi(false);\n }\n };\n \n fetchMoiInfo();\n }, [vals]);\n \n // Get vals for different visibility categories\n const postsVals = valsWithMoi\n .filter(val => val.hasMoi && val.moiConfig && !val.moiConfig.excludeFromPosts)\n .sort((a, b) => {\n // Sort by tier - no tier first, then lowest to highest\n const tierA = a.moiConfig?.tier;\n const tierB = b.moiConfig?.tier;\n \n // If neither has a tier, sort alphabetically\n if (tierA === undefined && tierB === undefined) {\n return a.name.localeCompare(b.name);\n }\n \n // If only one has a tier, the one without tier comes first\n if (tierA === undefined) return -1;\n if (tierB === undefined) return 1;\n \n // Otherwise sort by tier value (lower tier first)\n return tierA - tierB;\n });\n \n const unpostedVals = valsWithMoi.filter(val => !val.hasMoi);\n \n const publicVals = valsWithMoi.filter(val => val.privacy === \"public\");\n const unlistedVals = valsWithMoi.filter(val => val.privacy === \"unlisted\");\n const privateVals = valsWithMoi.filter(val => val.privacy === \"private\");\n \n // Get vals for a specific custom tab\n const getTabVals = (tabName: string) => {\n return valsWithMoi\n .filter(val => val.hasMoi && val.moiConfig?.tabs?.includes(tabName))\n .sort((a, b) => {\n // Sort by tier - no tier first, then lowest to highest\n const tierA = a.moiConfig?.tier;\n const tierB = b.moiConfig?.tier;\n \n // If neither has a tier, sort alphabetically\n if (tierA === undefined && tierB === undefined) {\n return a.name.localeCompare(b.name);\n }\n \n // If only one has a tier, the one without tier comes first\n if (tierA === undefined) return -1;\n if (tierB === undefined) return 1;\n \n // Otherwise sort by tier value (lower tier first)\n return tierA - tierB;\n });\n };\n \n // Function to render a val card\n const renderValCard = (val: ValWithMoi) => {\n const isSelected = val.id === selectedValId;\n \n return (\n

onValSelect(val)}>\n {/* Val Image (if available) */}\n {val.imageUrl && (\n

{\n // Handle image loading errors\n (e.target as HTMLImageElement).src = 'data:image/svg+xml,';\n }}\n />\n

\n )}\n \n {/* Val Type and Tier Badge */}\n

\n \n {val.type}\n \n \n {val.moiConfig?.tier !== undefined && (\n \n Tier {val.moiConfig.tier}\n \n )}\n

\n \n {/* Val Name */}\n

\n {val.name}\n

\n \n {/* Val Description (truncated) - use moi description if available */}\n

\n {val.moiConfig?.description || val.description || 'No description'}\n

\n \n {/* Tags if available */}\n {val.moiConfig?.tags && val.moiConfig.tags.length > 0 && (\n

\n {val.moiConfig.tags.slice(0, 3).map((tag, index) => (\n \n {tag}\n \n ))}\n {val.moiConfig.tags.length > 3 && (\n \n +{val.moiConfig.tags.length - 3}\n \n )}\n

\n )}\n

\n \n {/* Footer section */}\n

\n {/* Left side: HTTP endpoint indicator */}\n

\n {val.httpEndpoint && (\n \n \n HTTP\n \n )}\n \n {/* Updated date */}\n \n {new Date(val.updatedAt).toLocaleDateString('en-US', { \n month: 'short', \n day: 'numeric' \n })}\n \n

\n \n {/* Right side: Action buttons */}\n

\n {/* Edit button */}\n \n \n {/* View source button */}\n {onOpenVal && (\n \n )}\n

\n );\n };\n \n // Determine which vals to show based on active tab\n const getActiveTabVals = () => {\n if (activeTab === \"posts\") return postsVals;\n if (activeTab === \"unposted\") return unpostedVals;\n if (activeTab === \"public\") return publicVals;\n if (activeTab === \"unlisted\") return unlistedVals;\n if (activeTab === \"private\") return privateVals;\n \n // Custom tab\n return getTabVals(activeTab);\n };\n \n const currentVals = getActiveTabVals();\n \n return (\n

\n {/* Profile Header */}\n

\n {username}'s buildDotMoi Profile Preview\n

\n A preview of how your vals will appear on your build.moi profile. Click any val to add or edit its moi.md file.\n

\n \n {/* Tabs - First show custom tabs from moi files, then standard tabs */}\n

\n {/* Posts Tab (vals with moi.md) */}\n setActiveTab(\"posts\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"posts\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\"\n }`}\n >\n Posts {postsVals.length > 0 && `(${postsVals.length})`}\n \n \n {/* Custom tabs from moi.md files */}\n {customTabs.map(tab => (\n setActiveTab(tab)}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === tab\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\"\n }`}\n >\n {tab} {getTabVals(tab).length > 0 && `(${getTabVals(tab).length})`}\n \n ))}\n \n {/* Unposted Tab (vals without moi.md) */}\n setActiveTab(\"unposted\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"unposted\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300\"\n }`}\n >\n Unposted {unpostedVals.length > 0 && `(${unpostedVals.length})`}\n \n \n {/* Standard Privacy Tabs */}\n setActiveTab(\"public\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"public\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-400 hover:text-gray-500 hover:border-gray-300\"\n } ml-4`}\n >\n Code (Public) {publicVals.length > 0 && `(${publicVals.length})`}\n \n setActiveTab(\"unlisted\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"unlisted\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-400 hover:text-gray-500 hover:border-gray-300\"\n }`}\n >\n Unlisted {unlistedVals.length > 0 && `(${unlistedVals.length})`}\n \n setActiveTab(\"private\")}\n className={`py-3 border-b-2 font-medium text-sm ${\n activeTab === \"private\"\n ? \"border-[#00b5de] text-[#00b5de]\"\n : \"border-transparent text-gray-400 hover:text-gray-500 hover:border-gray-300\"\n }`}\n >\n Private {privateVals.length > 0 && `(${privateVals.length})`}\n \n

\n \n {/* Loading state */}\n {(vals.length === 0 || loadingMoi) && (\n

{vals.length === 0 ? \"Loading vals...\" : \"Loading moi.md files...\"}

\n )}\n \n {/* Current Tab Content */}\n {!loadingMoi && vals.length > 0 && (\n <>\n {currentVals.length > 0 ? (\n

\n {currentVals.map(renderValCard)}\n

\n ) : (\n

\n No vals to display in this tab.\n

\n )}\n \n {/* Notices for non-public vals */}\n {(activeTab === \"unlisted\" || activeTab === \"private\") && (\n

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

\n )}\n \n {/* Notice for unposted vals */}\n {activeTab === \"unposted\" && (\n

\n Note: These vals don't have moi.md files yet. Click on a val to create one.\n

\n )}\n \n {/* Notice for posts tab */}\n {activeTab === \"posts\" && (\n

\n Note: This tab shows public vals with moi.md files that aren't excluded from posts.\n

\n )}\n \n {/* Notice for custom tabs */}\n {customTabs.includes(activeTab) && (\n

\n Note: This tab shows vals with moi.md files that include \"{activeTab}\" in their tabs list.\n

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

How to Use This Tool:

The Posts tab shows all vals with moi.md files that will appear on your build.moi profile.
Custom tabs from your moi.md files appear between \"Posts\" and \"Unposted\".
The Unposted tab shows vals that don't have moi.md files yet.
Click any val to create or edit its moi.md file.
Use the tabs property in the moi.md frontmatter to categorize vals into custom tabs.
Use the tier property to control the display order (lower tiers appear first).
Use excludeFromPosts: true to keep a val in custom tabs but not in the main Posts tab.

\n \n {/* No vals message */}\n {!loadingMoi && vals.length > 0 && valsWithMoi.length === 0 && (\n

No Vals Found

\n It looks like you don't have any vals yet. Create some vals in Val Town to get started!\n

\n \n Go to Val Town\n \n

\n )}\n

\n );\n};\n\nexport default ProfilePreview;","createdAt",["D",1746218122892],"branchVersion","branchId","815f45ae-2794-11f0-99ac-569c3dd06744","id","e3bc817e-2471-11f0-af28-569c3dd06744","moiPosterImproved",["D",1745873201914],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Tool to manage moi.md files for Val Town content","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","1a9ec3fa-2472-11f0-9430-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion",58,"likeCount",0,"orgId","d663a026-6449-42f6-9156-1d4a2d64d38c","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_109":105},"org",{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},"branch",{"_13":88,"_32":89,"_44":43,"_90":45,"_91":92,"_93":94,"_95":51,"_96":45,"_97":67,"_98":46,"_99":100},"isOwned",6,"custom-tabs-view","projectId","forkedBranchId","e3bce056-2471-11f0-af28-569c3dd06744","forkedBranchVersion",61,"forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","dcm31","handle","displayName","Charlie","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/3e904faa-3764-4629-c475-f561a49b0000/square512?exp=1789711097&sig=f5b939aa99c4406185c6f31b24ae64ef610e4aa35051ad2138ff38d3afbcf5b7","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":330,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":-5,"_70":-5,"_71":-5,"_72":73,"_74":73,"_75":76,"_77":76,"_78":76,"_79":73,"_80":73,"_81":331,"_83":332,"_85":333,"_87":25},"tree",[196,199,210,213,214,215],"files",[196,197,198,199,200,201,202,203,204,205,206,207,208,209,210,211,212,213,214,215],"counts",{"_184":185,"_186":187,"_188":65,"_189":190,"_191":192},"contents",[140,141,142,143,144,145],"upstreamProject","upstreamBranch",{"_44":92,"_39":133,"_134":135,"_32":136,"_90":45,"_13":137,"_91":-5,"_93":-5,"_138":139,"_48":-5,"_87":25,"_50":51,"_99":100,"_66":67,"_98":46},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1745873201914],"updatedAt",["D",1747330709597],"main",63,"lockfileKey","1747330709850-esm.town_v_dcm31_moiPosterImproved@63-main",{"_44":179,"_32":180,"_30":181,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":182,"_13":65,"_34":172,"_36":-5,"_24":25,"_154":-5,"_27":183},{"_44":174,"_32":175,"_30":176,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":177,"_13":65,"_34":172,"_36":-5,"_24":25,"_154":-5,"_27":178},{"_44":168,"_32":169,"_30":170,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":171,"_13":65,"_34":172,"_36":-5,"_24":25,"_154":-5,"_27":173},{"_44":162,"_32":163,"_30":164,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":165,"_13":65,"_34":20,"_36":166,"_24":25,"_154":-5,"_27":167},{"_44":156,"_32":157,"_30":158,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":159,"_13":65,"_34":20,"_36":160,"_24":25,"_154":-5,"_27":161},{"_44":146,"_32":147,"_30":148,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":152,"_13":65,"_34":20,"_36":153,"_24":25,"_154":-5,"_27":155},"8163bd46-2794-11f0-99ac-569c3dd06744","testfile_1745875710738.txt","5ee9d0fc-87d5-4f9e-a792-027d259ef495","parentId",1,"latest",["D",1746217922778],"This is a test file created dynamically.","label",[147],"8163b940-2794-11f0-99ac-569c3dd06744","moi.md","a1d80bd7-7ffc-422e-a877-b09ec2bc0091",["D",1746217922778],"---\ntitle: \"MoiPosterImproved\"\ndescription: \"Tool to manage moi.md files for Val Town content\"\nimageUrl: \"https://chatgpt.com/backend-api/public_content/enc/eyJpZCI6Im1fNjgwZmZhYzU5MDQwODE5MThiNTEyMWVkMGRhZGEzYWQ6ZmlsZV8wMDAwMDAwMDIwMzg2MjMwYThiZWNmM2ViZjQ4NzgwYSIsInRzIjoiNDg0OTY2IiwicCI6InB5aSIsInNpZyI6IjcwYTg4NTEwZTNhYTYxMzRmMWQzNmM0MWVmMmZiNzE2ZWZkZGNkNzI0OTk3MWY4ZjNiN2NmNzExMDU5ZGNkYmEiLCJ2IjoiMCIsImdpem1vX2lkIjpudWxsfQ==\"\nurl: \"https://moiposter.val.run/\"\nauthor: \"dcm312\"\ntags: [\"val-town\",\"moi\",\"markdown\",\"vals\"]\ntabs: [\"In Progress\"]\nexcludeFromPosts: true\n---\n\n# MoiPosterImproved\n\nAn improved tool for creating and managing moi.md files across Val Town vals. This project provides both a web interface and a script that can be imported and used programmatically.\n\n## Installation\n\nThis is a Val Town project. You can use it by importing the standalone script directly:\n\n```typescript\n// Import the processor for batch operations\nimport moiPoster from \"https://esm.town/v/dcm31/moiPosterScript\";\n\n// Process all public vals\nconst results = await moiPoster({ filter: 'public' });\n```\n\n## Structure\n\nThis project includes the following components:\n\n- Backend API with Hono for handling requests\n- React-based frontend with moi.md editor and preview\n- Shared utilities for generating appropriate moi.md content\n- Batch processing functionality to update many vals at once\n\n## Features\n\n- Create and edit moi.md files with a user-friendly interface\n- Preview markdown with live updates\n- Filter vals by privacy settings\n- Batch process multiple vals at once\n- Automatic generation of appropriate frontmatter and content\n\n## Usage Examples\n\n```typescript\n// Import the processor for batch operations\nimport moiPoster from \"https://esm.town/v/dcm31/moiPosterScript\";\n\n// Process only public vals\nconst results = await moiPoster({ \n filter: 'public', \n overwrite: true // Overwrite existing moi.md files\n});\n\nconsole.log(`Created ${results.created} moi.md files`);\nconsole.log(`Updated ${results.updated} moi.md files`);\n```\n\n## License\n\nMIT\n\n---\n\nLast updated: 2025-04-30",[157],"8163b404-2794-11f0-99ac-569c3dd06744","README.md","40223c2c-57fc-456f-bd4b-04da0a88fe0c",["D",1746217922778],"# MoiPoster Improved\n\nA tool to create and manage moi.md files for Val Town vals.\n\n## Pagination Fix Branch\n\nThis branch addresses the pagination issue with the Val Town SDK integration:\n\n1. **Pagination Implementation**: Previously, the application was only fetching the first 20 vals because it wasn't properly handling pagination in the SDK calls.\n\n2. **Comprehensive Val Fetching**: Added a new function `fetchAllVals` that uses the SDK's async iterator capabilities to automatically fetch all pages of vals.\n\n### Root Causes:\n\n1. The Val Town SDK's `me.vals.list()` method only returns the first page (default of 20 items) without automatically handling pagination\n2. The application wasn't implementing any pagination logic to retrieve all vals\n\n### Changes Made:\n\n1. **moiProcessor.ts**: \n - Added a new utility function `fetchAllVals` that properly handles pagination using the SDK's async iterator capabilities\n - This function automatically fetches all pages of vals using a for-await loop\n\n2. **index.ts**:\n - Updated the `/api/vals` endpoint to use the new `fetchAllVals` function\n - Added better logging to track the pagination progress\n - Improved error handling for pagination-related issues\n\n### How to Test\n\n1. Log in with your Val Town API key\n2. The application should now load ALL of your vals, not just the first 20\n3. Check the console logs to see the total number of vals fetched with pagination\n\n## Fix Editor Input Branch\n\nThis branch addresses critical usability issues with the editors in the MoiPoster tool:\n\n1. **Input Focus Issues**: Previously, when editing input fields in the moi.md editor, the input would sometimes lose focus and freeze up, making it difficult to type smoothly.\n\n2. **Save Functionality Problems**: After the initial input focus fix, there was an issue where saving would reset content to defaults or not save the latest changes.\n\n3. **Editor Simplification**: Removed the unnecessary Editor Type toggle and Preview mode which were contributing to the usability issues.\n\n### Root Causes:\n\n1. The editor was trying to update the content in real-time with every keystroke\n2. Each update was triggering a re-render, which would cause the input to lose focus\n3. State synchronization issues between components caused saving problems\n4. Content wasn't properly tracked between components during save operations\n\n### Changes Made:\n\n1. **MoiEditor.tsx**: \n - Removed the `isUserEditing` state and automatic real-time updates\n - Simplified the change handling logic to avoid excessive state updates\n\n2. **QuickEditor.tsx**:\n - Improved direct content tracking with references\n - Made field updates immediately propagate to the parent to ensure data is saved\n - Kept all advanced options but moved them under a collapsible section\n - Added detailed logging to track changes\n\n3. **MoiEditorModal.tsx**:\n - Simplified to use only the QuickEditor component\n - Removed the editor type toggle and preview mode\n - Added content reference tracking to prevent loss of edits\n - Added safeguards to ensure latest content is always saved\n\n4. **App.tsx**:\n - Added a reference-based approach to track the latest content reliably\n - Improved save functionality to use the most up-to-date content\n - Added detailed logging for debugging content flow\n - Added safeguards against content reloading during save operations\n\n### How to Test\n\n1. Open a val in the editor\n2. Try typing in any of the input fields - you should now be able to type smoothly without the cursor jumping or input freezing\n3. Make several edits to different fields and save - all changes should be properly preserved\n4. Try editing fields in the \"Advanced Options\" section - those changes should also be properly saved\n\n## Original README Content\n\nTool to manage moi.md files for Val Town content.\n\n### Features:\n\n- Browse your vals\n- Create and edit moi.md files\n- Quickly update frontmatter\n- Save directly to your Val\n\n### What is moi.md?\n\nThe moi.md file is a special Markdown file that Val Town uses to display information about your val on the platform, especially for the [build.moi](https://www.val.town/build.moi) page.\n\n### Usage:\n\n1. Add your Val Town API key\n2. Browse and select a val\n3. Create or edit the moi.md file\n4. Save your changes\n",[163],"8163b26a-2794-11f0-99ac-569c3dd06744","shared","80af37fc-8c9f-475d-aac5-832c2197ee1e",["D",1746217922778],"directory",[169],"8163a4a0-2794-11f0-99ac-569c3dd06744","frontend","5cec5915-2a0a-4ae4-ae6b-2605953815c4",["D",1746217922778],[175],"816315d0-2794-11f0-99ac-569c3dd06744","backend","c9f54538-ce26-40fb-ac9c-ce1a8704b812",["D",1746217922778],[180],"pulls",8,"branches",12,"forks","envVars",{"_193":65,"_195":65},"connections",{"_193":65,"_194":65},"count","unfilledCount","emptyCount",{"_44":179,"_32":180,"_30":181,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":327,"_13":65,"_34":172,"_36":-5,"_24":25,"_154":-5,"_217":328,"_27":329},{"_44":319,"_32":320,"_30":321,"_149":181,"_42":43,"_41":150,"_151":25,"_39":322,"_13":65,"_34":323,"_36":324,"_24":25,"_154":-5,"_217":325,"_27":326},{"_44":312,"_32":313,"_30":314,"_149":181,"_42":43,"_41":150,"_151":25,"_39":315,"_13":65,"_34":35,"_36":316,"_24":25,"_154":-5,"_217":317,"_27":318},{"_44":174,"_32":175,"_30":176,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":309,"_13":65,"_34":172,"_36":-5,"_24":25,"_154":-5,"_217":310,"_27":311},{"_44":305,"_32":258,"_30":253,"_149":176,"_42":43,"_41":150,"_151":60,"_39":306,"_13":65,"_34":172,"_36":-5,"_24":25,"_154":-5,"_217":307,"_27":308},{"_44":298,"_32":299,"_30":300,"_149":253,"_42":43,"_41":150,"_151":60,"_39":301,"_13":65,"_34":35,"_36":302,"_24":25,"_154":-5,"_217":303,"_27":304},{"_44":291,"_32":292,"_30":293,"_149":253,"_42":43,"_41":150,"_151":60,"_39":294,"_13":65,"_34":35,"_36":295,"_24":25,"_154":-5,"_217":296,"_27":297},{"_44":284,"_32":285,"_30":286,"_149":253,"_42":43,"_41":150,"_151":60,"_39":287,"_13":65,"_34":35,"_36":288,"_24":25,"_154":-5,"_217":289,"_27":290},{"_44":277,"_32":278,"_30":279,"_149":253,"_42":43,"_41":150,"_151":60,"_39":280,"_13":65,"_34":35,"_36":281,"_24":25,"_154":-5,"_217":282,"_27":283},{"_44":270,"_32":271,"_30":272,"_149":253,"_42":43,"_41":150,"_151":60,"_39":273,"_13":65,"_34":35,"_36":274,"_24":25,"_154":-5,"_217":275,"_27":276},{"_44":263,"_32":264,"_30":265,"_149":253,"_42":43,"_41":150,"_151":60,"_39":266,"_13":65,"_34":35,"_36":267,"_24":25,"_154":-5,"_217":268,"_27":269},{"_44":259,"_32":33,"_30":31,"_149":253,"_42":43,"_41":14,"_151":60,"_39":260,"_13":150,"_34":35,"_36":38,"_24":25,"_154":-5,"_217":261,"_27":262},{"_44":250,"_32":251,"_30":252,"_149":253,"_42":43,"_41":150,"_151":60,"_39":254,"_13":65,"_34":35,"_36":255,"_24":25,"_154":-5,"_217":256,"_27":257},{"_44":243,"_32":244,"_30":245,"_149":176,"_42":43,"_41":150,"_151":60,"_39":246,"_13":65,"_34":35,"_36":247,"_24":25,"_154":-5,"_217":248,"_27":249},{"_44":168,"_32":169,"_30":170,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":240,"_13":65,"_34":172,"_36":-5,"_24":25,"_154":-5,"_217":241,"_27":242},{"_44":233,"_32":234,"_30":235,"_149":170,"_42":43,"_41":150,"_151":60,"_39":236,"_13":65,"_34":20,"_36":237,"_24":25,"_154":-5,"_217":238,"_27":239},{"_44":226,"_32":227,"_30":228,"_149":170,"_42":43,"_41":150,"_151":60,"_39":229,"_13":65,"_34":20,"_36":230,"_24":25,"_154":-5,"_217":231,"_27":232},{"_44":162,"_32":163,"_30":164,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":223,"_13":65,"_34":20,"_36":166,"_24":25,"_154":-5,"_217":224,"_27":225},{"_44":156,"_32":157,"_30":158,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":220,"_13":65,"_34":20,"_36":160,"_24":25,"_154":-5,"_217":221,"_27":222},{"_44":146,"_32":147,"_30":148,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":216,"_13":65,"_34":20,"_36":153,"_24":25,"_154":-5,"_217":218,"_27":219},["D",1746217922778],"children",[],[147],["D",1746217922778],[],[157],["D",1746217922778],[],[163],"8163b094-2794-11f0-99ac-569c3dd06744","types.ts","dac43744-912d-44d2-9dd3-cf765f42c90d",["D",1746217922778],"/**\n * Shared type definitions for MoiPoster\n */\n\n// Val types\nexport interface Val {\n id: string;\n name: string;\n owner: string;\n description: string | null;\n type: string;\n privacy: string;\n updatedAt: string;\n createdAt: string;\n tags: string[];\n imageUrl?: string;\n httpEndpoint?: string | null;\n}\n\n// Moi configuration interface\nexport interface MoiConfig {\n title: string;\n description: string;\n imageUrl?: string;\n url?: string;\n author?: string;\n tags: string[];\n tier?: number; // Priority level, lower numbers appear first\n tabs?: string[]; // Custom tab names for categorization\n excludeFromPosts?: boolean; // Exclude from main Posts tab but keep in custom tabs\n}\n\n// Moi file interface\nexport interface MoiFile {\n exists: boolean;\n content: string;\n config?: MoiConfig;\n}\n\n// Batch operation options\nexport interface BatchOptions {\n filter?: 'all' | 'public' | 'private' | 'unlisted';\n overwrite?: boolean;\n dryRun?: boolean;\n}\n\n// Batch operation results\nexport interface BatchResults {\n processed: number;\n created: number;\n updated: number;\n skipped: number;\n errors: Array<{ id: string, name: string, error: string }>;\n}\n",[],[169,227],"8163a6bc-2794-11f0-99ac-569c3dd06744","generators.ts","6a190b0f-bb75-4dd7-b3bd-44e150133ac1",["D",1746217922778],"/**\n * Shared utilities for generating moi.md content\n */\nimport { Val, MoiConfig } from \"./types.ts\";\n\n/**\n * Clean a string for YAML frontmatter (escape quotes)\n */\nexport function cleanString(str: string | null | undefined): string {\n if (!str) return \"\";\n return str.replace(/\"/g, '\\\\\"').trim();\n}\n\n/**\n * Parse existing moi.md content to extract configuration\n */\nexport function parseMoiContent(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 // Default config\n const config: MoiConfig = {\n title: \"\",\n description: \"\",\n tags: []\n };\n \n // Parse YAML manually\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 (for tags and tabs)\n if ((key === 'tags' || key === 'tabs') && value.startsWith('[') && value.endsWith(']')) {\n try {\n // Try to parse as JSON\n const parsedArray = JSON.parse(value);\n config[key] = parsedArray;\n } catch (e) {\n // Fallback to simple parsing\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 }\n } \n // Handle tier as a number\n else if (key === 'tier') {\n // Convert to number if possible\n const numValue = parseFloat(value);\n config[key] = isNaN(numValue) ? undefined : numValue;\n }\n // Handle excludeFromPosts as a boolean\n else if (key === 'excludeFromPosts') {\n config[key] = value.toLowerCase() === 'true';\n }\n // Handle other string fields\n else if (key === 'title' || key === 'description' || key === 'imageUrl' || \n key === 'url' || key === 'author') {\n config[key] = value;\n }\n }\n \n return config;\n } catch (error) {\n console.error(\"Error parsing moi content:\", error);\n return null;\n }\n}\n\n/**\n * Generate moi.md content for a Val with optional tier and tabs\n */\nexport function generateValMoiContent(\n val: Val & { httpEndpoint?: string | null }, // Extended type to accept httpEndpoint\n username?: string, // New parameter for the authenticated username\n options?: { \n tier?: number;\n tabs?: string[];\n excludeFromPosts?: boolean;\n preserveExisting?: boolean;\n existingContent?: string;\n }\n): string {\n // Parse existing content if provided and preservation is requested\n let existingConfig: MoiConfig | null = null;\n if (options?.preserveExisting && options?.existingContent) {\n existingConfig = parseMoiContent(options.existingContent);\n }\n \n // Use existing values or defaults\n const name = cleanString(existingConfig?.title || val.name || \"Untitled Val\");\n const description = cleanString(existingConfig?.description || val.description || `A ${val.type} val`);\n const imageUrl = existingConfig?.imageUrl || val.imageUrl;\n \n // For URL, prioritize:\n // 1. Existing URL from content if preserving\n // 2. HTTP endpoint from val object\n // 3. Default endpoint URL for HTTP vals \n const url = existingConfig?.url || \n (val.httpEndpoint ? cleanString(val.httpEndpoint) : undefined) || \n (val.type === 'http' ? `https://${val.owner}--${val.name.replace(/-/g, '')}.web.val.run` : undefined);\n \n // Use the provided username, or fall back to the val's owner, or use an empty string\n const author = existingConfig?.author || username || val.owner || \"\";\n const tags = (existingConfig?.tags && existingConfig.tags.length > 0) \n ? existingConfig.tags \n : (Array.isArray(val.tags) && val.tags.length > 0 ? val.tags : [\"val-town\"]);\n \n // Handle tier and tabs - prefer options, fall back to existing, otherwise undefined\n const tier = options?.tier !== undefined \n ? options.tier \n : existingConfig?.tier;\n \n const tabs = options?.tabs !== undefined \n ? options.tabs \n : existingConfig?.tabs;\n \n // Handle excludeFromPosts - prefer options, fall back to existing, otherwise undefined\n const excludeFromPosts = options?.excludeFromPosts !== undefined\n ? options.excludeFromPosts\n : existingConfig?.excludeFromPosts;\n \n // Build frontmatter\n let frontmatter = `---\ntitle: \"${name}\"\ndescription: \"${description}\"`;\n\n // Only add fields if they have values\n if (imageUrl) {\n frontmatter += `\\nimageUrl: \"${imageUrl}\"`;\n }\n \n if (url) {\n frontmatter += `\\nurl: \"${url}\"`;\n }\n \n if (author) {\n frontmatter += `\\nauthor: \"${author}\"`;\n }\n \n // Always include tags\n frontmatter += `\\ntags: ${JSON.stringify(tags)}`;\n\n // Add tier if defined\n if (tier !== undefined) {\n frontmatter += `\\ntier: ${tier}`;\n }\n \n // Add tabs if defined\n if (tabs && tabs.length > 0) {\n frontmatter += `\\ntabs: ${JSON.stringify(tabs)}`;\n }\n \n // Add excludeFromPosts if defined\n if (excludeFromPosts !== undefined) {\n frontmatter += `\\nexcludeFromPosts: ${excludeFromPosts}`;\n }\n \n // Close frontmatter\n frontmatter += `\\n---`;\n\n // Build content section with endpoint URL highlighted if available\n let content = `${frontmatter}\n\n## About\n\n${description}`;\n\n // Add endpoint section if HTTP endpoint is available\n if (val.httpEndpoint) {\n content += `\n\n## HTTP Endpoint\n\nThis val is accessible via the following URL:\n\n\\`${val.httpEndpoint}\\``;\n }\n\n // Use username for import statements when available\n const ownerOrUsername = username || val.owner || \"\";\n\n // Add standard usage section\n content += `\n\n## Usage\n\n\\`\\`\\`typescript\n// Import this val\nimport { ${val.name} } from \"https://esm.town/v/${ownerOrUsername}/${val.name}\";\n\n// Example usage\n// ...\n\\`\\`\\`\n\n## Notes\n\n- Created: ${new Date(val.createdAt).toISOString().split('T')[0]}\n- Last updated: ${new Date().toISOString().split('T')[0]}\n- Type: ${val.type || \"script\"}\n- Privacy: ${val.privacy || \"public\"}`;\n\n // Add tier, tabs, and excludeFromPosts documentation if they are used\n if (tier !== undefined || (tabs && tabs.length > 0) || excludeFromPosts !== undefined) {\n let advancedConfig = '\\n\\n## Advanced Configuration\\n\\n';\n \n if (tier !== undefined) {\n advancedConfig += `- **Priority Tier**: ${tier} (lower values appear first)\\n`;\n }\n \n if (tabs && tabs.length > 0) {\n advancedConfig += `- **Custom Tabs**: ${tabs.join(', ')}\\n`;\n }\n \n if (excludeFromPosts !== undefined) {\n advancedConfig += `- **Exclude From Posts**: ${excludeFromPosts ? 'Yes' : 'No'} (controls visibility in main Posts tab)\\n`;\n }\n \n return content + advancedConfig;\n }\n\n return content;\n}\n",[],[169,234],["D",1746217922778],[211,212],[169],"81638164-2794-11f0-99ac-569c3dd06744","index.tsx","d245335d-bc24-468b-8013-3fca4435c8d6",["D",1746217922778],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"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// Initialize React application\ncreateRoot(document.getElementById(\"root\")!).render();",[],[175,244],"816373a4-2794-11f0-99ac-569c3dd06744","QuickEditor.tsx","96d52379-d419-4a98-a1ae-54761ef927de","9db3319b-1f13-4ab1-a510-ff58e9941789",["D",1746217922778],"/** @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; // Added key prop for forced re-rendering\n showAdvancedByDefault?: boolean;\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 } = props;\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: [],\n author: username || '',\n url: '',\n tier: undefined,\n tabs: [],\n excludeFromPosts: false,\n content: ''\n });\n \n const [tagsInput, setTagsInput] = useState('');\n const [tabsInput, setTabsInput] = useState('');\n const [showAdvanced, setShowAdvanced] = useState(showAdvancedByDefault);\n const [loaded, setLoaded] = useState(false);\n \n // Parse the markdown on first load\n useEffect(() => {\n if (!value) {\n const defaultMetadata = {\n title: '',\n description: '',\n imageUrl: '',\n url: '',\n tags: [],\n author: username || '',\n tier: undefined,\n tabs: [],\n excludeFromPosts: false,\n content: ''\n };\n \n setMetadata(defaultMetadata);\n setTagsInput('');\n setTabsInput('');\n setLoaded(false);\n return;\n }\n \n try {\n const parsed = parseMdContent(value);\n \n const newMetadata = {\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 setMetadata(newMetadata);\n \n setTagsInput((parsed.tags || ['val-town']).join(', '));\n setTabsInput((parsed.tabs || []).join(', '));\n setLoaded(true);\n } catch (error) {\n console.error('Error parsing markdown:', error);\n // Fallback to default\n const defaultMetadata = {\n title: '',\n description: '',\n imageUrl: '',\n url: '',\n tags: ['val-town'],\n author: username || '',\n tier: undefined,\n tabs: [],\n excludeFromPosts: false,\n content: value\n };\n \n setMetadata(defaultMetadata);\n setTagsInput('val-town');\n setTabsInput('');\n setLoaded(true);\n }\n }, [value, username]);\n \n // When username changes and we don't have an author yet, update it\n useEffect(() => {\n if (username && !metadata.author && loaded) {\n setMetadata(prev => {\n const updated = { ...prev, author: username };\n return updated;\n });\n }\n }, [username, metadata.author, loaded]);\n \n // Fetch the actual username from the API if we have a valId\n useEffect(() => {\n if (!valId || !apiToken || metadata.author) return;\n \n const fetchUsername = async () => {\n try {\n const response = await fetch(`/api/username/${username}`, {\n headers: { 'Authorization': `Bearer ${apiToken}` }\n });\n \n if (response.ok) {\n const data = await response.json();\n if (data.username) {\n setMetadata(prev => {\n const updated = { ...prev, author: data.username };\n return updated;\n });\n }\n }\n } catch (error) {\n console.warn('Error fetching username:', error);\n }\n };\n \n if (username) {\n fetchUsername();\n }\n }, [valId, apiToken, username, metadata.author]);\n \n // Function to generate markdown from current metadata state\n const getMarkdownContent = () => {\n return generateMarkdown(metadata);\n };\n \n // Expose the getMarkdownContent method to parent components via ref\n useImperativeHandle(ref, () => ({\n getMarkdownContent: () => {\n const content = generateMarkdown(metadata);\n console.log(\"Getting markdown content:\", content.substring(0, 50) + \"...\");\n return content;\n }\n }));\n \n // Submit current content on unmount\n useEffect(() => {\n return () => {\n onChange(generateMarkdown(metadata));\n };\n }, [metadata, onChange]);\n \n // Update a field in the metadata - local state only\n const updateField = (field: keyof Metadata, value: string | string[] | number | boolean) => {\n // Update local state only - don't propagate changes to parent yet\n setMetadata(prev => ({\n ...prev,\n [field]: value\n }));\n };\n \n // Handle tags input change\n const handleTagsChange = (value: string) => {\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 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 setShowAdvanced(prev => !prev);\n };\n \n // Generate markdown from metadata\n const generateMarkdown = (data: Metadata): string => {\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 // Handle content change from the editor - update local state only\n const handleContentChange = (content: string) => {\n updateField('content', content);\n };\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\"\n placeholder=\"Val title\"\n disabled={disabled}\n />\n

\n \n

\n \n Description\n \n updateField('description', e.target.value)}\n className=\"w-full p-2 border rounded-md\"\n placeholder=\"Brief description of this val\"\n disabled={disabled}\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\"\n placeholder=\"https://example.com/image.png\"\n disabled={disabled}\n />\n

\n \n

\n \n Tags (Comma separated)\n \n handleTagsChange(e.target.value)}\n className=\"w-full p-2 border rounded-md\"\n placeholder=\"val-town, tool, utility\"\n disabled={disabled}\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\"\n placeholder={username || \"username\"}\n disabled={disabled}\n />\n

\n \n

\n \n URL (Optional)\n \n updateField('url', e.target.value)}\n className=\"w-full p-2 border rounded-md\"\n placeholder=\"Leave blank unless you have a specific endpoint URL\"\n disabled={disabled}\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\"\n placeholder=\"1.0\"\n disabled={disabled}\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\"\n placeholder=\"Projects, Tutorials, Demos\"\n disabled={disabled}\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\"\n disabled={disabled}\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});\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;",[],[175,258,251],"components","f8aa626a-2794-11f0-8b30-569c3dd06744",["D",1746218122892],[],[175,258,33],"81635edc-2794-11f0-99ac-569c3dd06744","MoiEditorModal.tsx","7acdad71-88c7-427c-9cf4-677c33858e93",["D",1746217922778],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { Val } from \"../../shared/types.ts\";\nimport QuickEditor from \"./QuickEditor.tsx\";\nimport MarkdownPreview from \"./MarkdownPreview.tsx\";\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 // 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 syncAndClose();\n }\n };\n \n window.addEventListener('keydown', handleEscapeKey);\n return () => {\n window.removeEventListener('keydown', handleEscapeKey);\n };\n }, [onClose, onContentChange]);\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.owner}/${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 return editorRef.current.getMarkdownContent();\n }\n return moiContent; // Fallback\n };\n \n // Sync content with parent before closing\n const syncAndClose = () => {\n const currentContent = getCurrentContent();\n console.log(\"Syncing content before close:\", currentContent.substring(0, 50) + \"...\");\n onContentChange(currentContent);\n onClose();\n };\n\n // Handle save button press\n const handleSave = () => {\n // Get the latest content from the editor\n const currentContent = getCurrentContent();\n console.log(\"Saving content:\", currentContent.substring(0, 50) + \"...\");\n \n // Update parent with current content first\n onContentChange(currentContent);\n \n // Then trigger save with a small delay to ensure state is updated\n setTimeout(() => {\n onSave();\n }, 100);\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 */}\n \n \n \n

\n \n {/* Controls */}\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 // This only runs on unmount - not during typing\n console.log(\"QuickEditor onChange triggered\");\n }}\n disabled={disabled || saving || loadingItem}\n username={username}\n valId={val?.id}\n apiToken={apiToken}\n showAdvancedByDefault={true}\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;",[],[175,258,264],"81634ec4-2794-11f0-99ac-569c3dd06744","MoiEditor.tsx","b9bb96f2-01d0-42e8-9dc4-a50919ad0ab7",["D",1746217922778],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useState, useEffect, useRef, useCallback } from \"https://esm.sh/react@18.2.0\";\nimport Editor from \"./Editor.tsx\";\n\ninterface MoiEditorProps {\n value: string;\n onChange: (value: string) => void;\n disabled?: boolean;\n username?: string; // Username prop to set default author\n valId?: string; // Val ID for fetching endpoints\n apiToken?: string; // Token for API requests\n}\n\ninterface Endpoint {\n name: string;\n url: string;\n}\n\ninterface FrontmatterFields {\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}\n\n/**\n * Component for editing moi.md files with a field-by-field editor for frontmatter\n */\nconst MoiEditor: React.FC = ({ \n value, \n onChange, \n disabled = false, \n username = '', \n valId = '', \n apiToken = '' \n}) => {\n const [editMode, setEditMode] = useState<'field' | 'raw'>('field');\n const [frontmatter, setFrontmatter] = useState({\n title: '',\n description: '',\n imageUrl: '',\n url: '',\n author: username || '', // Default to username if provided\n tags: [],\n tier: undefined,\n tabs: [],\n excludeFromPosts: false\n });\n const [content, setContent] = useState('');\n const [tagsInput, setTagsInput] = useState('');\n const [tabsInput, setTabsInput] = useState('');\n const [endpoints, setEndpoints] = useState([]);\n const [loadingEndpoints, setLoadingEndpoints] = useState(false);\n const [endpointsError, setEndpointsError] = useState(null);\n \n // Flag to prevent initial onChange call\n const initializedRef = useRef(false);\n \n // Fetch HTTP endpoints if available\n useEffect(() => {\n if (!valId || !apiToken) return;\n \n const fetchEndpoints = async () => {\n setLoadingEndpoints(true);\n setEndpointsError(null);\n \n try {\n const response = await fetch(`/api/vals/${valId}/endpoints`, {\n headers: { 'Authorization': `Bearer ${apiToken}` }\n });\n \n if (!response.ok) {\n throw new Error(`Failed to fetch endpoints: ${response.statusText}`);\n }\n \n const data = await response.json();\n setEndpoints(data.endpoints || []);\n } catch (error) {\n console.error('Error fetching endpoints:', error);\n setEndpointsError(error instanceof Error ? error.message : 'Unknown error');\n } finally {\n setLoadingEndpoints(false);\n }\n };\n \n fetchEndpoints();\n }, [valId, apiToken]);\n\n // Parse the markdown content when it changes from outside\n useEffect(() => {\n if (!value) return;\n \n const parsedData = parseMdContent(value);\n \n // Set author to username if empty and username is provided\n if (!parsedData.parsedFrontmatter.author && username) {\n parsedData.parsedFrontmatter.author = username;\n }\n \n setFrontmatter(parsedData.parsedFrontmatter);\n setContent(parsedData.parsedContent);\n \n // Convert tags array to comma-separated string for input\n if (Array.isArray(parsedData.parsedFrontmatter.tags)) {\n setTagsInput(parsedData.parsedFrontmatter.tags.join(', '));\n }\n \n // Convert tabs array to comma-separated string for input\n if (Array.isArray(parsedData.parsedFrontmatter.tabs)) {\n setTabsInput(parsedData.parsedFrontmatter.tabs.join(', '));\n }\n \n // Mark as initialized\n initializedRef.current = true;\n }, [value, username]);\n \n // Generate the combined markdown\n const generateCombinedMarkdown = useCallback(() => {\n // Convert tags from comma-separated string to array\n const tagsArray = tagsInput\n .split(',')\n .map(tag => tag.trim())\n .filter(tag => tag.length > 0);\n \n // Convert tabs from comma-separated string to array\n const tabsArray = tabsInput\n .split(',')\n .map(tab => tab.trim())\n .filter(tab => tab.length > 0);\n \n // Generate YAML frontmatter\n let yaml = '---\\n';\n yaml += `title: \"${frontmatter.title}\"\\n`;\n yaml += `description: \"${frontmatter.description}\"\\n`;\n \n if (frontmatter.imageUrl) {\n yaml += `imageUrl: \"${frontmatter.imageUrl}\"\\n`;\n }\n \n if (frontmatter.url) {\n yaml += `url: \"${frontmatter.url}\"\\n`;\n }\n \n if (frontmatter.author) {\n yaml += `author: \"${frontmatter.author}\"\\n`;\n }\n \n yaml += `tags: ${JSON.stringify(tagsArray)}\\n`;\n \n // Add tier if provided\n if (frontmatter.tier !== undefined && frontmatter.tier !== '') {\n // Convert to number if possible\n const tierValue = parseFloat(String(frontmatter.tier));\n if (!isNaN(tierValue)) {\n yaml += `tier: ${tierValue}\\n`;\n }\n }\n \n // Add tabs if provided\n if (tabsArray.length > 0) {\n yaml += `tabs: ${JSON.stringify(tabsArray)}\\n`;\n }\n \n // Add excludeFromPosts if true\n if (frontmatter.excludeFromPosts === true) {\n yaml += `excludeFromPosts: true\\n`;\n }\n \n yaml += '---\\n\\n';\n \n // Combine with content\n return yaml + content;\n }, [frontmatter, content, tagsInput, tabsInput]);\n\n // Apply changes function\n const applyChanges = useCallback(() => {\n if (!initializedRef.current) return;\n \n const newMarkdown = generateCombinedMarkdown();\n onChange(newMarkdown);\n }, [generateCombinedMarkdown, onChange]);\n\n // Handle field change without triggering a full update\n const handleFieldChange = (field: keyof FrontmatterFields, value: string | number | boolean) => {\n setFrontmatter(prev => ({ ...prev, [field]: value }));\n };\n\n // Handle content change\n const handleContentChange = (newContent: string) => {\n setContent(newContent);\n };\n\n // Handle tags input change\n const handleTagsChange = (value: string) => {\n setTagsInput(value);\n \n const tagsArray = value\n .split(',')\n .map(tag => tag.trim())\n .filter(tag => tag.length > 0);\n \n setFrontmatter(prev => ({ ...prev, tags: tagsArray }));\n };\n \n // Handle tabs input change\n const handleTabsChange = (value: string) => {\n setTabsInput(value);\n \n const tabsArray = value\n .split(',')\n .map(tab => tab.trim())\n .filter(tab => tab.length > 0);\n \n setFrontmatter(prev => ({ ...prev, tabs: tabsArray }));\n };\n \n // Toggle excludeFromPosts boolean\n const handleExcludeFromPostsChange = (e: React.ChangeEvent) => {\n setFrontmatter(prev => ({ ...prev, excludeFromPosts: e.target.checked }));\n };\n \n // Handle endpoint selection from dropdown\n const handleEndpointSelect = (e: React.ChangeEvent) => {\n const selectedUrl = e.target.value;\n if (selectedUrl) {\n setFrontmatter(prev => ({ ...prev, url: selectedUrl }));\n }\n };\n\n // Handle direct editing of the raw markdown\n const handleRawChange = (newValue: string) => {\n // For raw mode, we directly update the value\n onChange(newValue);\n };\n\n // Apply changes when switching between modes\n const handleModeSwitch = (mode: 'field' | 'raw') => {\n // If we're switching from field to raw, apply any pending changes\n if (editMode === 'field' && mode === 'raw') {\n applyChanges();\n }\n \n setEditMode(mode);\n };\n\n return (\n

Edit moi.md

\n handleModeSwitch('field')}\n className={`px-3 py-1 rounded-l-md text-sm ${\n editMode === 'field'\n ? 'bg-blue-600 text-white'\n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n disabled={disabled}\n >\n Field Editor\n \n handleModeSwitch('raw')}\n className={`px-3 py-1 rounded-r-md text-sm ${\n editMode === 'raw'\n ? 'bg-blue-600 text-white'\n : 'bg-gray-200 text-gray-700 hover:bg-gray-300'\n }`}\n disabled={disabled}\n >\n Raw Markdown\n \n

\n\n {editMode === 'field' ? (\n

\n {/* Frontmatter fields */}\n

\n \n Title\n \n handleFieldChange('title', e.target.value)}\n className=\"w-full p-2 border rounded-md\"\n placeholder=\"Val title\"\n disabled={disabled}\n />\n

\n \n

\n \n Description\n \n handleFieldChange('description', e.target.value)}\n className=\"w-full p-2 border rounded-md\"\n placeholder=\"Brief description of this val\"\n disabled={disabled}\n />\n

\n \n

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

\n \n

\n \n URL (Optional)\n \n

\n handleFieldChange('url', e.target.value)}\n className=\"w-full p-2 border rounded-md\"\n placeholder=\"Leave blank unless you have a specific endpoint URL\"\n disabled={disabled}\n />\n \n {/* HTTP Endpoints Dropdown */}\n {endpoints.length > 0 && (\n

\n \n Available HTTP Endpoints:\n \n \n \n {endpoints.map((endpoint, index) => (\n \n ))}\n \n

\n )}\n \n {loadingEndpoints && (\n

\n Loading HTTP endpoints...\n

\n )}\n

\n \n

\n \n Author (Optional)\n \n handleFieldChange('author', e.target.value)}\n className=\"w-full p-2 border rounded-md\"\n placeholder={username || \"username\"}\n disabled={disabled}\n />\n

\n \n

\n \n Tags (Comma separated)\n \n handleTagsChange(e.target.value)}\n className=\"w-full p-2 border rounded-md\"\n placeholder=\"val-town, tool, utility\"\n disabled={disabled}\n />\n

\n \n {/* New fields for tier, tabs, and excludeFromPosts */}\n

\n \n Priority Tier (Optional, lower numbers appear first)\n \n handleFieldChange('tier', e.target.value)}\n className=\"w-full p-2 border rounded-md\"\n placeholder=\"1.0\"\n disabled={disabled}\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\"\n placeholder=\"Projects, Tutorials, Demos\"\n disabled={disabled}\n />\n

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

\n \n

\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 {/* Content editor */}\n

\n \n Content\n \n \n

\n \n {/* Save button */}\n

\n \n Update Preview\n \n

\n ) : (\n \n )}\n

\n );\n};\n\n/**\n * Parse markdown content to extract frontmatter and content\n */\nfunction parseMdContent(markdown: string): { \n parsedFrontmatter: FrontmatterFields, \n parsedContent: string \n} {\n // Initialize with defaults\n const parsedFrontmatter: FrontmatterFields = {\n title: '',\n description: '',\n imageUrl: '',\n url: '',\n author: '',\n tags: [],\n tier: undefined,\n tabs: [],\n excludeFromPosts: false\n };\n \n let parsedContent = '';\n \n // Check if content has frontmatter\n if (markdown.startsWith('---')) {\n // Find the end of the frontmatter block\n const endIndex = markdown.indexOf('---', 3);\n \n if (endIndex !== -1) {\n // Extract the frontmatter section\n const frontmatterText = markdown.substring(3, endIndex).trim();\n \n // Extract the content after frontmatter\n parsedContent = markdown.substring(endIndex + 3).trim();\n \n // Parse YAML manually (enhanced version)\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 (for tags and tabs)\n if ((key === 'tags' || key === 'tabs') && value.startsWith('[') && value.endsWith(']')) {\n try {\n // Try to parse as JSON\n parsedFrontmatter[key] = JSON.parse(value);\n } catch (e) {\n // Fallback to simple parsing\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 parsedFrontmatter[key] = arrayItems;\n }\n } \n // Handle tier as a number\n else if (key === 'tier') {\n // Convert to number if possible\n const numValue = parseFloat(value);\n parsedFrontmatter.tier = isNaN(numValue) ? value : numValue;\n }\n // Handle excludeFromPosts as a boolean\n else if (key === 'excludeFromPosts') {\n parsedFrontmatter.excludeFromPosts = value.toLowerCase() === 'true';\n }\n // Handle other string fields\n else if (key === 'title') {\n parsedFrontmatter.title = value;\n } else if (key === 'description') {\n parsedFrontmatter.description = value;\n } else if (key === 'imageUrl') {\n parsedFrontmatter.imageUrl = value;\n } else if (key === 'url') {\n parsedFrontmatter.url = value;\n } else if (key === 'author') {\n parsedFrontmatter.author = value;\n }\n }\n } else {\n // If no proper frontmatter format, treat everything as content\n parsedContent = markdown;\n }\n } else {\n // If no frontmatter, treat everything as content\n parsedContent = markdown;\n }\n \n return { parsedFrontmatter, parsedContent };\n}\n\nexport default MoiEditor;",[],[175,258,271],"81634d66-2794-11f0-99ac-569c3dd06744","MarkdownPreview.tsx","09e9d22e-8f47-4a6c-a982-5314b868e641",["D",1746217922778],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\ninterface MarkdownPreviewProps {\n markdown: string;\n}\n\n/**\n * A component to render a simple preview of markdown content\n */\nconst MarkdownPreview: React.FC = ({ markdown }) => {\n // Simple markdown to HTML converter\n const markdownToHtml = (markdown: string): string => {\n // Convert headings\n let html = markdown\n .replace(/^# (.*$)/gm, '

$1

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

$1

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

$1

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

$1

');\n\n // Convert bold and italic\n html = html\n .replace(/\\*\\*(.*?)\\*\\*/g, '$1')\n .replace(/\\*(.*?)\\*/g, '$1');\n\n // Convert lists\n html = html\n .replace(/^\\s*- (.*$)/gm, '

')\n .replace(/<\\/li>\\n

/g, '

');\n\n html = html.replace(/(

.*<\\/li>)/gs, '

$1');\n\n // Convert code blocks\n html = html.replace(/```([\\s\\S]*?)```/g, '

$1

');\n \n // Convert inline code\n html = html.replace(/`([^`]+)`/g, '$1');\n\n // Handle paragraphs\n html = html.replace(/^(?!<[a-z]).+/gm, '

').replace(/

\\s*<\\/p>/g, '');\n\n // Handle newlines\n html = html.replace(/\\n/g, '
');\n\n return html;\n };\n\n return (\n

\n \n

\n );\n};\n\nexport default MarkdownPreview;",[],[175,258,278],"816347ee-2794-11f0-99ac-569c3dd06744","ItemList.tsx","daa4c85a-4398-4a33-b180-a1ea97a3ba4c",["D",1746217922778],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { Val } from \"../../shared/types.ts\";\n\ninterface ItemListProps {\n items: Val[];\n onSelectItem: (item: Val) => void;\n selectedItemId?: string;\n loading?: boolean;\n}\n\n/**\n * List component for displaying vals\n */\nconst ItemList: React.FC = ({ \n items, \n onSelectItem, \n selectedItemId,\n loading = false\n}) => {\n if (loading) {\n return (\n

\n );\n }\n\n if (items.length === 0) {\n return (\n

No vals found.

\n );\n }\n\n const formatDate = (dateString: string) => {\n const date = new Date(dateString);\n return date.toLocaleDateString(undefined, { \n year: 'numeric', \n month: 'short', \n day: 'numeric' \n });\n };\n\n return (\n

onSelectItem(val)}\n >\n
\n
\n
{val.name}
\n \n {val.privacy}\n \n
\n \n {val.description && (\n
{val.description}
\n )}\n \n
\n
\n @{val.owner}\n
\n
\n Updated: {formatDate(val.updatedAt)}\n
\n
\n \n
\n Type: {val.type}\n
\n \n
\n {val.tags && val.tags.length > 0 && (\n
\n {val.tags.slice(0, 3).map((tag, index) => (\n \n {tag}\n \n ))}\n {val.tags.length > 3 && (\n \n +{val.tags.length - 3} more\n \n )}\n
\n )}\n
\n
\n

\n );\n};\n\nexport default ItemList;",[],[175,258,285],"81632be2-2794-11f0-99ac-569c3dd06744","Editor.tsx","303d900e-07ad-431a-bde7-007686e66e0e",["D",1746217922778],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useRef, useEffect } from \"https://esm.sh/react@18.2.0\";\n\ninterface EditorProps {\n value: string;\n onChange: (value: string) => void;\n disabled?: boolean;\n}\n\n/**\n * Markdown editor component with auto-resize\n */\nconst Editor: React.FC = ({ value, onChange, disabled = false }) => {\n const textareaRef = useRef(null);\n\n // Auto-resize textarea based on content\n useEffect(() => {\n const textarea = textareaRef.current;\n if (!textarea) return;\n\n const adjustHeight = () => {\n textarea.style.height = 'auto';\n textarea.style.height = `${textarea.scrollHeight}px`;\n };\n\n textarea.addEventListener('input', adjustHeight);\n adjustHeight();\n\n return () => {\n textarea.removeEventListener('input', adjustHeight);\n };\n }, [value]);\n\n // Handle tab key to insert spaces instead of changing focus\n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Tab') {\n e.preventDefault();\n \n const textarea = e.currentTarget;\n const start = textarea.selectionStart;\n const end = textarea.selectionEnd;\n \n // Insert 2 spaces at cursor position\n const newValue = value.substring(0, start) + ' ' + value.substring(end);\n onChange(newValue);\n \n // Move cursor after the inserted spaces\n setTimeout(() => {\n textarea.selectionStart = textarea.selectionEnd = start + 2;\n }, 0);\n }\n };\n\n return (\n

\n markdown\n

\n {value.length} characters\n

\n onChange(e.target.value)}\n onKeyDown={handleKeyDown}\n className={`w-full p-4 min-h-[300px] focus:outline-none font-mono text-gray-800 resize-none ${\n disabled ? 'bg-gray-50 cursor-not-allowed opacity-70' : ''\n }`}\n placeholder=\"Write your markdown here...\"\n disabled={disabled}\n />\n

\n );\n};\n\nexport default Editor;\n",[],[175,258,292],"81631760-2794-11f0-99ac-569c3dd06744","App.tsx","87d14b43-ed44-4f49-a900-9348f562fa94",["D",1746217922778],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useState, useRef } from \"https://esm.sh/react@18.2.0\";\nimport { MoiFile, Val } from \"../../shared/types.ts\";\nimport ProfilePreview from \"./ProfilePreview.tsx\";\nimport MoiEditorModal from \"./MoiEditorModal.tsx\";\n\n// Color Palette Constants (for reference, used directly in Tailwind classes)\n// Main Blue (lightish): #c8e9f3\n// White (off-white): #faf8f4\n// Gray (purplish): #cac8ef\n// Secondary Red: #ee205d\n// Accent Green: #48c05d\n// Accent Yellow: #fdbb2e\n// Accent Aqua: #00b5de\n// Text Black: #000000\n\n/**\n * Main App component\n */\nconst App: React.FC = () => {\n const [vals, setVals] = useState([]);\n const [loading, setLoading] = useState(false);\n const [error, setError] = useState(null);\n const [selectedVal, setSelectedVal] = useState(null);\n const [moiContent, setMoiContent] = useState(\"\");\n const [hasMoiFile, setHasMoiFile] = useState(false);\n const [saving, setSaving] = useState(false);\n const [saveError, setSaveError] = useState(null);\n const [saveSuccess, setSaveSuccess] = useState(false);\n const [filterPrivacy, setFilterPrivacy] = useState(\"all\");\n const [loadingItem, setLoadingItem] = useState(false);\n const [itemError, setItemError] = useState(null);\n const [apiToken, setApiToken] = useState(() => window.sessionStorage.getItem(\"valTownApiKey\") || \"\");\n const [tokenError, setTokenError] = useState(null);\n const [username, setUsername] = useState(\"\");\n // Flag to track if we've already tried to fetch data\n const [initialFetchDone, setInitialFetchDone] = useState(false);\n // Editor key for forcing re-render\n const [editorKey, setEditorKey] = useState(\"editor-0\");\n // State for modal visibility\n const [isModalOpen, setIsModalOpen] = useState(false);\n \n // Reference to the most recent content to be saved\n const pendingSaveContentRef = useRef(\"\");\n \n // Logo URL from the provided resource\n const logoUrl =\n \"https://chatgpt.com/backend-api/public_content/enc/eyJpZCI6Im1fNjgxMjYxYTE3MDkwODE5MTkxNGJkNjZiZjk0MmMxNTc6ZmlsZV8wMDAwMDAwMDNiMTA2MWY3YjRiM2UxNjhhZmYxZGFmYSIsInRzIjoiNDg1MDA5IiwicCI6InB5aSIsInNpZyI6IjY4MzExODFkM2NlZTM3N2ZjZmQzNjUyMjMzNWJmYjFiZjYyNWY5OTI3NDJjYjA0NGVlYzM3MjA5ZWY3NjhiZWUiLCJ2IjoiMCIsImdpem1vX2lkIjpudWxsfQ==\";\n \n useEffect(() => {\n if (apiToken) {\n window.sessionStorage.setItem(\"valTownApiKey\", apiToken);\n setTokenError(null);\n } else {\n window.sessionStorage.removeItem(\"valTownApiKey\");\n }\n }, [apiToken]);\n\n // Fetch user information to get username\n const fetchUserInfo = useCallback(async () => {\n if (!apiToken) return;\n\n try {\n const response = await fetch(`/api/user`, {\n headers: { \"Authorization\": `Bearer ${apiToken}` },\n });\n\n if (response.ok) {\n const userData = await response.json();\n if (userData && userData.username) {\n setUsername(userData.username);\n console.log(\"Username set from user data:\", userData.username);\n }\n }\n } catch (error) {\n console.warn(\"Could not fetch user info:\", error);\n // Non-critical error, don't show to user\n }\n }, [apiToken]);\n\n const fetchVals = useCallback(async () => {\n if (!apiToken) {\n setError(\"Val Town API Key is required to list your vals.\");\n setLoading(false);\n setVals([]);\n setInitialFetchDone(true);\n return;\n }\n setLoading(true);\n setError(null);\n setTokenError(null);\n\n setSaveSuccess(false);\n setSaveError(null);\n setItemError(null);\n\n try {\n const queryParams = filterPrivacy !== \"all\" ? `?privacy=${filterPrivacy}` : \"\";\n const response = await fetch(`/api/vals${queryParams}`, {\n headers: { \"Authorization\": `Bearer ${apiToken}` },\n });\n\n if (!response.ok) {\n const errorData = await response.json().catch(() => ({ error: `HTTP error ${response.status}` }));\n if (response.status === 401) {\n setTokenError(\"Authentication failed. Please check your API Key.\");\n setError(\"Authentication failed. Please check your API Key.\");\n setVals([]);\n } else {\n setError(`Failed to fetch vals: ${errorData.error || response.statusText}`);\n }\n throw new Error(`Failed to fetch vals (Status: ${response.status})`);\n }\n const data = await response.json();\n setVals(data || []);\n\n // Set username if available from the first val\n if (data && data.length > 0 && data[0].owner) {\n setUsername(data[0].owner);\n console.log(\"Username set from first val:\", data[0].owner);\n }\n } catch (err) {\n console.error(`Error fetching vals:`, err);\n if (!error && !tokenError) {\n setError(`Failed to load vals. Please try again later.`);\n }\n } finally {\n setLoading(false);\n setInitialFetchDone(true);\n }\n }, [apiToken, filterPrivacy, initialFetchDone, error, tokenError]);\n\n // Run initial fetch only once when API token is available\n useEffect(() => {\n if (apiToken && !initialFetchDone && !loading) {\n fetchUserInfo();\n fetchVals();\n }\n }, [apiToken, initialFetchDone, loading, fetchUserInfo, fetchVals]);\n\n const handleValSelect = async (val: Val) => {\n console.log(\"Selected val:\", val.name);\n setItemError(null);\n setLoadingItem(true);\n setSelectedVal(val);\n // Force editor reset by updating the key\n setEditorKey(`editor-${val.id}-${Date.now()}`);\n setMoiContent(\"\");\n // Clear pending content\n pendingSaveContentRef.current = \"\";\n setHasMoiFile(false);\n setSaveSuccess(false);\n setSaveError(null);\n setTokenError(null);\n \n // Open the modal\n setIsModalOpen(true);\n\n // Update username when selecting a val if available\n if (val.owner && val.owner !== username) {\n setUsername(val.owner);\n console.log(\"Username updated from selected val:\", val.owner);\n }\n\n try {\n const valId = val.id;\n const response = await fetch(`/api/vals/${valId}/moi`);\n if (!response.ok) {\n const errorData = await response.json().catch(() => ({ error: `HTTP error ${response.status}` }));\n throw new Error(errorData.error || \"Failed to fetch moi.md\");\n }\n const data: MoiFile = await response.json();\n if (data.error) throw new Error(data.error);\n setHasMoiFile(data.exists);\n \n // Set initial content\n const initialContent = data.content || \"\";\n setMoiContent(initialContent);\n pendingSaveContentRef.current = initialContent;\n } catch (err) {\n console.error(\"Error fetching moi.md:\", err);\n setItemError(`Failed to fetch moi.md content: ${err instanceof Error ? err.message : String(err)}`);\n if (selectedVal) {\n const defaultContent = generateDefaultMoiContent(selectedVal);\n setMoiContent(defaultContent);\n pendingSaveContentRef.current = defaultContent;\n }\n } finally {\n setLoadingItem(false);\n }\n };\n\n // Handle opening val in a new tab - UPDATED TO USE /x/ INSTEAD OF /v/\n const handleOpenVal = (val: Val) => {\n if (!val) return;\n \n // Open project page with proper /x/ prefix\n window.open(`https://val.town/x/${val.owner}/${val.name}/code`, '_blank');\n };\n\n const generateDefaultMoiContent = (val: Val): string => {\n // Ensure owner is set, fallback to username if needed\n const owner = val.owner || username || \"\";\n\n // Set default content with blank URL instead of guessing\n return `---\ntitle: \"${val.name || \"Untitled Val\"}\"\ndescription: \"${val.description || \"No description available\"}\"\nauthor: \"${owner}\"\ntags: [\"val-town\"]\n---\n\n## About\n${val.description || `A ${val.type} val.`}\n\n## Usage\n\n\\`\\`\\`typescript\n// Import this val\nimport { ${val.name} } from \"https://esm.town/v/${owner}/${val.name}\";\n\n// Example usage\n// ...\n\\`\\`\\`\n\n## Notes\n\n- Created: ${new Date(val.createdAt).toISOString().split(\"T\")[0]}\n- Last updated: ${new Date().toISOString().split(\"T\")[0]}\n- Type: ${val.type || \"script\"}\n- Privacy: ${val.privacy || \"public\"}\n`;\n };\n\n // Handle content changes received from the editor\n const handleMoiContentChange = useCallback((content: string) => {\n console.log(\"Content updated from editor for saving:\", content.substring(0, 50) + \"...\");\n \n // Store the content in ref for saving\n pendingSaveContentRef.current = content;\n \n // Also update the state for React\n setMoiContent(content);\n }, []);\n\n const handleSaveMoi = async () => {\n if (!selectedVal) return;\n if (!apiToken) {\n setTokenError(\"API Key is required to save changes.\");\n setSaveError(\"API Key is required to save changes.\");\n return;\n }\n \n // Use the content from our ref, which has the latest content\n const contentToSave = pendingSaveContentRef.current;\n \n // Don't attempt to save if there's no content\n if (!contentToSave) {\n setSaveError(\"No content to save. Please add some content first.\");\n return;\n }\n \n console.log(\"SAVING CONTENT:\", contentToSave.substring(0, 50) + \"...\");\n \n setSaving(true);\n setSaveError(null);\n setSaveSuccess(false);\n setTokenError(null);\n\n try {\n const valId = selectedVal.id;\n \n if (hasMoiFile) {\n console.log(\"Updating existing moi.md file\");\n // Update existing moi.md file using the current API endpoint\n const response = await fetch(`/api/vals/${valId}/moi`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\", \"Authorization\": `Bearer ${apiToken}` },\n body: JSON.stringify({ content: contentToSave }),\n });\n\n if (!response.ok) {\n const errorData = await response.json().catch(() => ({ error: `HTTP error ${response.status}` }));\n if (response.status === 401 || response.status === 403) {\n setTokenError(\"Authentication failed. Check your API Key and permissions.\");\n setSaveError(\"Authentication failed. Check your API Key and permissions.\");\n } else {\n setSaveError(`Failed to save moi.md: ${errorData.error || response.statusText}`);\n }\n throw new Error(`Failed to save moi.md (Status: ${response.status})`);\n }\n \n const result = await response.json();\n console.log(\"Update successful:\", result.message);\n } else {\n console.log(\"Creating new moi.md file\");\n // Create new moi.md file for vals that don't have one yet\n const response = await fetch(`/api/vals/${valId}/file`, {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\", \"Authorization\": `Bearer ${apiToken}` },\n body: JSON.stringify({ \n path: \"moi.md\",\n type: \"file\",\n content: contentToSave\n }),\n });\n\n if (!response.ok) {\n const errorData = await response.json().catch(() => ({ error: `HTTP error ${response.status}` }));\n if (response.status === 401 || response.status === 403) {\n setTokenError(\"Authentication failed. Check your API Key and permissions.\");\n setSaveError(\"Authentication failed. Check your API Key and permissions.\");\n } else {\n setSaveError(`Failed to create moi.md: ${errorData.error || response.statusText}`);\n }\n throw new Error(`Failed to create moi.md (Status: ${response.status})`);\n }\n \n console.log(\"Create successful\");\n }\n \n setHasMoiFile(true);\n setSaveSuccess(true);\n \n // Ensure state is updated with the saved content\n setMoiContent(contentToSave);\n \n // Refresh the vals list to show updated status\n fetchVals();\n \n setTimeout(() => setSaveSuccess(false), 3000);\n } catch (err) {\n console.error(\"Error saving moi.md:\", err);\n if (!saveError && !tokenError)\n setSaveError(`Failed to save moi.md: ${err instanceof Error ? err.message : String(err)}`);\n } finally {\n setSaving(false);\n }\n };\n\n // Close the modal and reset selected val\n const handleCloseModal = () => {\n setIsModalOpen(false);\n // Optionally reset the selected val if you want to clear the selection completely\n // setSelectedVal(null);\n };\n\n // Handle API token change\n const handleApiTokenChange = (e: React.ChangeEvent) => {\n const newToken = e.target.value;\n setApiToken(newToken);\n\n // Reset the initialFetchDone flag if the token changes\n if (newToken !== apiToken) {\n setInitialFetchDone(false);\n }\n };\n\n // --- Render ---\n return (\n

\n {/* Header: Accent Aqua background, Black text */}\n

\n {/* First row with logo and API key controls */}\n

\n {/* Logo */}\n

\n \n {/* Subtitle directly next to logo */}\n \n

\n \n {/* API Key and username section */}\n

\n {/* API Key Input Area: Gray background */}\n

\n {/* Label: Black text */}\n \n API Key:\n \n \n

\n \n Get Key\n \n {username && ({username})}\n

\n\n {/* Responsive subtitle for mobile */}\n

\n Create and manage moi.md files for your Val Town vals.\n

\n\n {/* Token Error Message: Red background, White text */}\n {tokenError && (\n

\n {tokenError}\n

\n )}\n\n

\n {/* Filter Select: Main Blue background, Black text, Gray border, Yellow focus */}\n setFilterPrivacy(e.target.value)}\n className=\"bg-[#c8e9f3] text-[#000000] border border-[#cac8ef] rounded px-3 py-1.5 text-sm focus:ring-2 focus:ring-[#fdbb2e] focus:outline-none disabled:bg-[#cac8ef] disabled:opacity-70 disabled:cursor-not-allowed\"\n disabled={loading || !apiToken}\n title={!apiToken ? \"API Key required to filter vals\" : \"Filter vals by privacy\"}\n >\n \n \n \n \n \n

\n\n {/* Refresh Button: Aqua background, Black text */}\n \n {loading ? \"Refreshing...\" : \"↻ Refresh\"}\n \n

\n\n {/* Main Content Area: White background */}\n

\n {/* Global Error: White bg, Red border/text */}\n {error && (\n

Error

{error}

\n )}\n\n {/* API Key Needed Warning: Yellow bg, Black text */}\n {!apiToken && !loading && (\n

\n Please enter your Val Town API Key above to load and manage your vals.\n

\n )}\n\n {/* Profile Preview Component */}\n {apiToken && (\n \n )}\n

\n\n {/* Editor Modal - conditionally rendered */}\n {isModalOpen && selectedVal && (\n \n )}\n\n {/* Footer: Main Blue background, Gray border, Black text (opaque), Aqua links */}\n \n

\n );\n};\n\nexport default App;",[],[175,258,299],"81637fac-2794-11f0-99ac-569c3dd06744",["D",1746217922778],[201,202,203,204,205,206,207,208],[175,258],["D",1746217922778],[200,209],[175],"81630fb8-2794-11f0-99ac-569c3dd06744","moiProcessor.ts","ed35285e-68a4-49e8-91ba-e809df948f28",["D",1746217922778],"/**\n * MoiProcessor\n * This file contains utility functions for working with moi.md files.\n * Batch processing has been removed in this version.\n */\nimport ValTown from \"npm:@valtown/sdk\";\nimport { generateValMoiContent } from \"../shared/generators.ts\";\n\n/**\n * Get the username of the currently authenticated user\n */\nexport async function getCurrentUsername(): Promise {\n try {\n const client = new ValTown();\n const profile = await client.me.profile.retrieve();\n return profile.username;\n } catch (error) {\n console.error(\"Error retrieving current username:\", error);\n throw new Error(\"Failed to retrieve username\");\n }\n}\n\n/**\n * Determine if a val has an HTTP endpoint\n */\nexport async function findHttpEndpoint(vt: ValTown, valId: string): Promise {\n try {\n const val = await vt.vals.retrieve(valId);\n \n // Check if this is an HTTP val and try to determine the endpoint\n if (val.type === 'http') {\n // For HTTP vals, try to get the endpoint URL\n if (val.links && val.links.endpoint) {\n return val.links.endpoint;\n } else if (val.owner) {\n // Try to construct the endpoint URL (this is a best guess)\n const sanitizedId = valId.replace(/-/g, \"\");\n return `https://${val.owner}--${sanitizedId}.web.val.run`;\n }\n }\n \n // No HTTP endpoint found\n return null;\n } catch (error) {\n console.error(`Error finding HTTP endpoint for val ${valId}:`, error);\n return null;\n }\n}\n\n/**\n * Generate moi.md content for a val\n */\nexport async function generateMoiContent(vt: ValTown, valId: string): Promise {\n try {\n const val = await vt.vals.retrieve(valId);\n const httpEndpoint = await findHttpEndpoint(vt, valId);\n \n // Get the actual username for consistency\n const username = await getCurrentUsername();\n \n return generateValMoiContent({\n ...val,\n httpEndpoint\n }, username);\n } catch (error) {\n console.error(`Error generating moi.md content for val ${valId}:`, error);\n return \"---\\ntitle: \\\"Unknown Val\\\"\\ndescription: \\\"Could not load val details.\\\"\\ntags: [\\\"val-town\\\"]\\n---\\n\\n## About\\n\\nDetails for this val could not be loaded. It might be private or deleted.\\n\";\n }\n}\n\n/**\n * Fetch all vals with pagination\n * This function will iterate through all pages of vals using the SDK's pagination\n * @param vt ValTown SDK client instance\n * @param filter Optional filter parameter (e.g. privacy: 'public')\n * @returns Array of all vals\n */\nexport async function fetchAllVals(vt: ValTown, filter?: { privacy?: string }): Promise {\n const allVals: any[] = [];\n \n try {\n // Use for-await to automatically handle pagination\n for await (const val of vt.me.vals.list(filter)) {\n allVals.push(val);\n }\n \n console.log(`Fetched a total of ${allVals.length} vals with pagination`);\n return allVals;\n } catch (error) {\n console.error(\"Error fetching all vals with pagination:\", error);\n throw error;\n }\n}\n",[],[180,313],"8162fd2a-2794-11f0-99ac-569c3dd06744","index.ts","a0cb3e19-7e1a-4fd3-b29c-66dc2db4c5f6",["D",1746217922778],"http","/**\n * MoiPoster API Backend\n * * This file provides the API routes for the MoiPoster application.\n */\nimport { Hono } from \"npm:hono\";\nimport { cors } from \"npm:hono/cors\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport { serveFile } from \"https://esm.town/v/std/utils@85-main/index.ts\"; \nimport { MoiFile } from \"../shared/types.ts\";\nimport { generateValMoiContent } from \"../shared/generators.ts\";\nimport { getCurrentUsername, fetchAllVals } from \"./moiProcessor.ts\";\n\nconst app = new Hono();\n\n// --- Helper function to get token and initialize SDK ---\nfunction getVtClient(c): ValTown | null {\n const authHeader = c.req.header('Authorization');\n if (!authHeader || !authHeader.startsWith('Bearer ')) {\n console.error(\"Missing or invalid Authorization header\");\n return null;\n }\n const token = authHeader.substring(7); // Remove \"Bearer \" prefix\n if (!token) {\n console.error(\"Empty token provided in Authorization header\");\n return null;\n }\n return new ValTown({ bearerToken: token });\n}\n// --- End Helper ---\n\n// Unwrap Hono errors to see original error details\napp.onError((err, c) => {\n console.error(\"Unhandled Error:\", err);\n // Ensure CORS headers are added even for errors\n c.header(\"Access-Control-Allow-Origin\", \"*\"); \n c.header(\"Access-Control-Allow-Methods\", \"GET, POST, OPTIONS\");\n c.header(\"Access-Control-Allow-Headers\", \"Content-Type, Authorization\");\n return c.json({ error: \"Internal Server Error\", details: err.message }, 500);\n});\n\n\n// Enable CORS for all routes, including OPTIONS preflight requests\napp.use(\"*\", cors({\n origin: \"*\", // Allow all origins - adjust if needed for security\n allowMethods: [\"GET\", \"POST\", \"OPTIONS\"],\n allowHeaders: [\"Content-Type\", \"Authorization\"],\n}));\n\n// Get current user information (Requires authentication)\napp.get(\"/api/user\", async (c) => {\n try {\n const vt = getVtClient(c);\n if (!vt) {\n return c.json({ error: \"Authorization header required to get user information.\" }, 401);\n }\n\n // Fetch authenticated user info\n const { data: user } = await vt.me.retrieve();\n if (!user) {\n return c.json({ error: \"Failed to retrieve user information\" }, 500);\n }\n \n // Use our getCurrentUsername function to get the username\n const username = await getCurrentUsername();\n\n // Return only necessary user info\n return c.json({\n id: user.id,\n username: username, // Use the username from our function\n email: user.email,\n createdAt: user.createdAt,\n });\n } catch (error) {\n console.error(\"Error fetching user info:\", error);\n // Check for specific auth errors if vt was instantiated\n if (error.message && (error.message.includes(\"401\") || error.message.includes(\"Unauthorized\"))) {\n return c.json({ error: \"Authentication failed. Please check your API Key.\" }, 401);\n }\n return c.json({ error: \"Failed to fetch user info\", details: error.message }, 500);\n }\n});\n\n// Get username for a specific alias (for author field)\napp.get(\"/api/username/:username\", async (c) => {\n try {\n const username = c.req.param(\"username\");\n if (!username) return c.json({ error: \"Username is required\" }, 400);\n \n const vt = getVtClient(c);\n if (!vt) {\n // Try with unauthenticated client for public user info\n const publicVt = new ValTown();\n try {\n const { data: user } = await publicVt.alias.username.retrieve(username);\n return c.json({ username: user.username });\n } catch (error) {\n console.error(`Error fetching user by username ${username}:`, error);\n return c.json({ error: \"Username not found\", details: error.message }, 404);\n }\n }\n \n // Try with authenticated client\n try {\n const { data: user } = await vt.alias.username.retrieve(username);\n return c.json({ username: user.username });\n } catch (error) {\n console.error(`Error fetching user by username ${username}:`, error);\n return c.json({ error: \"Username not found\", details: error.message }, 404);\n }\n } catch (error) {\n console.error(\"Error in /api/username/:username:\", error);\n return c.json({ error: \"Failed to fetch username\", details: error.message }, 500);\n }\n});\n\n// Get all vals with their HTTP endpoints (Requires authentication)\napp.get(\"/api/vals\", async (c) => {\n try {\n const privacy = c.req.query(\"privacy\");\n \n const vt = getVtClient(c);\n if (!vt) {\n return c.json({ error: \"Authorization header required to list your vals.\" }, 401);\n }\n\n let filter = undefined;\n if (privacy && privacy !== 'all') {\n filter = { privacy };\n }\n\n // Get the username\n let username = \"\";\n try {\n username = await getCurrentUsername();\n console.log(`Current username: ${username}`);\n } catch (usernameError) {\n console.error(\"Error getting username:\", usernameError);\n // Continue without username, will use val.owner as fallback\n }\n\n // Use the fetchAllVals function to fetch all vals with pagination\n console.log(\"Fetching all vals with pagination...\");\n const vals = await fetchAllVals(vt, filter);\n console.log(`Fetched ${vals.length} vals in total`);\n \n // Enhanced version: Get HTTP endpoints for all vals\n const valsWithEndpoints = await Promise.all(vals.map(async val => {\n try {\n // Retrieve files in the val to check for HTTP endpoints\n const { data: files } = await vt.vals.files.retrieve(val.id, { path: \"\" });\n \n let httpEndpoint = null;\n \n // Look for HTTP files with endpoints\n if (files && files.length > 0) {\n for (const file of files) {\n if (file.type === \"http\" && file.links && file.links.endpoint) {\n httpEndpoint = file.links.endpoint;\n break;\n }\n }\n }\n \n // Add the HTTP endpoint and username to the val object\n return {\n ...val,\n httpEndpoint,\n owner: username || val.owner // Use our retrieved username\n };\n } catch (error) {\n console.error(`Error retrieving files for val ${val.name} (${val.id}):`, error);\n // If there's an error, just return the original val\n return val;\n }\n }));\n \n return c.json(valsWithEndpoints);\n } catch (error) {\n console.error(\"Error fetching vals:\", error);\n // Check for specific auth errors if vt was instantiated\n if (error.message && (error.message.includes(\"401\") || error.message.includes(\"Unauthorized\"))) {\n return c.json({ error: \"Authentication failed. Please check your API Key.\" }, 401);\n }\n return c.json({ error: \"Failed to fetch vals\", details: error.message }, 500);\n }\n});\n\n// Get moi.md for a val and HTTP endpoint if available\napp.get(\"/api/vals/:valId/moi\", async (c) => {\n try {\n const valId = c.req.param(\"valId\");\n if (!valId) return c.json({ error: \"Invalid val ID\" }, 400);\n\n // Use authed client if available for more complete val details\n const vt = getVtClient(c);\n const nonAuthVt = new ValTown(); // Fallback to non-authed client\n \n // Use the appropriate client\n const client = vt || nonAuthVt;\n\n // Get username if authenticated\n let username = \"\";\n if (vt) {\n try {\n username = await getCurrentUsername();\n console.log(`Current username for moi generation: ${username}`);\n } catch (usernameError) {\n console.error(\"Error getting username for moi generation:\", usernameError);\n }\n }\n\n // First, try to retrieve val details to generate default content if needed\n let valDetails = null;\n let httpEndpoint = null;\n \n try {\n valDetails = await client.vals.retrieve(valId);\n \n // Check for HTTP files with endpoints\n try {\n // Retrieve files in the val\n const { data: files } = await client.vals.files.retrieve(valId, { path: \"\" });\n \n // Look for HTTP files with endpoints\n if (files && files.length > 0) {\n for (const file of files) {\n if (file.type === \"http\" && file.links && file.links.endpoint) {\n httpEndpoint = file.links.endpoint;\n console.log(`Found HTTP endpoint for val ${valId}: ${httpEndpoint}`);\n break;\n }\n }\n }\n } catch (filesError) {\n console.warn(`Could not retrieve files for val ${valId}:`, filesError);\n }\n } catch (valError) {\n console.warn(`Could not retrieve val details for ${valId}:`, valError.message);\n // If we can't even get val details, we can't generate good default content.\n }\n\n const result: MoiFile = { exists: false, content: \"\" };\n\n try {\n const moiContent = await client.vals.files.getContent(valId, { path: \"moi.md\" });\n if (moiContent) {\n const contentText = await moiContent.text();\n result.exists = true;\n result.content = contentText;\n console.log(`moi.md exists for ${valId}`);\n }\n } catch (moiError) {\n console.log(`No moi.md found for ${valId}, generating default content`);\n if (valDetails) {\n // Include the HTTP endpoint in the generated content if available\n // Pass username to the generator\n result.content = generateValMoiContent(\n {\n ...valDetails,\n // Add the HTTP endpoint to the val details if we found one\n httpEndpoint\n },\n username // Pass the username\n );\n } else {\n // Fallback default if val details couldn't be fetched\n result.content = \"---\\ntitle: \\\"Unknown Val\\\"\\ndescription: \\\"Could not load val details.\\\"\\ntags: [\\\"val-town\\\"]\\n---\\n\\n## About\\n\\nDetails for this val could not be loaded. It might be private or deleted.\\n\";\n }\n }\n \n return c.json(result);\n\n } catch (error) {\n console.error(`Top-level error fetching val moi.md for ${c.req.param(\"valId\")}:`, error);\n return c.json({ error: \"Failed to fetch moi.md\", details: error.message }, 500);\n }\n});\n\n// Create new file for a val (Requires Authentication)\napp.post(\"/api/vals/:valId/file\", async (c) => {\n const valId = c.req.param(\"valId\");\n if (!valId) return c.json({ error: \"Invalid val ID\" }, 400);\n\n const vt = getVtClient(c);\n if (!vt) {\n return c.json({ \n error: \"Authentication required. Please provide your Val Town API Key via the Authorization header (Bearer ).\",\n authRequired: true \n }, 401);\n }\n\n try {\n const body = await c.req.json();\n const { path, type, content } = body;\n \n if (!path) {\n return c.json({ error: \"File path is required\" }, 400);\n }\n \n if (content === undefined || content === null) {\n return c.json({ error: \"Content is required\" }, 400);\n }\n \n // Create a new file\n await vt.vals.files.create(valId, { \n path, \n type: type || \"file\", \n content \n });\n \n console.log(`Created new file ${path} for val ${valId}`);\n return c.json({ success: true, message: `${path} created successfully` });\n } catch (error) {\n console.error(`Error creating file for val ${valId}:`, error);\n \n // Check for specific auth errors (401/403)\n if (error.response && (error.response.status === 401 || error.response.status === 403)) {\n return c.json({ \n error: \"Authentication failed. Your API Key may be invalid or lack permissions.\",\n authRequired: true \n }, error.response.status);\n }\n \n return c.json({ error: \"Failed to create file\", details: error.message }, 500);\n }\n});\n\n// Create/update moi.md for a val (Requires Authentication)\napp.post(\"/api/vals/:valId/moi\", async (c) => {\n const valId = c.req.param(\"valId\");\n if (!valId) return c.json({ error: \"Invalid val ID\" }, 400);\n\n const vt = getVtClient(c);\n if (!vt) {\n return c.json({ \n error: \"Authentication required. Please provide your Val Town API Key via the Authorization header (Bearer ).\",\n authRequired: true \n }, 401);\n }\n\n try {\n const { content } = await c.req.json();\n if (content === undefined || content === null) { // Check for undefined/null, allow empty string\n return c.json({ error: \"Content is required in the request body\" }, 400);\n }\n\n try {\n // Check if the file exists first\n await vt.vals.files.getContent(valId, { path: \"moi.md\" });\n \n // If we get here, the file exists, so update it\n await vt.vals.files.update(valId, { path: \"moi.md\", content });\n console.log(`Updated existing moi.md for val ${valId}`);\n return c.json({ success: true, message: \"moi.md updated successfully\" });\n } catch (error) {\n // If file not found or other error, create a new file\n console.log(`Creating new moi.md for val ${valId}`);\n await vt.vals.files.create(valId, { path: \"moi.md\", type: \"file\", content });\n console.log(`Created new moi.md for val ${valId}`);\n return c.json({ success: true, message: \"moi.md created successfully\" });\n }\n } catch (error) {\n console.error(`Error updating/creating val moi.md for ${valId}:`, error);\n // Check for specific auth errors (401/403)\n if (error.response && (error.response.status === 401 || error.response.status === 403)) {\n return c.json({ \n error: \"Authentication failed. Your API Key may be invalid or lack permissions.\",\n authRequired: true \n }, error.response.status);\n }\n return c.json({ error: \"Failed to update moi.md\", details: error.message }, 500);\n }\n});\n\n// Get HTTP endpoints for a specific val (Requires Authentication)\napp.get(\"/api/vals/:valId/endpoints\", async (c) => {\n const valId = c.req.param(\"valId\");\n if (!valId) return c.json({ error: \"Invalid val ID\" }, 400);\n\n const vt = getVtClient(c);\n if (!vt) {\n return c.json({ \n error: \"Authentication required to get endpoints.\",\n authRequired: true \n }, 401);\n }\n\n try {\n // Retrieve files in the val\n const { data: files } = await vt.vals.files.retrieve(valId, { path: \"\" });\n \n // Extract HTTP endpoints\n const endpoints = [];\n \n if (files && files.length > 0) {\n for (const file of files) {\n if (file.type === \"http\" && file.links && file.links.endpoint) {\n endpoints.push({\n name: file.name,\n url: file.links.endpoint\n });\n }\n }\n }\n \n return c.json({ endpoints });\n } catch (error) {\n console.error(`Error retrieving endpoints for val ${valId}:`, error);\n return c.json({ error: \"Failed to retrieve endpoints\", details: error.message }, 500);\n }\n});\n\n// Serve static files from frontend directory\napp.get(\"/frontend/*\", (c) => serveFile(c.req.path, import.meta.url));\napp.get(\"/shared/*\", (c) => serveFile(c.req.path, import.meta.url));\n\n// Main HTML page\napp.get(\"*\", async (c) => {\n try {\n // Removed hasApiToken check - frontend handles token input now\n const html = `\n \n \n \n \n \n MoiPoster - Val Town\n \n 📝\">\n \n \n \n

\n \n \n \n `;\n return c.html(html);\n } catch (error) {\n console.error(\"Error serving frontend:\", error);\n return c.text(\"Error serving application\", 500);\n }\n});\n\nexport default app.fetch;",[],[180,320],["D",1746217922778],[197,198],[180],["D",1745873201914],{"_101":100,"_109":105},{"_101":100,"_102":103,"_104":105,"_18":56,"_106":107,"_108":25},{"_13":88,"_32":89,"_44":43,"_90":45,"_91":92,"_93":94,"_95":51,"_96":45,"_97":67,"_98":46,"_99":100},"ctx",{"_81":-5,"_130":367,"_368":369,"_370":371,"_372":25,"_373":25,"_374":25,"_375":60,"_376":-5,"_377":-7,"_378":-7,"_379":65,"_380":25,"_381":25,"_382":-5,"_383":25,"_384":25,"_385":25,"_386":-5},"ENV",{"_338":339,"_340":341,"_342":136,"_343":344,"_345":346,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v2