Val to Project Converter [Beta]

\n\n {error &&

Error: {error}

}\n\n {!results ? (\n \n ) : (\n \n )}\n

\n \n

\n );\n}",[],[101,229,236],{"_105":245,"_97":246,"_151":247,"_153":230,"_154":140,"_155":248,"_157":120,"_107":249,"_102":250,"_159":179,"_161":251,"_162":27,"_163":-5,"_164":252,"_100":253},"22ab2d2a-1b05-11f0-82f3-569c3dd06744","ConversionForm.tsx","aa53ba48-05cb-11f0-84c7-569c3dd06744",618,["D",1744836931877],8,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { ValInfo, Project } from \"../../shared/types.ts\";\n\ninterface ConversionFormProps {\n apiKey: string;\n valUrls: string;\n projectName: string;\n isLoading: boolean;\n onApiKeyChange: (value: string) => void;\n onValUrlsChange: (value: string) => void;\n onProjectNameChange: (value: string) => void;\n onSubmit: (e: React.FormEvent) => void;\n creationMode: \"new\" | \"existing\";\n onCreationModeChange: (mode: \"new\" | \"existing\") => void;\n projects: Project[];\n selectedProjectId: string;\n onSelectedProjectIdChange: (id: string) => void;\n isLoadingProjects: boolean;\n projectsError: string | null;\n apiKeyHighlightError: boolean;\n onExistingProjectLabelClick: () => void;\n}\n\nexport function ConversionForm({\n apiKey,\n valUrls,\n projectName,\n isLoading,\n onApiKeyChange,\n onValUrlsChange,\n onProjectNameChange,\n onSubmit,\n creationMode,\n onCreationModeChange,\n projects,\n selectedProjectId,\n onSelectedProjectIdChange,\n isLoadingProjects,\n projectsError,\n apiKeyHighlightError,\n onExistingProjectLabelClick,\n}: ConversionFormProps) {\n return (\n

\n \n 🔑 API Key\n \n onApiKeyChange(e.target.value)}\n placeholder=\"vt_...\"\n required\n />\n {apiKeyHighlightError && (\n

\n API Key is required to load existing projects.\n

\n )}\n

\n \n Get your API key\n with Project + Val Read/Write permissions\n

\n\n

\n \n 📁 Vals to Convert\n \n onValUrlsChange(e.target.value)}\n placeholder={`Enter one val per line using either format:\n@username/valname\nhttps://www.val.town/v/username/valname`}\n rows={5}\n required\n />\n

\n\n

\n \n 📝 Target Project\n \n

\n \n onCreationModeChange(\"new\")}\n style={{ marginRight: 'var(--space-xs)' }}\n />\n Create New\n \n \n { if(apiKey && !isLoadingProjects && !projectsError && projects.length > 0) onCreationModeChange(\"existing\"); }}\n disabled={!apiKey || isLoadingProjects || !!projectsError || projects.length === 0}\n style={{ marginRight: 'var(--space-xs)' }}\n />\n Add to Existing\n \n

\n\n {creationMode === \"new\" && (\n

\n New Project Name\n onProjectNameChange(e.target.value)}\n placeholder=\"Enter new project name\"\n pattern=\"^[a-zA-Z][a-zA-Z0-9_]*$\"\n title=\"Must start with a letter and contain only letters, numbers, and underscores\"\n />\n {/*

\n Leave blank to auto-generate a name based on the first val.\n

*/}\n

\n )}\n\n {creationMode === \"existing\" && (\n

\n Select Existing Project\n {isLoadingProjects &&

Loading projects...

}\n {projectsError &&

Error: {projectsError}

}\n onSelectedProjectIdChange(e.target.value)}\n required={creationMode === \"existing\"}\n disabled={isLoadingProjects || projects.length === 0 || !apiKey}\n style={{ width: '100%', padding: '10px', fontSize: '14px', marginTop: 'var(--space-xs)' }}\n >\n \n {projects.map((p) => (\n \n ))}\n \n

\n )}\n

\n\n \n

\n );\n}",[],[101,229,246],{"_105":255,"_97":256,"_151":257,"_153":230,"_154":140,"_155":258,"_157":120,"_107":259,"_102":260,"_159":179,"_161":261,"_162":27,"_163":-5,"_164":262,"_100":263},"377e2f08-1b01-11f0-9aea-569c3dd06744","ConversionResults.tsx","aa53c63c-05cb-11f0-84c7-569c3dd06744",598,["D",1744835248831],6,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\nimport { ConversionResult } from \"../../shared/types.ts\";\n\ninterface ConversionResultsProps {\n results: ConversionResult;\n onReset: () => void;\n redirectToRedirectPage: boolean;\n isLoading: boolean;\n onRedirectConfirm: () => void;\n onRedirectSkip: () => void;\n}\n\nexport function ConversionResults({\n results,\n onReset,\n redirectToRedirectPage,\n isLoading,\n onRedirectConfirm,\n onRedirectSkip,\n}: ConversionResultsProps) {\n return (\n

\n {results.message}\n

