[{"_1":2,"_167":-5,"_168":-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","2f607f7b74b4e52529fb75176d403d8b5b284eb1","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,"_147":148,"_164":165,"_166":-5},"handle","dcm31","name","inspiringEmeraldMarsupial","path","main.tsx","project",{"_101":102,"_95":96,"_103":104,"_105":-5,"_106":107,"_108":109,"_110":-5,"_111":-5,"_12":112,"_113":-5,"_114":107,"_115":-5,"_116":32,"_14":117,"_118":119,"_120":119,"_121":122,"_123":122,"_124":122,"_125":119,"_126":119,"_23":127,"_130":131,"_133":134,"_146":20},"id","919de04e-2783-11f0-b46e-569c3dd06744","createdAt",["D",1746210648570],"deletedAt","legacyEnvVars",true,"privacy","public","description","imageUrl","9319c175-2593-4f88-ba21-04f2ef7b1c28","pinnedFileId","pinPreview","screenshotVersion","likeCount","d663a026-6449-42f6-9156-1d4a2d64d38c","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm",{"_93":94,"_128":129},"profileImageUrl","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvdXBsb2FkZWQvaW1nXzJ3SGtIMlhlMGwwT0JoSXZJckVVTXJuajN1YyJ9","org",{"_93":94,"_132":129},"avatar","branch",{"_135":136,"_95":43,"_101":137,"_138":102,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},"version",1,"919e2f68-2783-11f0-b46e-569c3dd06744","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","isOwned","file",{"_101":149,"_95":98,"_150":151,"_152":-5,"_153":137,"_154":136,"_155":107,"_103":156,"_135":32,"_157":158,"_159":160,"_161":20,"_162":-5,"_97":163},"91a1e838-2783-11f0-b46e-569c3dd06744","fileId","91a1e8c4-2783-11f0-b46e-569c3dd06744","parentId","branchId","branchVersion","latest",["D",1743192914596],"fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.3.1 */\nimport React from \"https://esm.sh/react@18.3.1\";\n\nexport function HandDrawnCardsLogo() {\n // Create a function to generate hand-drawn paths with waviness\n function createWavyPath(points, magnitude = 2, smoothness = 0.25) {\n // Helper to add waviness to points\n function addWaviness(points, magnitude) {\n return points.map(p => {\n // If this is a marker for a critical point, keep it exact\n if (p.critical) {\n return p;\n }\n \n // Add more random variation for rougher look\n const waviness = (Math.random() - 0.5) * magnitude * 1.5;\n const randomOffset = (Math.random() - 0.5) * magnitude * 0.8;\n return {\n x: p.x + waviness,\n y: p.y + randomOffset,\n critical: false\n };\n });\n }\n \n // Add waviness to the points\n const wavyPoints = addWaviness(points, magnitude);\n \n // Start with the first point\n let path = `M ${wavyPoints[0].x},${wavyPoints[0].y}`;\n \n // Helper to calculate control points for smooth curves\n function getControlPoints(p0, p1, p2, smoothness = 0.2) {\n // Calculate distances between points\n const d01 = Math.sqrt(Math.pow(p1.x - p0.x, 2) + Math.pow(p1.y - p0.y, 2));\n const d12 = Math.sqrt(Math.pow(p2.x - p1.x, 2) + Math.pow(p2.y - p1.y, 2));\n \n // Calculate control point distances proportional to segment lengths\n const fa = smoothness * d01 / (d01 + d12);\n const fb = smoothness * d12 / (d01 + d12);\n \n // Calculate control points\n const c1x = p1.x - fa * (p2.x - p0.x);\n const c1y = p1.y - fa * (p2.y - p0.y);\n const c2x = p1.x + fb * (p2.x - p0.x);\n const c2y = p1.y + fb * (p2.y - p0.y);\n \n return {\n cp1: { x: c1x, y: c1y },\n cp2: { x: c2x, y: c2y }\n };\n }\n \n // Add each point with a smooth curve\n for (let i = 1; i < wavyPoints.length - 1; i++) {\n const p0 = i === 1 ? wavyPoints[0] : wavyPoints[i - 1];\n const p1 = wavyPoints[i];\n const p2 = wavyPoints[i + 1];\n \n // Special handling for critical control points\n if (p1.critical) {\n path += ` L ${p1.x},${p1.y}`;\n } else {\n // Use a cubic bezier curve for smooth transitions\n const cp = getControlPoints(p0, p1, p2, smoothness);\n path += ` C ${cp.cp1.x},${cp.cp1.y} ${cp.cp2.x},${cp.cp2.y} ${p1.x},${p1.y}`;\n }\n }\n \n // Add the last point\n if (wavyPoints.length > 1) {\n path += ` L ${wavyPoints[wavyPoints.length-1].x},${wavyPoints[wavyPoints.length-1].y}`;\n }\n \n return path;\n }\n \n // Create hand-drawn card outline with properly placed corners\n function createCardOutline(x, y, width, height, cornerRadius) {\n // Points per edge for waviness\n const numPointsPerEdge = 6;\n const numPointsPerCorner = 6;\n const points = [];\n \n // Define the transition points where edges meet corners\n const transitionPoints = {\n topLeft: { x: x + cornerRadius, y: y, critical: true },\n topRight: { x: x + width - cornerRadius, y: y, critical: true },\n rightTop: { x: x + width, y: y + cornerRadius, critical: true },\n rightBottom: { x: x + width, y: y + height - cornerRadius, critical: true },\n bottomRight: { x: x + width - cornerRadius, y: y + height, critical: true },\n bottomLeft: { x: x + cornerRadius, y: y + height, critical: true },\n leftBottom: { x: x, y: y + height - cornerRadius, critical: true },\n leftTop: { x: x, y: y + cornerRadius, critical: true }\n };\n \n // Start with top-left transition point\n points.push(transitionPoints.topLeft);\n \n // Top edge (left to right)\n for (let i = 1; i < numPointsPerEdge; i++) {\n const t = i / numPointsPerEdge;\n const edgeX = transitionPoints.topLeft.x + t * (transitionPoints.topRight.x - transitionPoints.topLeft.x);\n points.push({\n x: edgeX,\n y: y,\n critical: false\n });\n }\n points.push(transitionPoints.topRight);\n \n // Top-right corner\n for (let i = 1; i < numPointsPerCorner; i++) {\n const t = i / numPointsPerCorner;\n const angle = -Math.PI/2 + t * (Math.PI/2);\n points.push({\n x: x + width - cornerRadius + Math.cos(angle) * cornerRadius,\n y: y + cornerRadius + Math.sin(angle) * cornerRadius,\n critical: false\n });\n }\n points.push(transitionPoints.rightTop);\n \n // Right edge (top to bottom)\n for (let i = 1; i < numPointsPerEdge; i++) {\n const t = i / numPointsPerEdge;\n const edgeY = transitionPoints.rightTop.y + t * (transitionPoints.rightBottom.y - transitionPoints.rightTop.y);\n points.push({\n x: x + width,\n y: edgeY,\n critical: false\n });\n }\n points.push(transitionPoints.rightBottom);\n \n // Bottom-right corner\n for (let i = 1; i < numPointsPerCorner; i++) {\n const t = i / numPointsPerCorner;\n const angle = 0 + t * (Math.PI/2);\n points.push({\n x: x + width - cornerRadius + Math.cos(angle) * cornerRadius,\n y: y + height - cornerRadius + Math.sin(angle) * cornerRadius,\n critical: false\n });\n }\n points.push(transitionPoints.bottomRight);\n \n // Bottom edge (right to left)\n for (let i = 1; i < numPointsPerEdge; i++) {\n const t = i / numPointsPerEdge;\n const edgeX = transitionPoints.bottomRight.x - t * (transitionPoints.bottomRight.x - transitionPoints.bottomLeft.x);\n points.push({\n x: edgeX,\n y: y + height,\n critical: false\n });\n }\n points.push(transitionPoints.bottomLeft);\n \n // Bottom-left corner\n for (let i = 1; i < numPointsPerCorner; i++) {\n const t = i / numPointsPerCorner;\n const angle = Math.PI/2 + t * (Math.PI/2);\n points.push({\n x: x + cornerRadius + Math.cos(angle) * cornerRadius,\n y: y + height - cornerRadius + Math.sin(angle) * cornerRadius,\n critical: false\n });\n }\n points.push(transitionPoints.leftBottom);\n \n // Left edge (bottom to top)\n for (let i = 1; i < numPointsPerEdge; i++) {\n const t = i / numPointsPerEdge;\n const edgeY = transitionPoints.leftBottom.y - t * (transitionPoints.leftBottom.y - transitionPoints.leftTop.y);\n points.push({\n x: x,\n y: edgeY,\n critical: false\n });\n }\n points.push(transitionPoints.leftTop);\n \n // Top-left corner\n for (let i = 1; i < numPointsPerCorner; i++) {\n const t = i / numPointsPerCorner;\n const angle = Math.PI + t * (Math.PI/2);\n points.push({\n x: x + cornerRadius + Math.cos(angle) * cornerRadius,\n y: y + cornerRadius + Math.sin(angle) * cornerRadius,\n critical: false\n });\n }\n \n // Close the shape by connecting back to the first point\n points.push(transitionPoints.topLeft);\n \n // Create the path with the correct waviness\n return createWavyPath(points, 2.5, 0.2);\n }\n \n // Mini cards have rougher edges\n function createMiniCard(x, y, width, height, rotation = 0) {\n // Card outline\n const pathData = createCardOutline(0, 0, width, height, 8);\n \n // Create SVG elements for a mini card\n return (\n \n \n \n {/* Add some horizontal lines to suggest content with more randomness */}\n {[1, 2, 3].map((i) => {\n const lineY = i * (height / 4);\n const marginX = width * 0.15;\n const linePoints = [];\n \n const segments = 8;\n for (let j = 0; j <= segments; j++) {\n const t = j / segments;\n linePoints.push({\n x: marginX + t * (width - 2 * marginX),\n y: lineY + (Math.random() - 0.5) * 3.0,\n critical: false\n });\n }\n \n return (\n \n );\n })}\n \n );\n }\n \n return (\n \n );\n}\n\nexport default HandDrawnCardsLogo;","deleted","label",[98],"permalink","https://www.val.town/x/dcm31/inspiringEmeraldMarsupial/code/main.tsx","extension","actionData","errors"]