[{"_1":2,"_171":-5,"_172":-5},"loaderData",{"_3":4,"_91":92},"root",{"_5":6,"_34":35,"_64":65},"ctx",{"_7":8,"_23":-5,"_24":25,"_26":27,"_28":20,"_29":20,"_30":20,"_31":32,"_33":20},"auth",{"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20,"_21":22},"sessionClaims","sessionId","sessionStatus","userId","actor","orgId","orgRole","orgSlug","orgPermissions","factorVerificationAge","isAuthenticated",false,"tokenType","session_token","user","preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","notificationCount",0,"flagDenols","ENV",{"_36":37,"_38":39,"_40":41,"_42":43,"_44":45,"_46":47,"_48":49,"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_62":63},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","VAL_RUNTIME_NAME","prod","RENDER_GIT_COMMIT","4049fd8e684531193de8d0777b9ab11a81dae27e","RENDER_GIT_BRANCH","main","CLERK_PUBLISHABLE_KEY","pk_live_Y2xlcmsudmFsLnRvd24k","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","API_URL","https://api.val.town","clerkState",{"_66":67},"__internal_clerk_state",{"_68":69,"_70":45,"_71":72,"_73":72,"_74":20,"_75":72,"_76":72,"_77":72,"_78":72,"_79":80,"_89":20,"_90":20},"__clerk_ssr_state",{"_21":22,"_9":-5,"_10":-5,"_11":-5,"_12":-5,"_13":-5,"_14":-5,"_15":-5,"_16":-5,"_17":-5,"_18":-5,"_19":20},"__publishableKey","__proxyUrl","","__domain","__isSatellite","__signInUrl","__signUpUrl","__afterSignInUrl","__afterSignUpUrl","__clerk_debug",{"_81":20,"_19":20,"_82":72,"_83":84,"_85":72,"_86":45,"_87":20,"_88":72},"isSignedIn","proxyUrl","reason","session-token-and-uat-missing","message","publishableKey","isSatellite","domain","__telemetryDisabled","__telemetryDebug","routes/embed.x.$handle.$name.$",{"_93":94,"_95":96,"_97":98,"_99":100,"_146":147,"_168":169,"_170":-5},"handle","dhvanil","name","untitled-421","path","components/html.ts","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":20,"_107":108,"_109":-5,"_110":-5,"_12":111,"_112":-5,"_113":20,"_114":-5,"_115":32,"_14":116,"_117":118,"_119":118,"_120":121,"_122":121,"_123":121,"_124":118,"_125":118,"_23":126,"_129":130,"_132":133,"_145":20},"id","d7088d24-3bb9-11f0-90db-9e149126039e","createdAt",["D",1748432981111],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","32765ebe-d05f-4753-a823-a8be39b8f577","pinnedFileId","pinPreview","screenshotVersion","likeCount","0cc0ecd3-bdff-490f-92b4-a6682e79cdae","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_127":128},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yb1RNUGY2SmR3Vkt3VmVtSTIwZXJlM3pqV1IifQ","org",{"_93":94,"_131":128,"_12":111},"avatar","branch",{"_134":135,"_95":43,"_101":136,"_137":102,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":96,"_144":94},"version",13,"d708c1b8-3bb9-11f0-90db-9e149126039e","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":148,"_95":149,"_150":151,"_152":153,"_154":136,"_155":156,"_157":158,"_103":159,"_134":32,"_160":161,"_162":163,"_164":20,"_165":-5,"_97":166},"245ba9bc-3bba-11f0-bdfd-9e149126039e","html.ts","fileId","245baa7a-3bba-11f0-bdfd-9e149126039e","parentId","89bf895d-709c-4253-8d79-351754e4855a","branchId","branchVersion",6,"latest",true,["D",1748433110837],"fileType","script","content","/**\n * Component-based HTML generation utilities\n */\n\nexport interface HTMLComponent {\n tag: string;\n attributes?: Record;\n children?: (string | HTMLComponent)[];\n content?: string;\n}\n\n/**\n * Render an HTML component to string\n */\nexport function renderComponent(component: HTMLComponent): string {\n const { tag, attributes = {}, children = [], content = \"\" } = component;\n \n // Build attributes string\n const attrs = Object.entries(attributes)\n .map(([key, value]) => `${key}=\"${value}\"`)\n .join(\" \");\n \n const attrString = attrs ? ` ${attrs}` : \"\";\n \n // Self-closing tags\n const selfClosing = [\"img\", \"br\", \"hr\", \"input\", \"meta\", \"link\"];\n if (selfClosing.includes(tag)) {\n return `<${tag}${attrString} />`;\n }\n \n // Render children\n const childrenHTML = children\n .map(child => typeof child === \"string\" ? child : renderComponent(child))\n .join(\"\");\n \n return `<${tag}${attrString}>${content}${childrenHTML}`;\n}\n\n/**\n * Create common HTML components\n */\nexport const HTML = {\n div: (attributes?: Record, children?: (string | HTMLComponent)[]): HTMLComponent => ({\n tag: \"div\",\n attributes,\n children\n }),\n \n h1: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"h1\",\n content,\n attributes\n }),\n \n h2: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"h2\",\n content,\n attributes\n }),\n \n p: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"p\",\n content,\n attributes\n }),\n \n a: (content: string, href: string, attributes?: Record): HTMLComponent => ({\n tag: \"a\",\n content,\n attributes: { href, ...attributes }\n }),\n \n button: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"button\",\n content,\n attributes\n }),\n \n input: (type: string, attributes?: Record): HTMLComponent => ({\n tag: \"input\",\n attributes: { type, ...attributes }\n }),\n \n img: (src: string, alt: string, attributes?: Record): HTMLComponent => ({\n tag: \"img\",\n attributes: { src, alt, ...attributes }\n }),\n \n ul: (children: HTMLComponent[], attributes?: Record): HTMLComponent => ({\n tag: \"ul\",\n attributes,\n children\n }),\n \n li: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"li\",\n content,\n attributes\n }),\n \n form: (children: HTMLComponent[], attributes?: Record): HTMLComponent => ({\n tag: \"form\",\n attributes,\n children\n }),\n \n label: (content: string, attributes?: Record): HTMLComponent => ({\n tag: \"label\",\n content,\n attributes\n }),\n \n textarea: (attributes?: Record): HTMLComponent => ({\n tag: \"textarea\",\n attributes\n }),\n \n select: (children: HTMLComponent[], attributes?: Record): HTMLComponent => ({\n tag: \"select\",\n attributes,\n children\n }),\n \n option: (content: string, value: string, attributes?: Record): HTMLComponent => ({\n tag: \"option\",\n content,\n attributes: { value, ...attributes }\n })\n};\n\n/**\n * Create a complete HTML document\n */\nexport function createDocument(options: {\n title: string;\n body: HTMLComponent[];\n head?: HTMLComponent[];\n lang?: string;\n}): string {\n const { title, body, head = [], lang = \"en\" } = options;\n \n const document: HTMLComponent = {\n tag: \"html\",\n attributes: { lang },\n children: [\n {\n tag: \"head\",\n children: [\n { tag: \"meta\", attributes: { charset: \"UTF-8\" } },\n { tag: \"meta\", attributes: { name: \"viewport\", content: \"width=device-width, initial-scale=1.0\" } },\n { tag: \"title\", content: title },\n { tag: \"script\", attributes: { src: \"https://cdn.twind.style\", crossorigin: \"\" } },\n ...head\n ]\n },\n {\n tag: \"body\",\n attributes: { class: \"bg-gray-50 min-h-screen\" },\n children: body\n }\n ]\n };\n \n return `\\n${renderComponent(document)}`;\n}","deleted","label",[167,149],"components","permalink","https://www.val.town/x/dhvanil/untitled-421/code/components/html.ts","extension","actionData","errors"]