\n {results.projectName && (\n

\n View Project: {results.username}/{results.projectName}\n

\n )}\n {results.convertedVals.length > 0 && (\n <>\n

Conversion Status:

\n @{val.username}/{val.valName}: {val.success ? \"Success\" : `Failed - ${val.error}`}\n

\n \n )}\n\n {redirectToRedirectPage && (\n

Redirect Original Vals?

Optionally update your original vals to redirect requests to the new project versions.

\n \n \n

\n )}\n\n \n

\n );\n}",[],[101,229,256],{"_105":265,"_97":266,"_151":267,"_153":230,"_154":140,"_155":268,"_157":120,"_107":269,"_102":231,"_159":179,"_161":270,"_162":27,"_163":-5,"_164":271,"_100":272},"fdf364c4-1b00-11f0-b3c1-569c3dd06744","Footer.tsx","aa53cb96-05cb-11f0-84c7-569c3dd06744",595,["D",1744835152290],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nexport function Footer() {\n return (\n

\n Need help? Read the docs or join Discord\n

\n );\n} ",[],[101,229,266],{"_105":274,"_97":275,"_151":276,"_153":230,"_154":140,"_155":268,"_157":120,"_107":277,"_102":231,"_159":179,"_161":278,"_162":27,"_163":-5,"_164":279,"_100":280},"fdf3662c-1b00-11f0-b3c1-569c3dd06744","Sparkles.tsx","aa53cd30-05cb-11f0-84c7-569c3dd06744",["D",1744835152290],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React from \"https://esm.sh/react@18.2.0\";\n\nexport function Sparkles() {\n return (\n <>\n

\n \n

\n \n );\n} ",[],[101,229,275],[101,229],{"_105":283,"_97":284,"_151":285,"_153":223,"_154":140,"_155":286,"_157":120,"_107":287,"_102":288,"_159":289,"_161":290,"_162":27,"_163":-5,"_164":291,"_100":292},"408184fa-0289-11f0-8ce5-569c3dd06744","favicon.svg","e5cf2620-0288-11f0-b61d-569c3dd06744",320,["D",1742144896441],3,"file","",[],[101,284],{"_105":294,"_97":295,"_151":296,"_153":223,"_154":140,"_155":268,"_157":120,"_107":297,"_102":298,"_159":289,"_161":299,"_162":27,"_163":-5,"_164":300,"_100":301},"fdf367c6-1b00-11f0-b3c1-569c3dd06744","index.html","54902d3a-0102-11f0-8e4f-569c3dd06744",["D",1744835152290],28,"\n\n \n \n Val to Project Converter\n \n \n \n \n \n \n \n \n

\n \n \n

