Val to Project Converter [Beta]

\n\n {error &&

Error: {error}

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

\n \n

\n );\n}",[],[220,227,234],{"_102":243,"_95":244,"_148":245,"_150":228,"_151":137,"_152":246,"_154":117,"_104":247,"_99":248,"_156":176,"_158":249,"_159":27,"_160":-5,"_161":250,"_98":251},"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}",[],[220,227,244],{"_102":253,"_95":254,"_148":255,"_150":228,"_151":137,"_152":256,"_154":117,"_104":257,"_99":258,"_156":176,"_158":259,"_159":27,"_160":-5,"_161":260,"_98":261},"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}",[],[220,227,254],{"_102":263,"_95":264,"_148":265,"_150":228,"_151":137,"_152":266,"_154":117,"_104":267,"_99":229,"_156":176,"_158":268,"_159":27,"_160":-5,"_161":269,"_98":270},"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} ",[],[220,227,264],{"_102":272,"_95":273,"_148":274,"_150":228,"_151":137,"_152":266,"_154":117,"_104":275,"_99":229,"_156":176,"_158":276,"_159":27,"_160":-5,"_161":277,"_98":278},"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} ",[],[220,227,273],[220,227],{"_102":281,"_95":282,"_148":283,"_150":221,"_151":137,"_152":284,"_154":117,"_104":285,"_99":286,"_156":287,"_158":288,"_159":27,"_160":-5,"_161":289,"_98":290},"408184fa-0289-11f0-8ce5-569c3dd06744","favicon.svg","e5cf2620-0288-11f0-b61d-569c3dd06744",320,["D",1742144896441],3,"file","",[],[220,282],{"_102":292,"_95":293,"_148":294,"_150":221,"_151":137,"_152":266,"_154":117,"_104":295,"_99":296,"_156":287,"_158":297,"_159":27,"_160":-5,"_161":298,"_98":299},"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",[],[220,293],{"_102":301,"_95":302,"_148":303,"_150":221,"_151":137,"_152":266,"_154":117,"_104":304,"_99":305,"_156":176,"_158":306,"_159":27,"_160":-5,"_161":307,"_98":308},"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}",[],[220,302],{"_102":310,"_95":311,"_148":312,"_150":221,"_151":137,"_152":313,"_154":117,"_104":314,"_99":315,"_156":287,"_158":316,"_159":27,"_160":-5,"_161":317,"_98":318},"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}",[],[220,311],[220],{"_102":321,"_95":322,"_148":323,"_150":-5,"_151":137,"_152":258,"_154":117,"_104":324,"_99":31,"_156":157,"_158":-5,"_159":27,"_160":-5,"_161":325,"_98":335},"3ba7ca9c-00fa-11f0-b493-569c3dd06744","shared","9d09b083-98f8-4b05-b0fa-1750b5da7a09",["D",1741973519111],[326],{"_102":327,"_95":328,"_148":329,"_150":323,"_151":137,"_152":330,"_154":117,"_104":331,"_99":229,"_156":176,"_158":332,"_159":27,"_160":-5,"_161":333,"_98":334},"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}",[],[322,328],[322],{"_102":337,"_95":338,"_148":339,"_150":-5,"_151":137,"_152":340,"_154":117,"_104":341,"_99":31,"_156":287,"_158":342,"_159":27,"_160":-5,"_161":343,"_98":344},"18cc3e6c-1af0-11f0-ad2b-569c3dd06744",".vtignore","18cc3fe8-1af0-11f0-ad2b-569c3dd06744",539,["D",1744827895857],".git\n.DS_Store\nnode_modules\nvendor",[],[338],{"_102":346,"_95":347,"_148":348,"_150":-5,"_151":137,"_152":349,"_154":117,"_104":350,"_99":351,"_156":287,"_158":352,"_159":27,"_160":-5,"_161":353,"_98":354},"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",[],[347],{"_102":356,"_95":357,"_148":358,"_150":-5,"_151":137,"_152":359,"_154":117,"_104":360,"_99":31,"_156":287,"_158":361,"_159":27,"_160":-5,"_161":362,"_98":363},"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}",[],[357],"files",[145,163,170,181,187,197,207,218,225,232,242,252,262,271,280,291,300,309,320,326,336,345,355],"counts",{"_368":31,"_369":222,"_370":31,"_371":31},"pulls","branches","forks","envVars","contents",[374,377,380,383,386,389],{"_102":146,"_95":147,"_148":149,"_150":-5,"_151":137,"_152":153,"_154":117,"_104":375,"_99":31,"_156":157,"_158":-5,"_159":27,"_160":-5,"_98":376},["D",1741973546966],[147],{"_102":219,"_95":220,"_148":221,"_150":-5,"_151":137,"_152":222,"_154":117,"_104":378,"_99":31,"_156":157,"_158":-5,"_159":27,"_160":-5,"_98":379},["D",1741973465823],[220],{"_102":321,"_95":322,"_148":323,"_150":-5,"_151":137,"_152":258,"_154":117,"_104":381,"_99":31,"_156":157,"_158":-5,"_159":27,"_160":-5,"_98":382},["D",1741973519111],[322],{"_102":337,"_95":338,"_148":339,"_150":-5,"_151":137,"_152":340,"_154":117,"_104":384,"_99":31,"_156":287,"_158":342,"_159":27,"_160":-5,"_98":385},["D",1744827895857],[338],{"_102":346,"_95":347,"_148":348,"_150":-5,"_151":137,"_152":349,"_154":117,"_104":387,"_99":351,"_156":287,"_158":352,"_159":27,"_160":-5,"_98":388},["D",1745421769670],[347],{"_102":356,"_95":357,"_148":358,"_150":-5,"_151":137,"_152":359,"_154":117,"_104":390,"_99":31,"_156":287,"_158":361,"_159":27,"_160":-5,"_98":391},["D",1744827895851],[357],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.environment-variables",{"_93":94,"_95":96,"_100":397,"_371":401},{"_102":103,"_95":96,"_104":398,"_106":-5,"_107":27,"_108":109,"_110":111,"_112":-5,"_12":113,"_114":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":123,"_125":126,"_127":126,"_128":126,"_129":123,"_130":27,"_21":399,"_134":400},["D",1741973331429],{"_93":94,"_132":133},{"_99":136,"_95":41,"_102":137,"_138":103,"_139":-5,"_140":-5,"_141":-5,"_142":-5},[],"routes/_app","actionData","errors"]

Environment variables