Val to Project Converter [Beta]

\n\n {error &&

Error: {error}

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

\n \n

\n );\n}",[],[229,236,243],{"_107":252,"_98":253,"_157":254,"_159":237,"_160":143,"_161":255,"_163":122,"_109":256,"_103":257,"_165":185,"_167":258,"_168":25,"_169":-5,"_170":259,"_101":260},"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}",[],[229,236,253],{"_107":262,"_98":263,"_157":264,"_159":237,"_160":143,"_161":265,"_163":122,"_109":266,"_103":267,"_165":185,"_167":268,"_168":25,"_169":-5,"_170":269,"_101":270},"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}",[],[229,236,263],{"_107":272,"_98":273,"_157":274,"_159":237,"_160":143,"_161":275,"_163":122,"_109":276,"_103":238,"_165":185,"_167":277,"_168":25,"_169":-5,"_170":278,"_101":279},"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} ",[],[229,236,273],{"_107":281,"_98":282,"_157":283,"_159":237,"_160":143,"_161":275,"_163":122,"_109":284,"_103":238,"_165":185,"_167":285,"_168":25,"_169":-5,"_170":286,"_101":287},"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} ",[],[229,236,282],[229,236],{"_107":290,"_98":291,"_157":292,"_159":230,"_160":143,"_161":293,"_163":122,"_109":294,"_103":295,"_165":296,"_167":297,"_168":25,"_169":-5,"_170":298,"_101":299},"408184fa-0289-11f0-8ce5-569c3dd06744","favicon.svg","e5cf2620-0288-11f0-b61d-569c3dd06744",320,["D",1742144896441],3,"file","",[],[229,291],{"_107":301,"_98":302,"_157":303,"_159":230,"_160":143,"_161":275,"_163":122,"_109":304,"_103":305,"_165":296,"_167":306,"_168":25,"_169":-5,"_170":307,"_101":308},"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",[],[229,302],{"_107":310,"_98":311,"_157":312,"_159":230,"_160":143,"_161":275,"_163":122,"_109":313,"_103":314,"_165":185,"_167":315,"_168":25,"_169":-5,"_170":316,"_101":317},"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}",[],[229,311],{"_107":319,"_98":320,"_157":321,"_159":230,"_160":143,"_161":322,"_163":122,"_109":323,"_103":324,"_165":296,"_167":325,"_168":25,"_169":-5,"_170":326,"_101":327},"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}",[],[229,320],[229],{"_107":330,"_98":102,"_157":331,"_159":-5,"_160":143,"_161":267,"_163":122,"_109":332,"_103":29,"_165":166,"_167":-5,"_168":25,"_169":-5,"_170":333,"_101":343},"3ba7ca9c-00fa-11f0-b493-569c3dd06744","9d09b083-98f8-4b05-b0fa-1750b5da7a09",["D",1741973519111],[334],{"_107":335,"_98":336,"_157":337,"_159":331,"_160":143,"_161":338,"_163":122,"_109":339,"_103":238,"_165":185,"_167":340,"_168":25,"_169":-5,"_170":341,"_101":342},"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}",[],[102,336],[102],{"_107":345,"_98":346,"_157":347,"_159":-5,"_160":143,"_161":348,"_163":122,"_109":349,"_103":29,"_165":296,"_167":350,"_168":25,"_169":-5,"_170":351,"_101":352},"18cc3e6c-1af0-11f0-ad2b-569c3dd06744",".vtignore","18cc3fe8-1af0-11f0-ad2b-569c3dd06744",539,["D",1744827895857],".git\n.DS_Store\nnode_modules\nvendor",[],[346],{"_107":354,"_98":355,"_157":356,"_159":-5,"_160":143,"_161":357,"_163":122,"_109":358,"_103":359,"_165":296,"_167":360,"_168":25,"_169":-5,"_170":361,"_101":362},"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",[],[355],{"_107":364,"_98":365,"_157":366,"_159":-5,"_160":143,"_161":367,"_163":122,"_109":368,"_103":29,"_165":296,"_167":369,"_168":25,"_169":-5,"_170":370,"_101":371},"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}",[],[365],"files",[154,172,179,190,196,205,216,227,234,241,251,261,271,280,289,300,309,318,329,334,344,353,363],"counts",{"_376":29,"_377":231,"_378":29,"_379":29},"pulls","branches","forks","envVars","contents",[382],{"_107":335,"_98":336,"_157":337,"_159":331,"_160":143,"_161":338,"_163":122,"_109":383,"_103":238,"_165":185,"_167":340,"_168":25,"_169":-5,"_101":384},["D",1744835237030],[102,336],{"_107":330,"_98":102,"_157":331,"_159":-5,"_160":143,"_161":267,"_163":122,"_109":386,"_103":29,"_165":166,"_167":-5,"_168":25,"_169":-5,"_101":387},["D",1741973519111],[102],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_96":97,"_98":99,"_100":40,"_103":104,"_101":102,"_105":394,"_152":398,"_372":468,"_296":469,"_380":471,"_474":-5,"_475":25,"_476":-5,"_477":-5,"_478":-5,"_479":480},{"_107":108,"_98":99,"_109":395,"_111":-5,"_112":25,"_113":114,"_115":116,"_117":-5,"_12":118,"_119":120,"_121":122,"_123":124,"_125":126,"_14":127,"_128":129,"_130":129,"_131":132,"_133":132,"_134":132,"_135":129,"_136":129,"_19":396,"_140":397,"_151":25},["D",1741973331429],{"_96":97,"_138":139},{"_103":142,"_98":40,"_107":143,"_144":108,"_145":-5,"_146":-5,"_147":-5,"_148":-5,"_149":99,"_150":97},[399,420,453,459,462,465],{"_107":155,"_98":156,"_157":158,"_159":-5,"_160":143,"_161":162,"_163":122,"_109":164,"_103":29,"_165":166,"_167":-5,"_168":25,"_169":-5,"_170":400,"_101":419},[401,407,416],{"_107":173,"_98":174,"_157":175,"_159":158,"_160":143,"_161":176,"_163":122,"_109":177,"_103":29,"_165":166,"_167":-5,"_168":25,"_169":-5,"_170":402,"_101":406},[403],{"_107":180,"_98":181,"_157":182,"_159":175,"_160":143,"_161":183,"_163":122,"_109":184,"_103":29,"_165":185,"_167":186,"_168":25,"_169":-5,"_170":404,"_101":405},[],[156,174,181],[156,174],{"_107":191,"_98":192,"_157":193,"_159":158,"_160":143,"_161":162,"_163":122,"_109":194,"_103":29,"_165":166,"_167":-5,"_168":25,"_169":-5,"_170":408,"_101":415},[409,412],{"_107":197,"_98":198,"_157":199,"_159":193,"_160":143,"_161":104,"_163":25,"_109":200,"_103":201,"_165":185,"_167":202,"_168":25,"_169":-5,"_170":410,"_101":411},[],[156,192,198],{"_107":206,"_98":207,"_157":208,"_159":193,"_160":143,"_161":209,"_163":25,"_109":210,"_103":211,"_165":185,"_167":212,"_168":25,"_169":-5,"_170":413,"_101":414},[],[156,192,207],[156,192],{"_107":217,"_98":218,"_157":120,"_159":158,"_160":143,"_161":124,"_163":122,"_109":219,"_103":220,"_165":221,"_167":222,"_168":25,"_169":223,"_170":417,"_101":418},[],[156,218],[156],{"_107":228,"_98":229,"_157":230,"_159":-5,"_160":143,"_161":231,"_163":122,"_109":232,"_103":29,"_165":166,"_167":-5,"_168":25,"_169":-5,"_170":421,"_101":452},[422,440,443,446,449],{"_107":235,"_98":236,"_157":237,"_159":230,"_160":143,"_161":238,"_163":122,"_109":239,"_103":29,"_165":166,"_167":-5,"_168":25,"_169":-5,"_170":423,"_101":439},[424,427,430,433,436],{"_107":242,"_98":243,"_157":244,"_159":237,"_160":143,"_161":245,"_163":122,"_109":246,"_103":247,"_165":185,"_167":248,"_168":25,"_169":-5,"_170":425,"_101":426},[],[229,236,243],{"_107":252,"_98":253,"_157":254,"_159":237,"_160":143,"_161":255,"_163":122,"_109":256,"_103":257,"_165":185,"_167":258,"_168":25,"_169":-5,"_170":428,"_101":429},[],[229,236,253],{"_107":262,"_98":263,"_157":264,"_159":237,"_160":143,"_161":265,"_163":122,"_109":266,"_103":267,"_165":185,"_167":268,"_168":25,"_169":-5,"_170":431,"_101":432},[],[229,236,263],{"_107":272,"_98":273,"_157":274,"_159":237,"_160":143,"_161":275,"_163":122,"_109":276,"_103":238,"_165":185,"_167":277,"_168":25,"_169":-5,"_170":434,"_101":435},[],[229,236,273],{"_107":281,"_98":282,"_157":283,"_159":237,"_160":143,"_161":275,"_163":122,"_109":284,"_103":238,"_165":185,"_167":285,"_168":25,"_169":-5,"_170":437,"_101":438},[],[229,236,282],[229,236],{"_107":290,"_98":291,"_157":292,"_159":230,"_160":143,"_161":293,"_163":122,"_109":294,"_103":295,"_165":296,"_167":297,"_168":25,"_169":-5,"_170":441,"_101":442},[],[229,291],{"_107":301,"_98":302,"_157":303,"_159":230,"_160":143,"_161":275,"_163":122,"_109":304,"_103":305,"_165":296,"_167":306,"_168":25,"_169":-5,"_170":444,"_101":445},[],[229,302],{"_107":310,"_98":311,"_157":312,"_159":230,"_160":143,"_161":275,"_163":122,"_109":313,"_103":314,"_165":185,"_167":315,"_168":25,"_169":-5,"_170":447,"_101":448},[],[229,311],{"_107":319,"_98":320,"_157":321,"_159":230,"_160":143,"_161":322,"_163":122,"_109":323,"_103":324,"_165":296,"_167":325,"_168":25,"_169":-5,"_170":450,"_101":451},[],[229,320],[229],{"_107":330,"_98":102,"_157":331,"_159":-5,"_160":143,"_161":267,"_163":122,"_109":332,"_103":29,"_165":166,"_167":-5,"_168":25,"_169":-5,"_170":454,"_101":458},[455],{"_107":335,"_98":336,"_157":337,"_159":331,"_160":143,"_161":338,"_163":122,"_109":339,"_103":238,"_165":185,"_167":340,"_168":25,"_169":-5,"_170":456,"_101":457},[],[102,336],[102],{"_107":345,"_98":346,"_157":347,"_159":-5,"_160":143,"_161":348,"_163":122,"_109":349,"_103":29,"_165":296,"_167":350,"_168":25,"_169":-5,"_170":460,"_101":461},[],[346],{"_107":354,"_98":355,"_157":356,"_159":-5,"_160":143,"_161":357,"_163":122,"_109":358,"_103":359,"_165":296,"_167":360,"_168":25,"_169":-5,"_170":463,"_101":464},[],[355],{"_107":364,"_98":365,"_157":366,"_159":-5,"_160":143,"_161":367,"_163":122,"_109":368,"_103":29,"_165":296,"_167":369,"_168":25,"_169":-5,"_170":466,"_101":467},[],[365],[399,401,403,407,409,412,416,420,422,424,427,430,433,436,440,443,446,449,453,455,459,462,465],{"_107":330,"_98":102,"_157":331,"_159":-5,"_160":143,"_161":267,"_163":122,"_109":386,"_103":29,"_165":166,"_167":-5,"_168":25,"_169":-5,"_101":470},[102],[472],{"_107":335,"_98":336,"_157":337,"_159":331,"_160":143,"_161":338,"_163":122,"_109":383,"_103":238,"_165":185,"_167":340,"_168":25,"_169":-5,"_101":473},[102,336],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"routes/_app","actionData","errors"]