Val to Project Converter [Beta]

\n\n {error &&

Error: {error}

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

\n \n

\n );\n}",[],[223,230,237],{"_104":246,"_95":247,"_150":248,"_152":231,"_153":139,"_154":249,"_156":119,"_106":250,"_100":251,"_158":178,"_160":252,"_161":27,"_162":-5,"_163":253,"_98":254},"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}",[],[223,230,247],{"_104":256,"_95":257,"_150":258,"_152":231,"_153":139,"_154":259,"_156":119,"_106":260,"_100":261,"_158":178,"_160":262,"_161":27,"_162":-5,"_163":263,"_98":264},"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}",[],[223,230,257],{"_104":266,"_95":267,"_150":268,"_152":231,"_153":139,"_154":269,"_156":119,"_106":270,"_100":232,"_158":178,"_160":271,"_161":27,"_162":-5,"_163":272,"_98":273},"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} ",[],[223,230,267],{"_104":275,"_95":276,"_150":277,"_152":231,"_153":139,"_154":269,"_156":119,"_106":278,"_100":232,"_158":178,"_160":279,"_161":27,"_162":-5,"_163":280,"_98":281},"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} ",[],[223,230,276],[223,230],{"_104":284,"_95":285,"_150":286,"_152":224,"_153":139,"_154":287,"_156":119,"_106":288,"_100":289,"_158":290,"_160":291,"_161":27,"_162":-5,"_163":292,"_98":293},"408184fa-0289-11f0-8ce5-569c3dd06744","favicon.svg","e5cf2620-0288-11f0-b61d-569c3dd06744",320,["D",1742144896441],3,"file","",[],[223,285],{"_104":295,"_95":296,"_150":297,"_152":224,"_153":139,"_154":269,"_156":119,"_106":298,"_100":299,"_158":290,"_160":300,"_161":27,"_162":-5,"_163":301,"_98":302},"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",[],[223,296],{"_104":304,"_95":305,"_150":306,"_152":224,"_153":139,"_154":269,"_156":119,"_106":307,"_100":308,"_158":178,"_160":309,"_161":27,"_162":-5,"_163":310,"_98":311},"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}",[],[223,305],{"_104":313,"_95":314,"_150":315,"_152":224,"_153":139,"_154":316,"_156":119,"_106":317,"_100":318,"_158":290,"_160":319,"_161":27,"_162":-5,"_163":320,"_98":321},"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}",[],[223,314],[223],{"_104":324,"_95":325,"_150":326,"_152":-5,"_153":139,"_154":261,"_156":119,"_106":327,"_100":31,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":328,"_98":338},"3ba7ca9c-00fa-11f0-b493-569c3dd06744","shared","9d09b083-98f8-4b05-b0fa-1750b5da7a09",["D",1741973519111],[329],{"_104":330,"_95":331,"_150":332,"_152":326,"_153":139,"_154":333,"_156":119,"_106":334,"_100":232,"_158":178,"_160":335,"_161":27,"_162":-5,"_163":336,"_98":337},"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}",[],[325,331],[325],{"_104":340,"_95":99,"_150":341,"_152":-5,"_153":139,"_154":342,"_156":119,"_106":343,"_100":31,"_158":290,"_160":344,"_161":27,"_162":-5,"_163":345,"_98":346},"18cc3e6c-1af0-11f0-ad2b-569c3dd06744","18cc3fe8-1af0-11f0-ad2b-569c3dd06744",539,["D",1744827895857],".git\n.DS_Store\nnode_modules\nvendor",[],[99],{"_104":348,"_95":349,"_150":350,"_152":-5,"_153":139,"_154":101,"_156":119,"_106":351,"_100":352,"_158":290,"_160":353,"_161":27,"_162":-5,"_163":354,"_98":355},"d12793e2-2056-11f0-8108-569c3dd06744","README.md","1a7c7f16-00fa-11f0-aaee-569c3dd06744",["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],{"_104":357,"_95":358,"_150":359,"_152":-5,"_153":139,"_154":360,"_156":119,"_106":361,"_100":31,"_158":290,"_160":362,"_161":27,"_162":-5,"_163":363,"_98":364},"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}",[],[358],"files",[147,165,172,183,189,199,210,221,228,235,245,255,265,274,283,294,303,312,323,329,339,347,356],"counts",{"_369":31,"_370":225,"_371":31,"_372":31},"pulls","branches","forks","envVars","contents",[],{"_104":340,"_95":99,"_150":341,"_152":-5,"_153":139,"_154":342,"_156":119,"_106":376,"_100":31,"_158":290,"_160":344,"_161":27,"_162":-5,"_98":377},["D",1744827895857],[99],"upstream","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":41,"_100":101,"_98":99,"_102":383,"_145":387,"_365":457,"_290":458,"_373":460,"_378":-5,"_461":27,"_462":-5},{"_104":105,"_95":96,"_106":384,"_108":-5,"_109":27,"_110":111,"_112":113,"_114":-5,"_12":115,"_116":117,"_118":119,"_120":121,"_122":123,"_124":125,"_126":125,"_127":128,"_129":128,"_130":128,"_131":125,"_132":27,"_21":385,"_136":386},["D",1741973331429],{"_93":94,"_134":135},{"_100":138,"_95":41,"_104":139,"_140":105,"_141":-5,"_142":-5,"_143":-5,"_144":-5},[388,409,442,448,451,454],{"_104":148,"_95":149,"_150":151,"_152":-5,"_153":139,"_154":155,"_156":119,"_106":157,"_100":31,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":389,"_98":408},[390,396,405],{"_104":166,"_95":167,"_150":168,"_152":151,"_153":139,"_154":169,"_156":119,"_106":170,"_100":31,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":391,"_98":395},[392],{"_104":173,"_95":174,"_150":175,"_152":168,"_153":139,"_154":176,"_156":119,"_106":177,"_100":31,"_158":178,"_160":179,"_161":27,"_162":-5,"_163":393,"_98":394},[],[149,167,174],[149,167],{"_104":184,"_95":185,"_150":186,"_152":151,"_153":139,"_154":155,"_156":119,"_106":187,"_100":31,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":397,"_98":404},[398,401],{"_104":190,"_95":191,"_150":192,"_152":186,"_153":139,"_154":193,"_156":27,"_106":194,"_100":195,"_158":178,"_160":196,"_161":27,"_162":-5,"_163":399,"_98":400},[],[149,185,191],{"_104":200,"_95":201,"_150":202,"_152":186,"_153":139,"_154":203,"_156":27,"_106":204,"_100":205,"_158":178,"_160":206,"_161":27,"_162":-5,"_163":402,"_98":403},[],[149,185,201],[149,185],{"_104":211,"_95":212,"_150":117,"_152":151,"_153":139,"_154":121,"_156":119,"_106":213,"_100":214,"_158":215,"_160":216,"_161":27,"_162":217,"_163":406,"_98":407},[],[149,212],[149],{"_104":222,"_95":223,"_150":224,"_152":-5,"_153":139,"_154":225,"_156":119,"_106":226,"_100":31,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":410,"_98":441},[411,429,432,435,438],{"_104":229,"_95":230,"_150":231,"_152":224,"_153":139,"_154":232,"_156":119,"_106":233,"_100":31,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":412,"_98":428},[413,416,419,422,425],{"_104":236,"_95":237,"_150":238,"_152":231,"_153":139,"_154":239,"_156":119,"_106":240,"_100":241,"_158":178,"_160":242,"_161":27,"_162":-5,"_163":414,"_98":415},[],[223,230,237],{"_104":246,"_95":247,"_150":248,"_152":231,"_153":139,"_154":249,"_156":119,"_106":250,"_100":251,"_158":178,"_160":252,"_161":27,"_162":-5,"_163":417,"_98":418},[],[223,230,247],{"_104":256,"_95":257,"_150":258,"_152":231,"_153":139,"_154":259,"_156":119,"_106":260,"_100":261,"_158":178,"_160":262,"_161":27,"_162":-5,"_163":420,"_98":421},[],[223,230,257],{"_104":266,"_95":267,"_150":268,"_152":231,"_153":139,"_154":269,"_156":119,"_106":270,"_100":232,"_158":178,"_160":271,"_161":27,"_162":-5,"_163":423,"_98":424},[],[223,230,267],{"_104":275,"_95":276,"_150":277,"_152":231,"_153":139,"_154":269,"_156":119,"_106":278,"_100":232,"_158":178,"_160":279,"_161":27,"_162":-5,"_163":426,"_98":427},[],[223,230,276],[223,230],{"_104":284,"_95":285,"_150":286,"_152":224,"_153":139,"_154":287,"_156":119,"_106":288,"_100":289,"_158":290,"_160":291,"_161":27,"_162":-5,"_163":430,"_98":431},[],[223,285],{"_104":295,"_95":296,"_150":297,"_152":224,"_153":139,"_154":269,"_156":119,"_106":298,"_100":299,"_158":290,"_160":300,"_161":27,"_162":-5,"_163":433,"_98":434},[],[223,296],{"_104":304,"_95":305,"_150":306,"_152":224,"_153":139,"_154":269,"_156":119,"_106":307,"_100":308,"_158":178,"_160":309,"_161":27,"_162":-5,"_163":436,"_98":437},[],[223,305],{"_104":313,"_95":314,"_150":315,"_152":224,"_153":139,"_154":316,"_156":119,"_106":317,"_100":318,"_158":290,"_160":319,"_161":27,"_162":-5,"_163":439,"_98":440},[],[223,314],[223],{"_104":324,"_95":325,"_150":326,"_152":-5,"_153":139,"_154":261,"_156":119,"_106":327,"_100":31,"_158":159,"_160":-5,"_161":27,"_162":-5,"_163":443,"_98":447},[444],{"_104":330,"_95":331,"_150":332,"_152":326,"_153":139,"_154":333,"_156":119,"_106":334,"_100":232,"_158":178,"_160":335,"_161":27,"_162":-5,"_163":445,"_98":446},[],[325,331],[325],{"_104":340,"_95":99,"_150":341,"_152":-5,"_153":139,"_154":342,"_156":119,"_106":343,"_100":31,"_158":290,"_160":344,"_161":27,"_162":-5,"_163":449,"_98":450},[],[99],{"_104":348,"_95":349,"_150":350,"_152":-5,"_153":139,"_154":101,"_156":119,"_106":351,"_100":352,"_158":290,"_160":353,"_161":27,"_162":-5,"_163":452,"_98":453},[],[349],{"_104":357,"_95":358,"_150":359,"_152":-5,"_153":139,"_154":360,"_156":119,"_106":361,"_100":31,"_158":290,"_160":362,"_161":27,"_162":-5,"_163":455,"_98":456},[],[358],[388,390,392,396,398,401,405,409,411,413,416,419,422,425,429,432,435,438,442,444,448,451,454],{"_104":340,"_95":99,"_150":341,"_152":-5,"_153":139,"_154":342,"_156":119,"_106":376,"_100":31,"_158":290,"_160":344,"_161":27,"_162":-5,"_98":459},[99],[],"showCompareCallout","pull","routes/_app","actionData","errors"]