\n \n \n",[],[101,295],{"_105":303,"_97":304,"_151":305,"_153":223,"_154":140,"_155":268,"_157":120,"_107":306,"_102":307,"_159":179,"_161":308,"_162":27,"_163":-5,"_164":309,"_100":310},"fdf36d70-1b00-11f0-b3c1-569c3dd06744","index.tsx","c6f19802-00fb-11f0-9244-569c3dd06744",["D",1744835152290],12,"/** @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\nconsole.log(\"Index.tsx is loading...\");\n\nconst root = document.getElementById(\"root\");\nif (root) {\n console.log(\"Root element found, mounting React app...\");\n createRoot(root).render();\n} else {\n console.log(\"Root element not found!\");\n}",[],[101,304],{"_105":312,"_97":313,"_151":314,"_153":223,"_154":140,"_155":315,"_157":120,"_107":316,"_102":317,"_159":289,"_161":318,"_162":27,"_163":-5,"_164":319,"_100":320},"07631d8e-1b05-11f0-9d74-569c3dd06744","style.css","3768f09e-0101-11f0-b27a-569c3dd06744",616,["D",1744836886107],110,"@import url(\"https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=JetBrains+Mono:wght@400;500&display=swap\");\n\n:root {\n --pastel-cream: #f8f4ff;\n --pastel-lavender: #c5b3ff;\n --pastel-purple: #9d8df1;\n --pastel-blue: #a8c7fa;\n --pastel-periwinkle: #b8c0ff;\n --pastel-pink: #ffb3cb;\n --pastel-light-pink: #ffd6e0;\n\n --terminal-bg: #ffffff;\n --terminal-border: rgba(176, 196, 222, 0.3);\n --text-primary: #2d3748;\n --text-secondary: #4a5568;\n --accent-lavender: #c5b3ff;\n --accent-purple: #9d8df1;\n --accent-blue: #a8c7fa;\n --accent-pink: #ffb3cb;\n --input-bg: #fcfdff;\n --input-border: rgba(176, 196, 222, 0.5);\n --button-bg: #c5b3ff;\n --button-hover: #d4c6ff;\n --container-max-width: 800px;\n\n --space-xs: 5px;\n --space-sm: 8px;\n --space-md: 14px;\n --space-lg: 20px;\n --space-xl: 28px;\n --space-xxl: 40px;\n}\n\n@keyframes wave {\n 0% {\n background-position: 0% 50%;\n }\n 100% {\n background-position: 100% 50%;\n }\n}\n\nhtml {\n font-size: 100%;\n height: 100%;\n}\n\nbody {\n font-family: \"Fraunces\", serif;\n color: var(--text-primary);\n margin: 0;\n display: flex;\n flex-direction: column;\n align-items: center;\n min-height: 100vh;\n padding: 0 16px;\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n box-sizing: border-box;\n overflow-y: hidden;\n background-color: var(--pastel-cream);\n position: relative;\n}\n\nbody::before {\n content: \"\";\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -2;\n background:\n var(--pastel-cream)\n linear-gradient(\n 45deg,\n transparent 0%,\n transparent 35%,\n var(--pastel-purple) 35%,\n var(--pastel-purple) 45%,\n transparent 45%,\n transparent 100%\n ),\n linear-gradient(\n 135deg,\n transparent 0%,\n transparent 40%,\n var(--pastel-pink) 40%,\n var(--pastel-pink) 50%,\n transparent 50%,\n transparent 100%\n ),\n linear-gradient(\n 225deg,\n transparent 0%,\n transparent 45%,\n var(--pastel-blue) 45%,\n var(--pastel-blue) 55%,\n transparent 55%,\n transparent 100%\n ),\n linear-gradient(\n 315deg,\n transparent 0%,\n transparent 50%,\n var(--pastel-lavender) 50%,\n var(--pastel-lavender) 60%,\n transparent 60%,\n transparent 100%\n );\n background-size: 600px 600px;\n background-position: 0 0;\n opacity: 0.7;\n animation: wave 60s linear infinite;\n}\n\nbody::after {\n content: \"\";\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: -1;\n background-image:\n radial-gradient(\n circle at 20% 30%,\n var(--pastel-purple) 0%,\n transparent 40%\n ),\n radial-gradient(circle at 80% 70%, var(--pastel-blue) 0%, transparent 40%),\n radial-gradient(circle at 75% 20%, var(--pastel-pink) 0%, transparent 35%),\n radial-gradient(\n circle at 25% 80%,\n var(--pastel-lavender) 0%,\n transparent 35%\n );\n filter: blur(80px);\n opacity: 0.4;\n}\n\n.app-wrapper {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n width: 100%;\n max-width: var(--container-max-width);\n position: relative;\n z-index: 1;\n height: 100vh;\n box-sizing: border-box;\n padding: var(--space-md) 0;\n}\n\n.container {\n max-width: 700px;\n width: 100%;\n background-color: var(--terminal-bg);\n border-radius: 8px;\n box-shadow:\n 0 2px 4px rgba(0, 0, 0, 0.1),\n 0 12px 24px rgba(0, 0, 0, 0.1),\n 0 0 0 1px var(--terminal-border),\n inset 0 -6px 0 rgba(0, 0, 0, 0.04);\n overflow: hidden;\n margin: 0 auto;\n position: relative;\n transform-origin: center center;\n transform: perspective(1200px) rotateX(0.5deg) rotateY(-0.5deg);\n isolation: isolate;\n display: flex;\n flex-direction: column;\n max-height: calc(100vh - 80px);\n}\n\n.content {\n padding: var(--space-sm) var(--space-lg);\n overflow-y: auto;\n flex: 1;\n}\n\n.external-footer {\n text-align: center;\n width: 100%;\n max-width: var(--container-max-width);\n color: var(--text-primary);\n font-size: clamp(0.75rem, 2.2vw, 0.85rem);\n padding: var(--space-sm) var(--space-md);\n background-color: rgba(255, 255, 255, 0.75);\n backdrop-filter: blur(5px);\n border-radius: 20px;\n box-shadow: 0 2px 10px rgba(157, 141, 241, 0.2);\n margin-top: var(--space-md);\n}\n\n.external-footer a,\n.input-note a,\n.form-group a {\n color: #8a70f0;\n text-decoration: none;\n font-weight: 500;\n transition: color 0.15s;\n border-bottom: 1px solid rgba(138, 112, 240, 0.3);\n padding-bottom: 1px;\n}\n\n.external-footer a:hover,\n.input-note a:hover,\n.form-group a:hover {\n color: #7452e5;\n border-bottom-color: rgba(116, 82, 229, 0.5);\n}\n\nbutton {\n background: linear-gradient(\n 135deg,\n var(--pastel-periwinkle),\n var(--pastel-lavender)\n );\n color: #2d3748;\n font-weight: 600;\n border: none;\n border-radius: 12px;\n padding: var(--space-sm) var(--space-lg);\n font-size: clamp(0.9rem, 2.5vw, 1.1rem);\n cursor: pointer;\n transition: all 0.15s ease;\n width: 100%;\n font-family: \"Fraunces\", serif;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n}\n\nbutton:hover {\n background: linear-gradient(135deg, #c7ceff, #d1c2ff);\n transform: translateY(-2px);\n}\n\nbutton:active {\n transform: translateY(1px);\n}\n\n*, *:before, *:after {\n box-sizing: inherit;\n}\n\n.container::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n right: 0;\n height: 1px;\n background: linear-gradient(\n 90deg,\n rgba(255, 255, 255, 0.8),\n rgba(255, 255, 255, 0.3) 60%,\n rgba(255, 255, 255, 0)\n );\n border-top-left-radius: 16px;\n border-top-right-radius: 16px;\n z-index: 1;\n}\n\n.container::after {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n bottom: 0;\n width: 1px;\n background: linear-gradient(\n 180deg,\n rgba(255, 255, 255, 0.6),\n rgba(255, 255, 255, 0.2) 50%,\n rgba(255, 255, 255, 0)\n );\n border-top-left-radius: 16px;\n border-bottom-left-radius: 16px;\n z-index: 1;\n}\n\n.browser-dots {\n position: relative;\n z-index: 2;\n padding: 10px 14px;\n background: linear-gradient(to right, #e8ecf3, #e5ecf5);\n display: flex;\n align-items: center;\n gap: 8px;\n}\n\n.browser-dot {\n width: 12px;\n height: 12px;\n border-radius: 50%;\n border: 1px solid rgba(0, 0, 0, 0.05);\n}\n\n.dot-red {\n background-color: var(--accent-pink);\n}\n.dot-yellow {\n background-color: #ffecb3;\n}\n.dot-green {\n background-color: var(--accent-purple);\n}\n\n.browser-title {\n flex: 1;\n text-align: center;\n color: var(--text-secondary);\n font-size: 11px;\n font-family: \"JetBrains Mono\", monospace;\n letter-spacing: 0.3px;\n position: absolute;\n left: 0;\n right: 0;\n margin: 0 auto;\n width: fit-content;\n opacity: 0.8;\n}\n\nh1 {\n font-size: clamp(1.6rem, 4vw, 2.25rem);\n margin-top: 0;\n margin-bottom: 1rem;\n color: var(--text-primary);\n font-weight: 700;\n letter-spacing: -0.5px;\n line-height: 1.1;\n}\n\n.form-group {\n margin-bottom: var(--space-md);\n padding-bottom: 0;\n position: relative;\n background-color: rgba(255, 255, 255, 0.5);\n border-radius: 12px;\n /* padding: var(--space-md); */\n box-shadow: 0 1px 3px rgba(157, 141, 241, 0.05);\n}\n\nlabel.primary-label {\n display: flex;\n align-items: center;\n font-weight: 700;\n font-size: clamp(1.25rem, 3vw, 1.4rem);\n margin-bottom: var(--space-sm);\n color: var(--text-primary);\n letter-spacing: -0.3px;\n line-height: 1.3;\n padding-bottom: var(--space-xs);\n}\n\nlabel {\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-bottom: var(--space-sm);\n color: var(--text-primary);\n font-size: clamp(0.9rem, 2.5vw, 1rem);\n}\n\nlabel .icon {\n margin-right: 12px;\n font-size: 1.25rem;\n}\n\ninput[type=\"password\"],\ninput[type=\"text\"],\ntextarea,\nselect {\n width: 100%;\n padding: 14px 16px;\n border: 1px solid var(--input-border);\n border-radius: 6px;\n font-family: \"JetBrains Mono\", monospace;\n font-size: 14px;\n background-color: rgba(240, 240, 245, 0.5);\n color: #2a2a3c;\n transition: all 0.2s;\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05);\n line-height: 1.5;\n margin-bottom: var(--space-xs);\n appearance: none;\n}\n\n/* Add focus styles for select */\nselect:focus {\n outline: none;\n border-color: var(--accent-lavender);\n background-color: rgba(245, 245, 250, 0.8);\n box-shadow:\n inset 0 1px 3px rgba(0, 0, 0, 0.05),\n 0 0 0 2px rgba(157, 141, 241, 0.2);\n}\n\n/* Style for highlighting input error */\n.input-error-highlight {\n border-color: #f44336 !important; /* Use red border, !important to override focus */\n box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.05), 0 0 0 2px rgba(244, 67, 54, 0.2) !important; /* Add red glow */\n}\n\ninput[type=\"password\"]:focus,\ntextarea:focus {\n outline: none;\n border-color: var(--accent-lavender);\n background-color: rgba(245, 245, 250, 0.8);\n box-shadow:\n inset 0 1px 3px rgba(0, 0, 0, 0.05),\n 0 0 0 2px rgba(157, 141, 241, 0.2);\n}\n\ntextarea {\n min-height: 80px;\n resize: vertical;\n line-height: 1.6;\n}\n\ntextarea#val-urls {\n font-size: 13px;\n line-height: 1.4;\n font-family: monospace;\n}\n\ntextarea::placeholder {\n font-size: 13px;\n color: rgba(107, 91, 149, 0.4);\n font-weight: 300;\n}\n\ninput::placeholder {\n color: rgba(107, 91, 149, 0.4);\n font-weight: 300;\n}\n\n.example, .helper-text, .input-note {\n color: rgba(107, 91, 149, 0.6);\n font-weight: 400;\n}\n\n.permissions-text {\n font-size: 14px;\n color: rgba(107, 91, 149, 0.75);\n font-weight: 500;\n}\n\n.small-text {\n font-size: clamp(0.7rem, 2vw, 0.8rem);\n color: var(--text-secondary);\n margin-top: var(--space-xs);\n}\n\n.small-text a {\n color: var(--text-primary);\n text-decoration: none;\n border-bottom: 1px solid rgba(0, 0, 0, 0.2);\n padding-bottom: 1px;\n transition: border-color 0.15s;\n}\n\n.small-text a:hover {\n border-bottom-color: var(--accent-lavender);\n}\n\n.examples-container {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n margin-top: var(--space-xs);\n font-size: clamp(0.7rem, 2vw, 0.8rem);\n color: var(--text-secondary);\n}\n\n.examples {\n display: flex;\n flex-wrap: wrap;\n gap: 10px;\n}\n\n.example {\n color: rgba(107, 91, 149, 0.7);\n font-weight: 400;\n display: inline-block;\n padding: 5px 8px;\n margin-right: 10px;\n background-color: rgba(107, 91, 149, 0.1);\n border-radius: 5px;\n text-decoration: none;\n white-space: nowrap;\n font-size: 13px;\n}\n\n.example:hover {\n background-color: rgba(107, 91, 149, 0.15);\n color: rgba(107, 91, 149, 0.9);\n}\n\n.error {\n background-color: rgba(254, 215, 215, 0.7);\n color: #c53030;\n padding: 12px 16px;\n border-radius: 10px;\n margin-bottom: var(--space-lg);\n border: 1px solid rgba(197, 48, 48, 0.1);\n font-weight: 500;\n font-size: clamp(0.8rem, 2.2vw, 0.9rem);\n}\n\n.success {\n background-color: rgba(198, 246, 213, 0.7);\n padding: 14px 16px;\n border-radius: 10px;\n margin-bottom: var(--space-lg);\n border: 1px solid rgba(72, 187, 120, 0.1);\n font-size: clamp(0.8rem, 2.2vw, 0.9rem);\n color: #38a169;\n}\n\n.results a {\n color: #805ad5;\n text-decoration: none;\n font-weight: 600;\n padding-bottom: 1px;\n border-bottom: 1px solid rgba(128, 90, 213, 0.3);\n transition: all 0.15s;\n}\n\n.results a:hover {\n color: #6b46c1;\n border-bottom-color: rgba(107, 70, 193, 0.5);\n}\n\n.results h2 {\n font-size: clamp(1.3rem, 3.5vw, 1.75rem);\n margin-top: 0;\n margin-bottom: var(--space-md);\n color: var(--text-primary);\n letter-spacing: -0.3px;\n}\n\n.results h3 {\n font-size: clamp(1rem, 3vw, 1.2rem);\n margin-top: var(--space-lg);\n margin-bottom: var(--space-sm);\n color: var(--text-primary);\n font-weight: 600;\n}\n\n.results ul {\n padding-left: 1.5rem;\n margin: var(--space-md) 0;\n}\n\n.results li {\n margin-bottom: var(--space-sm);\n font-size: clamp(0.8rem, 2.2vw, 0.9rem);\n overflow-wrap: break-word;\n word-break: break-word;\n}\n\n.footer {\n text-align: center;\n margin-top: var(--space-xl);\n padding-top: var(--space-md);\n color: var(--text-secondary);\n font-size: clamp(0.75rem, 2.2vw, 0.85rem);\n border-top: 1px solid var(--terminal-border);\n}\n\n.footer a {\n color: #805ad5;\n text-decoration: none;\n font-weight: 500;\n transition: color 0.15s;\n border-bottom: 1px solid rgba(128, 90, 213, 0.3);\n padding-bottom: 1px;\n}\n\n.footer a:hover {\n color: #6b46c1;\n border-bottom-color: rgba(107, 70, 193, 0.5);\n}\n\n@media (max-height: 700px) {\n :root {\n --space-xs: 4px;\n --space-sm: 6px;\n --space-md: 10px;\n --space-lg: 16px;\n --space-xl: 24px;\n --space-xxl: 32px;\n }\n\n .container {\n transform: perspective(1200px) rotateX(0deg) rotateY(0deg);\n }\n\n .content {\n padding: var(--space-md) var(--space-md);\n }\n\n h1 {\n font-size: clamp(1.5rem, 4vw, 1.8rem);\n }\n\n textarea {\n min-height: 70px;\n max-height: 120px;\n }\n\n .form-group {\n margin-bottom: var(--space-lg);\n }\n\n .footer {\n margin-top: var(--space-lg);\n padding-top: var(--space-sm);\n }\n}\n\n@media (max-width: 500px) {\n html {\n font-size: 90%;\n }\n\n body {\n padding: 8px;\n }\n\n .container {\n border-radius: 12px;\n transform: none;\n box-shadow:\n 0 5px 15px rgba(50, 70, 120, 0.15),\n 0 0 0 1px var(--terminal-border),\n inset 0 -4px 0 rgba(0, 0, 0, 0.04);\n }\n\n .content {\n padding: var(--space-md) var(--space-md);\n }\n\n .examples {\n flex-direction: column;\n align-items: flex-start;\n gap: 6px;\n }\n\n .examples-container {\n flex-direction: column;\n align-items: flex-start;\n }\n\n textarea {\n min-height: 80px;\n }\n\n h1 {\n font-size: 1.6rem;\n }\n\n .browser-dots {\n padding: 8px 10px;\n }\n\n label.primary-label {\n font-size: 1.15rem;\n }\n}\n\n@media (max-width: 350px) {\n html {\n font-size: 85%;\n }\n\n body {\n padding: 5px;\n }\n\n .container {\n border-radius: 10px;\n }\n\n .content {\n padding: var(--space-sm) var(--space-sm);\n }\n\n label.primary-label {\n font-size: 1.1rem;\n }\n}\n\n.sparkle {\n position: fixed;\n width: 40px;\n height: 40px;\n opacity: 0.7;\n pointer-events: none;\n z-index: -1;\n background-image: url(\"data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 5L22 15.5L32.5 17.5L22 19.5L20 30L18 19.5L7.5 17.5L18 15.5L20 5Z' stroke='%236B5B95' stroke-width='2'/%3E%3Cpath d='M20 10L21 16L27 17L21 18L20 24L19 18L13 17L19 16L20 10Z' fill='%236B5B95' fill-opacity='0.6'/%3E%3C/svg%3E\");\n animation: twinkle 4s infinite ease-in-out;\n}\n\n.blob {\n position: fixed;\n width: 200px;\n height: 200px;\n border-radius: 50%;\n background-color: rgba(107, 91, 149, 0.15);\n filter: blur(50px);\n pointer-events: none;\n z-index: -1;\n animation: float 15s infinite ease-in-out;\n}\n\n@keyframes twinkle {\n 0% { transform: scale(0.8) rotate(0deg); opacity: 0.3; }\n 25% { transform: scale(1.0) rotate(5deg); opacity: 0.7; }\n 50% { transform: scale(1.2) rotate(0deg); opacity: 0.9; }\n 75% { transform: scale(1.0) rotate(-5deg); opacity: 0.7; }\n 100% { transform: scale(0.8) rotate(0deg); opacity: 0.3; }\n}\n\n@keyframes float {\n 0% { transform: translate(0, 0); }\n 25% { transform: translate(30px, -30px); }\n 50% { transform: translate(60px, 0); }\n 75% { transform: translate(30px, 30px); }\n 100% { transform: translate(0, 0); }\n}\n\n.redirect-button {\n background: linear-gradient(\n 135deg,\n var(--pastel-light-pink),\n var(--pastel-pink)\n );\n color: #2d3748;\n font-weight: 600;\n border: none;\n border-radius: 12px;\n padding: var(--space-md) var(--space-xl);\n font-size: clamp(0.9rem, 2.5vw, 1.1rem);\n cursor: pointer;\n transition: all 0.15s ease;\n width: 100%;\n font-family: \"Fraunces\", serif;\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: var(--space-sm);\n box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.15);\n}\n\n.redirect-button:hover {\n background: linear-gradient(135deg, #ffd6e0, #ffc1d6);\n transform: translateY(-2px);\n}\n\n.redirect-button:active {\n transform: translateY(1px);\n box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.15);\n}\n\n.helper-text {\n font-size: 14px;\n color: rgba(107, 91, 149, 0.75);\n margin-top: var(--space-xs);\n text-align: left;\n}\n\n.success-text {\n color: #4caf50;\n font-weight: bold;\n}\n\n.error-text {\n color: #f44336 !important;\n font-weight: bold;\n}\n\n#valtown-badge-link {\n position: absolute;\n bottom: 10px; \n left: 16px; \n z-index: 10;\n margin-top: 0; \n}\n\n#valtown-badge-link img {\n display: block; \n}",[],[101,313],[101],{"_105":323,"_97":324,"_151":325,"_153":-5,"_154":140,"_155":260,"_157":120,"_107":326,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":327,"_100":337},"3ba7ca9c-00fa-11f0-b493-569c3dd06744","shared","9d09b083-98f8-4b05-b0fa-1750b5da7a09",["D",1741973519111],[328],{"_105":329,"_97":330,"_151":331,"_153":325,"_154":140,"_155":332,"_157":120,"_107":333,"_102":231,"_159":179,"_161":334,"_162":27,"_163":-5,"_164":335,"_100":336},"30756eb0-1b01-11f0-8dfe-569c3dd06744","types.ts","cd847462-0102-11f0-98d6-569c3dd06744",597,["D",1744835237030],"export interface Project {\n id: string;\n name: string;\n}\n\nexport interface ValInfo {\n username: string;\n valName: string;\n}\n\nexport interface ConvertedValInfo extends ValInfo {\n success: boolean;\n error?: string;\n}\n\nexport interface ConversionResult {\n success: boolean;\n message?: string;\n projectName?: string;\n projectId?: string;\n username?: string;\n convertedVals: ConvertedValInfo[];\n error?: string;\n}",[],[324,330],[324],{"_105":339,"_97":340,"_151":341,"_153":-5,"_154":140,"_155":342,"_157":120,"_107":343,"_102":33,"_159":289,"_161":344,"_162":27,"_163":-5,"_164":345,"_100":346},"18cc3e6c-1af0-11f0-ad2b-569c3dd06744",".vtignore","18cc3fe8-1af0-11f0-ad2b-569c3dd06744",539,["D",1744827895857],".git\n.DS_Store\nnode_modules\nvendor",[],[340],{"_105":348,"_97":349,"_151":350,"_153":-5,"_154":140,"_155":351,"_157":120,"_107":352,"_102":353,"_159":289,"_161":354,"_162":27,"_163":-5,"_164":355,"_100":356},"d12793e2-2056-11f0-8108-569c3dd06744","README.md","1a7c7f16-00fa-11f0-aaee-569c3dd06744",620,["D",1745421769670],10,"# Val to Project Converter\n\n**Note: This converter will become obsolete as we deprecate the old API endpoints and auto-upgrade every val into a project on Apr 30, 2025**\n\nConvert single-file vals into a [Val Town Project](https://blog.val.town/blog/projects/) with proper organization and relative imports.\n\n## Features\n\n- Convert multiple vals into a single project\n- Automatically convert absolute imports to relative imports\n- Optionally helps you redirect old single-file vals to new Project",[],[349],{"_105":358,"_97":359,"_151":360,"_153":-5,"_154":140,"_155":361,"_157":120,"_107":362,"_102":33,"_159":289,"_161":363,"_162":27,"_163":-5,"_164":364,"_100":365},"18c948ec-1af0-11f0-9bf0-569c3dd06744","deno.json","18c949a0-1af0-11f0-9bf0-569c3dd06744",538,["D",1744827895851],"{\n \"$schema\": \"https://raw.githubusercontent.com/denoland/deno/348900b8b79f4a434cab4c74b3bc8d4d2fa8ee74/cli/schemas/config-file.v1.json\",\n \"lock\": false,\n \"compilerOptions\": {\n \"noImplicitAny\": false,\n \"strict\": false,\n \"types\": [\n \"https://www.val.town/types/valtown.d.ts\"\n ],\n \"lib\": [\n \"dom\",\n \"dom.iterable\",\n \"dom.asynciterable\",\n \"deno.ns\",\n \"deno.unstable\"\n ]\n },\n \"lint\": {\n \"files\": {\n \"include\": [\n \"deno:/https/esm.town/**/*\"\n ]\n },\n \"rules\": {\n \"exclude\": [\n \"no-explicit-any\"\n ]\n }\n },\n \"node_modules_dir\": false,\n \"experimental\": {\n \"unstable-node-globals\": true,\n \"unstable-temporal\": true,\n \"unstable-worker-options\": true,\n \"unstable-sloppy-imports\": true\n }\n}",[],[359],"files",[148,166,173,184,190,200,210,221,227,234,244,254,264,273,282,293,302,311,322,328,338,347,357],"counts",{"_370":33,"_371":224,"_372":33,"_373":33},"pulls","branches","forks","envVars","contents",[376,379,382,385,388],{"_105":228,"_97":229,"_151":230,"_153":223,"_154":140,"_155":231,"_157":120,"_107":377,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_100":378},["D",1741973513936],[101,229],{"_105":283,"_97":284,"_151":285,"_153":223,"_154":140,"_155":286,"_157":120,"_107":380,"_102":288,"_159":289,"_161":290,"_162":27,"_163":-5,"_100":381},["D",1742144896441],[101,284],{"_105":294,"_97":295,"_151":296,"_153":223,"_154":140,"_155":268,"_157":120,"_107":383,"_102":298,"_159":289,"_161":299,"_162":27,"_163":-5,"_100":384},["D",1744835152290],[101,295],{"_105":303,"_97":304,"_151":305,"_153":223,"_154":140,"_155":268,"_157":120,"_107":386,"_102":307,"_159":179,"_161":308,"_162":27,"_163":-5,"_100":387},["D",1744835152290],[101,304],{"_105":312,"_97":313,"_151":314,"_153":223,"_154":140,"_155":315,"_157":120,"_107":389,"_102":317,"_159":289,"_161":318,"_162":27,"_163":-5,"_100":390},["D",1744836886107],[101,313],{"_105":222,"_97":101,"_151":223,"_153":-5,"_154":140,"_155":224,"_157":120,"_107":392,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_100":393},["D",1741973465823],[101],"upstream","screenshots",{"_397":398,"_399":400},"thumbnail","https://screenshots.valtown.net/screenshot.png?width=1024&height=768&version=612&url=https%3A%2F%2Fcharmaine--7933b61e00fa11f093b2569c3dd06744.web.val.run","preview","https://screenshots.valtown.net/screenshot.png?width=1920&height=1080&version=612&url=https%3A%2F%2Fcharmaine--7933b61e00fa11f093b2569c3dd06744.web.val.run","emptyEnvVars","isNew","routes/_app.x.$handle.$name.code.$",{"_95":96,"_97":98,"_99":43,"_102":-7,"_100":101,"_103":405,"_146":409,"_366":479,"_289":480,"_374":482,"_394":-5,"_493":27,"_494":-5},{"_105":106,"_97":98,"_107":406,"_109":-5,"_110":27,"_111":112,"_113":114,"_115":-5,"_12":116,"_117":118,"_119":120,"_121":122,"_123":124,"_125":126,"_127":126,"_128":129,"_130":129,"_131":129,"_132":126,"_133":27,"_21":407,"_137":408},["D",1741973331429],{"_95":96,"_135":136},{"_102":139,"_97":43,"_105":140,"_141":106,"_142":-5,"_143":-5,"_144":-5,"_145":-5},[410,431,464,470,473,476],{"_105":149,"_97":150,"_151":152,"_153":-5,"_154":140,"_155":156,"_157":120,"_107":158,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":411,"_100":430},[412,418,427],{"_105":167,"_97":168,"_151":169,"_153":152,"_154":140,"_155":170,"_157":120,"_107":171,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":413,"_100":417},[414],{"_105":174,"_97":175,"_151":176,"_153":169,"_154":140,"_155":177,"_157":120,"_107":178,"_102":33,"_159":179,"_161":180,"_162":27,"_163":-5,"_164":415,"_100":416},[],[150,168,175],[150,168],{"_105":185,"_97":186,"_151":187,"_153":152,"_154":140,"_155":156,"_157":120,"_107":188,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":419,"_100":426},[420,423],{"_105":191,"_97":192,"_151":193,"_153":187,"_154":140,"_155":194,"_157":120,"_107":195,"_102":196,"_159":179,"_161":197,"_162":27,"_163":-5,"_164":421,"_100":422},[],[150,186,192],{"_105":201,"_97":202,"_151":203,"_153":187,"_154":140,"_155":139,"_157":120,"_107":204,"_102":205,"_159":179,"_161":206,"_162":27,"_163":-5,"_164":424,"_100":425},[],[150,186,202],[150,186],{"_105":211,"_97":212,"_151":118,"_153":152,"_154":140,"_155":122,"_157":120,"_107":213,"_102":214,"_159":215,"_161":216,"_162":27,"_163":217,"_164":428,"_100":429},[],[150,212],[150],{"_105":222,"_97":101,"_151":223,"_153":-5,"_154":140,"_155":224,"_157":120,"_107":225,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":432,"_100":463},[433,451,454,457,460],{"_105":228,"_97":229,"_151":230,"_153":223,"_154":140,"_155":231,"_157":120,"_107":232,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":434,"_100":450},[435,438,441,444,447],{"_105":235,"_97":236,"_151":237,"_153":230,"_154":140,"_155":238,"_157":120,"_107":239,"_102":240,"_159":179,"_161":241,"_162":27,"_163":-5,"_164":436,"_100":437},[],[101,229,236],{"_105":245,"_97":246,"_151":247,"_153":230,"_154":140,"_155":248,"_157":120,"_107":249,"_102":250,"_159":179,"_161":251,"_162":27,"_163":-5,"_164":439,"_100":440},[],[101,229,246],{"_105":255,"_97":256,"_151":257,"_153":230,"_154":140,"_155":258,"_157":120,"_107":259,"_102":260,"_159":179,"_161":261,"_162":27,"_163":-5,"_164":442,"_100":443},[],[101,229,256],{"_105":265,"_97":266,"_151":267,"_153":230,"_154":140,"_155":268,"_157":120,"_107":269,"_102":231,"_159":179,"_161":270,"_162":27,"_163":-5,"_164":445,"_100":446},[],[101,229,266],{"_105":274,"_97":275,"_151":276,"_153":230,"_154":140,"_155":268,"_157":120,"_107":277,"_102":231,"_159":179,"_161":278,"_162":27,"_163":-5,"_164":448,"_100":449},[],[101,229,275],[101,229],{"_105":283,"_97":284,"_151":285,"_153":223,"_154":140,"_155":286,"_157":120,"_107":287,"_102":288,"_159":289,"_161":290,"_162":27,"_163":-5,"_164":452,"_100":453},[],[101,284],{"_105":294,"_97":295,"_151":296,"_153":223,"_154":140,"_155":268,"_157":120,"_107":297,"_102":298,"_159":289,"_161":299,"_162":27,"_163":-5,"_164":455,"_100":456},[],[101,295],{"_105":303,"_97":304,"_151":305,"_153":223,"_154":140,"_155":268,"_157":120,"_107":306,"_102":307,"_159":179,"_161":308,"_162":27,"_163":-5,"_164":458,"_100":459},[],[101,304],{"_105":312,"_97":313,"_151":314,"_153":223,"_154":140,"_155":315,"_157":120,"_107":316,"_102":317,"_159":289,"_161":318,"_162":27,"_163":-5,"_164":461,"_100":462},[],[101,313],[101],{"_105":323,"_97":324,"_151":325,"_153":-5,"_154":140,"_155":260,"_157":120,"_107":326,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_164":465,"_100":469},[466],{"_105":329,"_97":330,"_151":331,"_153":325,"_154":140,"_155":332,"_157":120,"_107":333,"_102":231,"_159":179,"_161":334,"_162":27,"_163":-5,"_164":467,"_100":468},[],[324,330],[324],{"_105":339,"_97":340,"_151":341,"_153":-5,"_154":140,"_155":342,"_157":120,"_107":343,"_102":33,"_159":289,"_161":344,"_162":27,"_163":-5,"_164":471,"_100":472},[],[340],{"_105":348,"_97":349,"_151":350,"_153":-5,"_154":140,"_155":351,"_157":120,"_107":352,"_102":353,"_159":289,"_161":354,"_162":27,"_163":-5,"_164":474,"_100":475},[],[349],{"_105":358,"_97":359,"_151":360,"_153":-5,"_154":140,"_155":361,"_157":120,"_107":362,"_102":33,"_159":289,"_161":363,"_162":27,"_163":-5,"_164":477,"_100":478},[],[359],[410,412,414,418,420,423,427,431,433,435,438,441,444,447,451,454,457,460,464,466,470,473,476],{"_105":222,"_97":101,"_151":223,"_153":-5,"_154":140,"_155":224,"_157":120,"_107":392,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_100":481},[101],[483,485,487,489,491],{"_105":228,"_97":229,"_151":230,"_153":223,"_154":140,"_155":231,"_157":120,"_107":377,"_102":33,"_159":160,"_161":-5,"_162":27,"_163":-5,"_100":484},[101,229],{"_105":283,"_97":284,"_151":285,"_153":223,"_154":140,"_155":286,"_157":120,"_107":380,"_102":288,"_159":289,"_161":290,"_162":27,"_163":-5,"_100":486},[101,284],{"_105":294,"_97":295,"_151":296,"_153":223,"_154":140,"_155":268,"_157":120,"_107":383,"_102":298,"_159":289,"_161":299,"_162":27,"_163":-5,"_100":488},[101,295],{"_105":303,"_97":304,"_151":305,"_153":223,"_154":140,"_155":268,"_157":120,"_107":386,"_102":307,"_159":179,"_161":308,"_162":27,"_163":-5,"_100":490},[101,304],{"_105":312,"_97":313,"_151":314,"_153":223,"_154":140,"_155":315,"_157":120,"_107":389,"_102":317,"_159":289,"_161":318,"_162":27,"_163":-5,"_100":492},[101,313],"showCompareCallout","pull","routes/_app","actionData","errors"]