[{"_1":2,"_173":-5,"_174":-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","7f439e1a7c8854d0a3e79c4918a7c5fa89d43a5d","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,"_170":171,"_172":-5},"handle","zcpbx","name","MolstarViewer","path","frontend/components/MolstarViewer.tsx","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","4a052a4e-a843-11f0-a0f8-0224a6c84d84","createdAt",["D",1760366740657],"deletedAt","legacyEnvVars","privacy","public","description","imageUrl","3da541a0-40a4-11f0-a359-812261733f73","pinnedFileId","pinPreview","screenshotVersion","likeCount","0942d0eb-af3b-49c4-9f38-74e044019762","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_127":128},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18yeTBaUXNBY2E1VVg5MFllM3dISTM5aHV4akUifQ","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",661,"4a057be8-a843-11f0-a0f8-0224a6c84d84","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":160,"_161":162,"_163":164,"_165":20,"_166":-5,"_97":167},"2b8f3d56-bdcf-11f0-9fe3-42dde27851f2","MolstarViewer.tsx","fileId","3f40ec44-bdcc-11f0-805b-42dde27851f2","parentId","2aaff194-bdcc-11f0-adc3-42dde27851f2","branchId","branchVersion",658,"latest",true,["D",1762735793506],9,"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useEffect, useRef } from \"https://esm.sh/react@18.2.0\";\n\ninterface MolstarViewerProps {\n layoutIsExpanded?: boolean;\n layoutShowControls?: boolean;\n}\n\nexport function MolstarViewer({\n layoutIsExpanded = true,\n layoutShowControls = true,\n}: MolstarViewerProps) {\n const containerRef = useRef(null);\n const [error, setError] = React.useState(null);\n const [loading, setLoading] = React.useState(true);\n\n useEffect(() => {\n let mounted = true;\n\n const initViewer = async () => {\n if (!containerRef.current) return;\n\n try {\n setLoading(true);\n setError(null);\n\n // Dynamically import your custom Viewer from viewer/app.ts\n const { Viewer } = await import(\"/frontend/viewer/app.ts\");\n\n if (!mounted) return;\n\n console.log(\"Initializing Mol* Viewer...\");\n const viewer = await Viewer.create(containerRef.current, {\n layoutIsExpanded,\n layoutShowControls,\n });\n\n console.log(\"Mol* Viewer loaded successfully\", viewer);\n setLoading(false);\n } catch (err) {\n console.error(\"Failed to initialize viewer:\", err);\n console.error(\n \"Error stack:\",\n err instanceof Error ? err.stack : \"No stack trace\",\n );\n console.error(\"Error details:\", {\n type: typeof err,\n constructor: err?.constructor?.name,\n message: err instanceof Error ? err.message : String(err),\n });\n if (mounted) {\n const errorMsg =\n err instanceof Error\n ? `${err.message}\\n\\nStack: ${err.stack}`\n : String(err);\n setError(errorMsg);\n setLoading(false);\n }\n }\n };\n\n initViewer();\n\n return () => {\n mounted = false;\n };\n }, [layoutIsExpanded, layoutShowControls]);\n\n return (\n \n {loading && (\n \n Loading Mol* Viewer...\n \n )}\n {error && (\n \n Error loading viewer:\n \n {error}\n \n \n )}\n \n \n );\n}\n","deleted","label",[168,169,149],"frontend","components","permalink","https://www.val.town/x/zcpbx/MolstarViewer/code/frontend/components/MolstarViewer.tsx","extension","actionData","errors"]