[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_165":166,"_167":168},"routes/_app.x.$handle.$name",{"_96":95,"_32":44,"_104":86,"_26":36,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":57,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_42":43,"_32":44,"_37":45,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":24},"version",15,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":29},"file",{"_30":31,"_32":27,"_33":34,"_35":36,"_37":38,"_39":14,"_40":41,"_23":24},"previous","deleted",false,"deletedHere","path","new-file-8631.tsx","latestPath","index.html","fileId","9309217e-2b15-11f0-b5b6-569c3dd06744","name","fileType","script","content","","createdAt",["D",1746603210958],"branchVersion","branchId","fdb0bd9a-2b13-11f0-a5f4-569c3dd06744","id","fdb05a12-2b13-11f0-a5f4-569c3dd06744","untitled-2301",["D",1746602530902],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","b12b39d0-1fe4-11f0-9001-4fc1852e0e06","pinnedFileId","0016a1d0-2b14-11f0-8113-569c3dd06744","pinPreview",true,"pinMigrated","screenshotVersion",25,"likeCount",0,"orgId","45a0d482-0d4d-4887-9bc4-d08243be47a9","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":53,"_100":101,"_102":24},"branch",{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"isOwned",27,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","salon","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoiZGVmYXVsdCIsImlpZCI6Imluc18yTm10cGhQUklwU0tqZHNiOHNnNGd2ZjJURFUiLCJyaWQiOiJ1c2VyXzJ3NnI5NzZ4ajBmUUZoTUxYdExrMmZYWnAzdyJ9","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_42":43,"_32":44,"_37":161,"_46":-5,"_47":24,"_48":49,"_50":49,"_51":-5,"_52":-5,"_18":53,"_54":55,"_56":57,"_58":-5,"_59":60,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":162,"_80":163,"_82":164,"_84":24},"tree",[152,153],"files",[152,153],"counts",{"_141":62,"_142":143,"_144":143,"_145":146,"_147":148},"contents",[125,126],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_42":133,"_32":134,"_30":55,"_128":-5,"_40":41,"_39":135,"_129":24,"_37":136,"_13":137,"_33":138,"_35":139,"_23":24,"_131":-5,"_26":140},{"_42":127,"_32":27,"_30":31,"_128":-5,"_40":41,"_39":14,"_129":24,"_37":130,"_13":62,"_33":34,"_35":36,"_23":24,"_131":-5,"_26":132},"930920ca-2b15-11f0-b5b6-569c3dd06744","parentId","latest",["D",1746603210958],"label",[27],"5320eb50-2b15-11f0-856a-569c3dd06744","main.tsx",14,["D",1746603103737],13,"http","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from \"https://esm.sh/react@18.2.0\";\n\n/* ---------- Types ---------- */\n\nexport interface Scores {\n relevancy: number;\n relatability: number;\n likeness: number;\n}\n\nexport interface NavNode {\n id: string;\n row: number;\n col: number;\n data?: T;\n scores: Scores;\n}\n\nexport interface FocusGridProps {\n nodes: NavNode[];\n initialId?: string;\n scoreWeights?: Partial;\n onFocusChange?: (node: NavNode) => void;\n renderNode: (node: NavNode, focused: boolean) => React.ReactNode;\n className?: string;\n gridCols?: number;\n gap?: string;\n}\n\n/* ---------- Constants ---------- */\n\nconst DEFAULT_WEIGHTS: Scores = {\n relevancy: 1,\n relatability: 1,\n likeness: 1,\n};\n\nconst SWIPE_THRESHOLD = 32;\n\ntype Dir = \"up\" | \"down\" | \"left\" | \"right\";\n\n/* ---------- Component ---------- */\nconst FocusGrid = ({\n nodes,\n initialId,\n scoreWeights = DEFAULT_WEIGHTS,\n onFocusChange,\n renderNode,\n className,\n gridCols = 4,\n gap = \"1rem\",\n}: FocusGridProps) => {\n /* ----- idx / lookup helpers ----- */\n const nodeMap = useMemo(() => new Map(nodes.map((n) => [n.id, n])), [nodes]);\n const [focusedId, setFocusedId] = useState(() => {\n if (initialId && nodeMap.has(initialId)) {\n return initialId;\n }\n return nodes[0]?.id;\n });\n\n const containerRef = useRef(null);\n const cellRefs = useRef(new Map());\n\n /* ----- focus side-effects ----- */\n useLayoutEffect(() => {\n const el = cellRefs.current.get(focusedId!);\n el?.focus({ preventScroll: true });\n if (onFocusChange) {\n const node = nodeMap.get(focusedId!);\n if (node) onFocusChange(node);\n }\n }, [focusedId, nodeMap, onFocusChange]);\n\n /* ---------- Traversal heuristic ---------- */\n const getNextId = useCallback(\n (dir: Dir): string | undefined => {\n const current = nodeMap.get(focusedId!);\n if (!current) return;\n\n const weight = (s: Scores) =>\n (s.relevancy * (scoreWeights.relevancy ?? DEFAULT_WEIGHTS.relevancy))\n + (s.relatability * (scoreWeights.relatability ?? DEFAULT_WEIGHTS.relevancy))\n + (s.likeness * (scoreWeights.likeness ?? DEFAULT_WEIGHTS.likeness));\n\n let best: { id: string; score: number; primaryDist: number; secDist: number } | undefined;\n\n nodes.forEach((node) => {\n if (node.id === current.id) return;\n const rowDiff = node.row - current.row;\n const colDiff = node.col - current.col;\n\n const isDirOk = (dir === \"up\" && rowDiff < 0)\n || (dir === \"down\" && rowDiff > 0)\n || (dir === \"left\" && colDiff < 0)\n || (dir === \"right\" && colDiff > 0);\n\n if (!isDirOk) return;\n\n const primaryDist = dir === \"up\" || dir === \"down\" ? Math.abs(rowDiff) : Math.abs(colDiff);\n const secDist = dir === \"up\" || dir === \"down\" ? Math.abs(colDiff) : Math.abs(rowDiff);\n const compositeScore = weight(node.scores);\n\n if (\n !best\n || primaryDist < best.primaryDist\n || (primaryDist === best.primaryDist && compositeScore > best.score)\n || (primaryDist === best.primaryDist && compositeScore === best.score && secDist < best.secDist)\n ) {\n best = { id: node.id, score: compositeScore, primaryDist, secDist };\n }\n });\n\n return best?.id;\n },\n [focusedId, nodeMap, nodes, scoreWeights],\n );\n\n /* ---------- Keyboard handling ---------- */\n const onKey = useCallback(\n (e: KeyboardEvent) => {\n if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return;\n let dir: Dir | undefined;\n switch (e.key) {\n case \"ArrowUp\":\n dir = \"up\";\n break;\n case \"ArrowDown\":\n dir = \"down\";\n break;\n case \"ArrowLeft\":\n dir = \"left\";\n break;\n case \"ArrowRight\":\n dir = \"right\";\n break;\n }\n if (dir) {\n const id = getNextId(dir);\n if (id && id !== focusedId) {\n e.preventDefault();\n setFocusedId(id);\n }\n }\n },\n [focusedId, getNextId],\n );\n\n /* ---------- Swipe handling ---------- */\n const touch = useRef<{ x: number; y: number } | null>(null);\n\n const onTouchStart = (e: React.TouchEvent) => {\n const t = e.touches[0];\n touch.current = { x: t.clientX, y: t.clientY };\n };\n\n const onTouchEnd = (e: React.TouchEvent) => {\n if (!touch.current) return;\n const t = e.changedTouches[0];\n const dx = t.clientX - touch.current.x;\n const dy = t.clientY - touch.current.y;\n\n if (Math.abs(dx) < SWIPE_THRESHOLD && Math.abs(dy) < SWIPE_THRESHOLD) return;\n\n const dir: Dir = Math.abs(dx) > Math.abs(dy) ? (dx < 0 ? \"right\" : \"left\") : dy < 0 ? \"down\" : \"up\";\n\n const id = getNextId(dir);\n if (id && id !== focusedId) setFocusedId(id);\n touch.current = null;\n };\n\n /* ---------- Global key listener lifecycle ---------- */\n useEffect(() => {\n const host = containerRef.current;\n host?.addEventListener(\"keydown\", onKey);\n return () => host?.removeEventListener(\"keydown\", onKey);\n }, [onKey]);\n\n /* ---------- Render ---------- */\n return (\n \n {nodes.map((node) => {\n const isFocused = node.id === focusedId;\n return (\n el && cellRefs.current.set(node.id, el)}\n style={{\n position: \"relative\",\n userSelect: \"none\",\n }}\n >\n {renderNode(node, isFocused)}\n \n );\n })}\n \n );\n};\n\nexport default FocusGrid;",[134],"pulls","branches",1,"forks","envVars",{"_149":62,"_151":62},"connections",{"_149":62,"_150":62},"count","unfilledCount","emptyCount",{"_42":133,"_32":134,"_30":55,"_128":-5,"_40":41,"_39":135,"_129":24,"_37":158,"_13":137,"_33":138,"_35":139,"_23":24,"_131":-5,"_155":159,"_26":160},{"_42":127,"_32":27,"_30":31,"_128":-5,"_40":41,"_39":14,"_129":24,"_37":154,"_13":62,"_33":34,"_35":36,"_23":24,"_131":-5,"_155":156,"_26":157},["D",1746603210958],"children",[],[27],["D",1746603103737],[],[134],["D",1746602530902],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":53,"_100":101,"_102":24},{"_13":85,"_32":86,"_42":41,"_87":43,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":44,"_94":95},"ctx",{"_78":-5,"_122":198,"_199":200,"_201":202,"_203":24,"_204":24,"_205":24,"_206":57,"_207":-5,"_208":-7,"_209":-7,"_210":62,"_211":24,"_212":24,"_213":-5,"_214":24,"_215":24,"_216":24,"_217":-5},"ENV",{"_169":170,"_171":172,"_173":86,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185,"_186":187,"_188":189,"_190":191,"_192":193,"_194":195,"_196":197},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","71c1b20804b3232a7e513be260cfffc1932a9e97","RENDER_GIT_BRANCH","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","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v15