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

charmaine

val_to_project_converter