[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_240":241,"_242":243},"routes/_app.x.$handle.$name",{"_101":100,"_32":46,"_109":87,"_27":110,"_13":14,"_111":-5,"_11":112,"_113":114,"_115":116,"_117":118,"_119":120,"_20":-5,"_121":122,"_123":124,"_125":25,"_126":127,"_128":60,"_129":-5,"_130":-5,"_131":132},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":81,"_82":83,"_84":85,"_86":25},"version",2,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/index.tsx","latestPath","fileId","019ba3c8-ee68-7669-b6d2-45f8b31aec59","name","index.tsx","fileType","script","content","/** @jsxImportSource 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\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();","/** @jsxImportSource 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\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();\n\nimport React, { useState } from \"react\";\nimport {\n Bar,\n BarChart,\n CartesianGrid,\n Legend,\n ResponsiveContainer,\n Tooltip,\n XAxis,\n YAxis,\n} from \"recharts\";\n\nconst CompensationModelLite = () => {\n // Budget scenario selector\n const [scenario, setScenario] = useState(\"medium\");\n // Performance slider (75%, 100%, 125%)\n const [performance, setPerformance] = useState(\"perform\");\n // Composition checkbox (true = 1.0x, false = 0.75x)\n const [compositionMet, setCompositionMet] = useState(true);\n // Firelight TVL contribution (0-500M)\n const [firelightTvl, setFirelightTvl] = useState(0);\n\n const performanceMultipliers = {\n underperform: { label: \"Underperform\", mult: 0.75 },\n perform: { label: \"Perform\", mult: 1.0 },\n outperform: { label: \"Outperform\", mult: 1.25 },\n };\n\n const perfMult = performanceMultipliers[performance].mult;\n\n // Scenario configurations\n const scenarios = {\n low: {\n label: \"$1B TVL Target (Conservative)\",\n tvlTarget: 1.0,\n totalSpend: 71.7,\n year1Spend: 51.2,\n year2Spend: 20.5,\n peakTvl: 1000,\n retainedTvl: 720,\n retentionPct: 72,\n },\n medium: {\n label: \"$2B TVL Target (Base Case)\",\n tvlTarget: 2.0,\n totalSpend: 138.0,\n year1Spend: 102.4,\n year2Spend: 35.6,\n peakTvl: 2000,\n retainedTvl: 1400,\n retentionPct: 70,\n },\n high: {\n label: \"$4B TVL Target (Aggressive)\",\n tvlTarget: 4.0,\n totalSpend: 229.3,\n year1Spend: 163.8,\n year2Spend: 65.5,\n peakTvl: 4000,\n retainedTvl: 2720,\n retentionPct: 68,\n },\n };\n\n // Base TVL trajectories (before performance adjustment)\n const baseTvlTrajectories = {\n low: [345, 825, 985, 965, 875, 813, 763, 713, 720, 720, 720],\n medium: [690, 1650, 1970, 1930, 1750, 1625, 1525, 1425, 1400, 1400, 1400],\n high: [1380, 3300, 3940, 3860, 3500, 3250, 3050, 2850, 2720, 2720, 2720],\n };\n\n const baseSpendTrajectories = {\n low: [14.94, 10.67, 11.09, 9.39, 5.12, 4.10, 3.93, 3.42, 2.90, 2.22, 1.37],\n medium: [\n 29.87,\n 21.33,\n 22.18,\n 18.77,\n 10.24,\n 8.20,\n 7.86,\n 6.84,\n 5.80,\n 4.44,\n 2.73,\n ],\n high: [\n 47.79,\n 34.13,\n 35.49,\n 30.03,\n 16.38,\n 13.12,\n 12.58,\n 10.94,\n 9.28,\n 7.10,\n 4.37,\n ],\n };\n\n const calendars = [\n \"Oct 26 - Jan 27\",\n \"Feb - Mar 27\",\n \"Apr - May 27\",\n \"Jun - Jul 27\",\n \"Aug - Sep 27\",\n \"Oct - Nov 27\",\n \"Dec 27 - Jan 28\",\n \"Feb - Mar 28\",\n \"Apr - May 28\",\n \"Jun - Jul 28\",\n \"Aug - Sep 28\",\n ];\n\n // TVL multiplier function - scales with scenario target\n const getTvlMult = (tvl, scenarioKey) => {\n // Base thresholds are for $2B scenario, scale proportionally\n const scale = scenarios[scenarioKey].tvlTarget / 2.0;\n const t1 = 1000 * scale; // $1B for $2B scenario\n const t2 = 1500 * scale; // $1.5B for $2B scenario\n const t3 = 1750 * scale; // $1.75B for $2B scenario\n const t4 = 2250 * scale; // $2.25B for $2B scenario\n const t5 = 2500 * scale; // $2.5B for $2B scenario\n\n if (tvl < t1) return 0;\n if (tvl < t2) return 0.5;\n if (tvl < t3) return 0.75;\n if (tvl < t4) return 1.0;\n if (tvl < t5) return 1.25;\n return 1.5;\n };\n\n // Efficiency multiplier function (base = 4%)\n const getEffMult = (efficiency) => {\n if (efficiency < 4) return 1.5;\n if (efficiency < 6) return 1.25;\n if (efficiency < 8) return 1.0;\n if (efficiency < 10) return 0.75;\n if (efficiency < 12) return 0.5;\n return 0;\n };\n\n // Generate period data with performance adjustment\n const generatePeriodData = (scenarioKey, perfMultiplier) => {\n const baseTvls = baseTvlTrajectories[scenarioKey];\n const baseSpends = baseSpendTrajectories[scenarioKey];\n const peakBaseTvl = Math.max(...baseTvls);\n\n let cumSpend = 0;\n let tvlSum = 0;\n let monthsElapsed = 0;\n\n return baseTvls.map((baseTvl, idx) => {\n const periodMonths = idx === 0 ? 4 : 2;\n const tvlRatio = baseTvl / peakBaseTvl;\n const adjustedTvl = Math.round(baseTvl * perfMultiplier);\n const firelightContrib = Math.round(firelightTvl * tvlRatio);\n const tvl = adjustedTvl + firelightContrib;\n const periodSpend = baseSpends[idx];\n\n cumSpend += periodSpend;\n tvlSum += tvl * periodMonths;\n monthsElapsed += periodMonths;\n const cumAvgTvl = tvlSum / monthsElapsed;\n\n const efficiency = (cumSpend / cumAvgTvl) * 100;\n const tvlMult = getTvlMult(tvl, scenarioKey);\n const effMult = getEffMult(efficiency);\n const compMult = compositionMet ? 1.0 : 0.75;\n\n // Period 0 always $0\n const combinedMult = idx === 0\n ? 0\n : Math.min(tvlMult * effMult * compMult, 1.5);\n const bonus = 1.0 * combinedMult;\n\n return {\n period: idx,\n calendar: calendars[idx],\n tvl,\n firelightContrib,\n periodSpend,\n cumSpend,\n efficiency,\n tvlMult,\n effMult,\n compMult,\n bonus,\n };\n });\n };\n\n const current = scenarios[scenario];\n const periodData = generatePeriodData(scenario, perfMult);\n\n const totalSpend = current.totalSpend;\n const projectFees = 5.0;\n const distributionFees = totalSpend * 0.07;\n const bonusCompensation = periodData.reduce((sum, p) => sum + p.bonus, 0);\n const totalCompensation = projectFees + distributionFees + bonusCompensation;\n\n // Adjusted peak/retained TVL based on performance\n const adjustedPeakTvl = current.peakTvl * perfMult;\n const adjustedRetainedTvl = current.retainedTvl * perfMult;\n\n // Generate quarterly data based on scenario\n const getQuarterlyData = () => {\n const scale = totalSpend / 138.0;\n return [\n {\n quarter: \"Q4 2026\",\n label: \"Q4'26\",\n projectFees: 2.0,\n distFees: 1.57 * scale,\n bonus: 0,\n total: 2.0 + 1.57 * scale,\n },\n {\n quarter: \"Q1 2027\",\n label: \"Q1'27\",\n projectFees: 1.0,\n distFees: 1.49 * scale,\n bonus: periodData[1].bonus,\n total: 1.0 + 1.49 * scale + periodData[1].bonus,\n },\n {\n quarter: \"Q2 2027\",\n label: \"Q2'27\",\n projectFees: 0,\n distFees: 1.55 * scale,\n bonus: periodData[2].bonus + periodData[3].bonus,\n total: 1.55 * scale + periodData[2].bonus + periodData[3].bonus,\n },\n {\n quarter: \"Q3 2027\",\n label: \"Q3'27\",\n projectFees: 0,\n distFees: 1.03 * scale,\n bonus: periodData[4].bonus,\n total: 1.03 * scale + periodData[4].bonus,\n },\n {\n quarter: \"Q4 2027\",\n label: \"Q4'27\",\n projectFees: 2.0,\n distFees: 0.84 * scale,\n bonus: periodData[5].bonus + periodData[6].bonus * 0.5,\n total: 2.0 + 0.84 * scale + periodData[5].bonus +\n periodData[6].bonus * 0.5,\n },\n {\n quarter: \"Q1 2028\",\n label: \"Q1'28\",\n projectFees: 0,\n distFees: 0.69 * scale,\n bonus: periodData[6].bonus * 0.5 + periodData[7].bonus,\n total: 0.69 * scale + periodData[6].bonus * 0.5 + periodData[7].bonus,\n },\n {\n quarter: \"Q2 2028\",\n label: \"Q2'28\",\n projectFees: 0,\n distFees: 0.54 * scale,\n bonus: periodData[8].bonus + periodData[9].bonus * 0.5,\n total: 0.54 * scale + periodData[8].bonus + periodData[9].bonus * 0.5,\n },\n {\n quarter: \"Q3 2028\",\n label: \"Q3'28\",\n projectFees: 0,\n distFees: 0.25 * scale,\n bonus: periodData[9].bonus * 0.5 + periodData[10].bonus,\n total: 0.25 * scale + periodData[9].bonus * 0.5 + periodData[10].bonus,\n },\n ];\n };\n\n const quarterlyData = getQuarterlyData();\n\n // Calendar year data\n const calendarYears = [\n {\n year: \"2026\",\n months: \"Oct - Dec\",\n projectFees: 2.0,\n spend: current.year1Spend * 0.22,\n distFees: current.year1Spend * 0.22 * 0.07,\n bonus: 0,\n },\n {\n year: \"2027\",\n months: \"Jan - Dec\",\n projectFees: 3.0,\n spend: current.year1Spend * 0.78 + current.year2Spend * 0.25,\n distFees: (current.year1Spend * 0.78 + current.year2Spend * 0.25) * 0.07,\n bonus: periodData.slice(1, 7).reduce((sum, p) => sum + p.bonus, 0),\n },\n {\n year: \"2028\",\n months: \"Jan - Sep\",\n projectFees: 0,\n spend: current.year2Spend * 0.75,\n distFees: current.year2Spend * 0.75 * 0.07,\n bonus: periodData.slice(7).reduce((sum, p) => sum + p.bonus, 0),\n },\n ];\n calendarYears.forEach((cy) =>\n cy.total = cy.projectFees + cy.distFees + cy.bonus\n );\n\n return (\n

\n {/* Header */}\n

\n XRPL EVM Compensation Summary\n

\n October 2026 - September 2028\n

\n\n {/* Scenario Selector */}\n

\n setScenario(\"low\")}\n className={`p-5 rounded-xl text-left transition-all ${\n scenario === \"low\"\n ? \"bg-blue-600 text-white shadow-lg scale-[1.02]\"\n : \"bg-blue-100 text-blue-800 hover:bg-blue-200\"\n }`}\n >\n

\n $1B TVL Target (Conservative)\n

â€¢ 2-Year Net Spend: $71.7M

â€¢ Year 1: $51.2M | Year 2: $20.5M

\n \n setScenario(\"medium\")}\n className={`p-5 rounded-xl text-left transition-all ${\n scenario === \"medium\"\n ? \"bg-blue-600 text-white shadow-lg scale-[1.02]\"\n : \"bg-blue-100 text-blue-800 hover:bg-blue-200\"\n }`}\n >\n

$2B TVL Target (Base Case)

â€¢ 2-Year Net Spend: $138.0M

â€¢ Year 1: $102.4M | Year 2: $35.6M

\n \n setScenario(\"high\")}\n className={`p-5 rounded-xl text-left transition-all ${\n scenario === \"high\"\n ? \"bg-blue-600 text-white shadow-lg scale-[1.02]\"\n : \"bg-blue-100 text-blue-800 hover:bg-blue-200\"\n }`}\n >\n

$4B TVL Target (Aggressive)

â€¢ 2-Year Net Spend: $229.3M

â€¢ Year 1: $163.8M | Year 2: $65.5M

\n \n

\n\n {/* Model Parameters */}\n

\n {/* Performance Selector */}\n

\n TVL Performance vs Target\n

\n setPerformance(\"underperform\")}\n className={`flex-1 py-3 px-4 transition-all border-r border-gray-200 ${\n performance === \"underperform\"\n ? \"bg-indigo-600 text-white\"\n : \"bg-gray-50 text-gray-700 hover:bg-gray-100\"\n }`}\n >\n \n Underperform\n

\n \n 75% of target\n

\n \n Peak: ${(current.peakTvl * 0.75 / 1000).toFixed(2)}B\n

\n \n setPerformance(\"perform\")}\n className={`flex-1 py-3 px-4 transition-all border-r border-gray-200 ${\n performance === \"perform\"\n ? \"bg-indigo-600 text-white\"\n : \"bg-gray-50 text-gray-700 hover:bg-gray-100\"\n }`}\n >\n \n Perform\n

\n \n 100% of target\n

\n \n Peak: ${(current.peakTvl / 1000).toFixed(2)}B\n \n \n setPerformance(\"outperform\")}\n className={`flex-1 py-3 px-4 transition-all ${\n performance === \"outperform\"\n ? \"bg-indigo-600 text-white\"\n : \"bg-gray-50 text-gray-700 hover:bg-gray-100\"\n }`}\n >\n \n Outperform\n \n \n 125% of target\n \n \n Peak: ${(current.peakTvl * 1.25 / 1000).toFixed(2)}B\n \n \n \n \n\n {/* Composition and Firelight Row */}\n

\n {/* Composition Checkbox */}\n

\n Composition Requirement\n

\n \n setCompositionMet(e.target.checked)}\n className=\"w-5 h-5 text-indigo-600 rounded border-gray-300 focus:ring-indigo-500\"\n />\n

\n ≥60% XRP + RLUSD\n

\n {compositionMet\n ? \"Met → 1.0× multiplier\"\n : \"Not met → 0.75× multiplier\"}\n

\n \n {compositionMet ? \"1.0×\" : \"0.75×\"}\n

\n \n

\n\n {/* Firelight TVL Slider */}\n

\n Firelight TVL Contribution\n

\n ${firelightTvl}M\n

\n setFirelightTvl(parseInt(e.target.value))}\n className=\"w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-indigo-600\"\n />\n

\n $0\n $250M\n $500M\n

\n \n \n\n {/* Total Compensation - Hero Card */}\n

\n Total Compensation\n

\n ${totalCompensation.toFixed(2)}M\n

Over 24-month program

\n\n

\n ${projectFees.toFixed(2)}M\n

Project Fees

\n ${distributionFees.toFixed(2)}M\n

Distribution (7%)

\n ${bonusCompensation.toFixed(2)}M\n

Bonus Comp

\n\n {/* Key Metrics Row */}\n

Program Spend

\n ${totalSpend.toFixed(1)}M\n

\n Peak TVL{\" \"}\n {performance !== \"perform\" && `(${Math.round(perfMult * 100)}%)`}\n

\n ${(adjustedPeakTvl / 1000).toFixed(2)}B\n

\n Retained TVL{\" \"}\n {performance !== \"perform\" && `(${Math.round(perfMult * 100)}%)`}\n

\n ${(adjustedRetainedTvl / 1000).toFixed(2)}B\n

Comp / Spend

\n {(totalCompensation / totalSpend * 100).toFixed(1)}%\n

\n\n {/* Calendar Year Breakdown */}\n

\n {calendarYears.map((cy, idx) => (\n \n \n {cy.year}\n

{cy.months}

\n Project Fees\n \n ${cy.projectFees.toFixed(2)}M\n \n

\n Distribution\n ${cy.distFees.toFixed(2)}M\n

\n Bonus\n ${cy.bonus.toFixed(2)}M\n

\n Total\n ${cy.total.toFixed(2)}M\n

\n \n ))}\n \n\n {/* Quarterly Earnings Chart */}\n

\n Quarterly Earnings\n

\n \n \n \n \n `$${v}M`} />\n [`$${value.toFixed(2)}M`, name]}\n labelFormatter={(label) => label}\n />\n \n \n \n \n \n \n

\n\n {/* Period Breakdown Table */}\n

\n Period-by-Period Breakdown\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n {periodData.map((row, idx) => (\n = 1.0 && row.effMult >= 1.0\n ? \"bg-green-50\"\n : \"\"\n }`}\n >\n \n \n \n \n \n \n \n \n ))}\n \n \n \n \n \n \n \n

Period	Calendar	TVL	Spend	Efficiency	TVLÃ—EffÃ—Comp	Bonus
P{row.period}	\n {row.calendar}\n	\n ${row.tvl}M\n	\n ${row.periodSpend.toFixed(2)}M\n	\n {row.efficiency.toFixed(2)}%\n	\n {row.tvlMult}Ã—{row.effMult}Ã—{row.compMult}\n	\n ${row.bonus.toFixed(3)}M\n
TOTAL	\n ${totalSpend.toFixed(2)}M\n		\n ${bonusCompensation.toFixed(2)}M\n

\n\n {/* Multiplier Reference - Compact */}\n

\n TVL Multiplier{\" \"}\n \n ({current.label.split(\" \")[0]})\n \n

\n \n {\"<\"}${(1000 * current.tvlTarget / 2 / 1000).toFixed(1)}B\n \n 0x\n

\n \n ${(1000 * current.tvlTarget / 2 / 1000).toFixed(\n 1,\n )}B-${(1500 * current.tvlTarget / 2 / 1000).toFixed(2)}B\n \n 0.5x\n

\n \n ${(1500 * current.tvlTarget / 2 / 1000).toFixed(\n 2,\n )}B-${(1750 * current.tvlTarget / 2 / 1000).toFixed(2)}B\n \n 0.75x\n

\n \n ${(1750 * current.tvlTarget / 2 / 1000).toFixed(\n 2,\n )}B-${(2250 * current.tvlTarget / 2 / 1000).toFixed(2)}B\n \n 1.0x\n

\n \n ${(2250 * current.tvlTarget / 2 / 1000).toFixed(\n 2,\n )}B-${(2500 * current.tvlTarget / 2 / 1000).toFixed(2)}B\n \n 1.25x\n

\n \n â‰¥${(2500 * current.tvlTarget / 2 / 1000).toFixed(2)}B\n \n 1.5x\n

\n Efficiency Multiplier\n

\n {\"<\"}4%\n 1.5x\n

\n 4%-6%\n 1.25x\n

\n 6%-8%\n 1.0x\n

\n 8%-10%\n 0.75x\n

\n 10%-12%\n 0.5x\n

\n â‰¥12%\n 0x\n

\n Composition Multiplier\n

\n {\"<\"}60% XRP+RLUSD\n 0.75x\n

\n â‰¥60% XRP+RLUSD\n 1.0x\n

\n Base case assumes 60% composition\n

\n\n {/* Key Assumptions - Compact */}\n

\n Key Assumptions\n

\n Program:{\" \"}\n 24 months (Oct 2026 - Sep 2028)\n

\n Budget: $138M incentives\n

\n Peak TVL: $2.0B (Month 8)\n

\n Retention: 70% ($1.4B)\n

\n Project Fees:{\" \"}\n $5M ($2M+$1M+$2M)\n

\n Distribution: 7% of spend\n

\n Bonus Target:{\" \"}\n $10M ($1M Ã— 10)\n

\n Max Bonus: $15M (1.5x cap)\n

\n \n \n );\n};\n\nexport default CompensationModelLite;","createdAt",["D",1767979435922],"branchVersion","branchId","ec60404a-ed7f-11f0-8e7c-42dde27851f2","id","ec5cb862-ed7f-11f0-8e7c-42dde27851f2","reactHonoStarter",["D",1767979413027],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Starter template with client-side React & Hono server","imageUrl","019ba3c1-df4f-766b-b203-fce1c2ce8fc9","pinnedFileId","019ba3c8-ee68-7669-b6d2-57c45c414f5e","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019ba3c1-df4f-766b-b204-014f53697f73","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_101":100,"_108":104},"org",{"_101":100,"_102":-5,"_103":104,"_18":56,"_105":106,"_107":25},"branch",{"_13":14,"_32":87,"_44":43,"_88":45,"_89":90,"_91":92,"_93":51,"_94":95,"_96":97,"_98":46,"_99":100},"isOwned","main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",72,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","bobcat5000","handle","displayName","avatar","https://img.clerk.com/eyJ0eXBlIjoicHJveHkiLCJzcmMiOiJodHRwczovL2ltYWdlcy5jbGVyay5kZXYvb2F1dGhfZ2l0aHViL2ltZ18zODF0WE1raGY0WVY2bVZNYzk3bGdmUlBTZ2UifQ","tier","free","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":236,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":-5,"_18":56,"_57":58,"_59":60,"_61":-5,"_62":-5,"_63":64,"_65":66,"_67":-5,"_68":-5,"_69":-5,"_70":-5,"_71":72,"_73":72,"_74":75,"_76":75,"_77":75,"_78":72,"_79":72,"_80":237,"_82":238,"_84":239,"_86":25},"tree",[179,186,187],"files",[179,180,181,182,183,184,185,186,187],"counts",{"_169":64,"_170":150,"_171":64,"_172":173,"_174":175},"contents",[144,145,146],"upstreamProject",{"_44":95,"_32":140,"_53":54,"_55":141,"_50":51,"_80":142},"upstreamBranch",{"_44":90,"_39":133,"_134":135,"_32":87,"_88":95,"_13":136,"_89":-5,"_91":-5,"_137":138,"_48":-5,"_86":25,"_50":51,"_99":139,"_65":97,"_98":140},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789712023&sig=88fb70a86c51d041f395c6297968079607cc1d560ddc1a226607a985686e45d8",{"_101":139,"_108":143},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789712023&sig=4ea00f2465ad2ac2c0c8b5041f68088869601c9d959651859f30e585fd93d920",{"_44":163,"_32":164,"_30":165,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":166,"_13":64,"_34":167,"_36":-5,"_24":25,"_155":-5,"_27":168},{"_44":157,"_32":158,"_30":159,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":160,"_13":64,"_34":20,"_36":161,"_24":25,"_155":-5,"_27":162},{"_44":147,"_32":148,"_30":58,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":152,"_13":64,"_34":153,"_36":154,"_24":25,"_155":-5,"_27":156},"ec644ec4-ed7f-11f0-8e7c-42dde27851f2","index.ts","parentId",1,"latest",["D",1767979413027],"http","import { serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\n\n// Serve index.html at the root /\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\n\n// Serve all /frontend files\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\n\n// Add your API routes here\n// app.get(\"/api/data\", c => c.json({ hello: \"world\" }));\n\n// Unwrap and rethrow Hono errors as the original error\n// If you delete this, all errors will be \"Internal Server Error\"\napp.onError((err) => Promise.reject(err));\n\n// HTTP vals expect an exported \"fetch handler\"\n// This is how you \"run the server\" in Val Town with Hono\nexport default app.fetch;","label",[148],"ec643f92-ed7f-11f0-8e7c-42dde27851f2","README.md","019ba3c8-ee68-7669-b6d2-53d4333f9a63",["D",1767979413027],"# React Hono Starter\n\nThis app is a starter template for client-side React and server-side Hono.\n\n## Getting started\n\nGet a copy of this starter template by clicking the **Remix** button in the\ntop-right.\n\n## How it works\n\n- The **entrypoint** is [`index.ts`](index.ts). That's the backend HTTP server,\n which also serves the all the frontend assets.\n\n- The **client-side entrypoint** is\n [`/frontend/index.html`](/frontend/index.html)\n - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)\n - which in turn imports the React app from\n [`/frontend/components/App.tsx`](/frontend/components/App.tsx).\n\nSo if you wanted to get a sense of how this app comes together, we suggest\nreading the files in this order:\n\n[`index.ts`](index.ts) -> [`/frontend/index.html`](/frontend/index.html) ->\n[`/frontend/index.tsx`](/frontend/index.tsx) ->\n[`/frontend/components/App.tsx`](/frontend/components/App.tsx)\n\n## Further resources\n\n- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a\n bigger example project, with a SQLite database table, queries, client-side\n CSS, a favicon, and shared code that runs on both client and server.",[158],"ec643d1c-ed7f-11f0-8e7c-42dde27851f2","frontend","019ba3c8-ee68-7669-b6d2-4e5da82ab692",["D",1767979413027],"directory",[164],"pulls","branches","forks","envVars",{"_176":64,"_178":64},"connections",{"_176":64,"_177":64},"count","unfilledCount","emptyCount",{"_44":163,"_32":164,"_30":165,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":233,"_13":64,"_34":167,"_36":-5,"_24":25,"_155":-5,"_189":234,"_27":235},{"_44":229,"_32":228,"_30":223,"_149":165,"_42":43,"_41":150,"_151":60,"_39":230,"_13":64,"_34":167,"_36":-5,"_24":25,"_155":-5,"_189":231,"_27":232},{"_44":220,"_32":221,"_30":222,"_149":223,"_42":43,"_41":150,"_151":60,"_39":224,"_13":64,"_34":35,"_36":225,"_24":25,"_155":-5,"_189":226,"_27":227},{"_44":213,"_32":214,"_30":215,"_149":165,"_42":43,"_41":150,"_151":60,"_39":216,"_13":64,"_34":20,"_36":217,"_24":25,"_155":-5,"_189":218,"_27":219},{"_44":206,"_32":207,"_30":208,"_149":165,"_42":43,"_41":150,"_151":60,"_39":209,"_13":64,"_34":20,"_36":210,"_24":25,"_155":-5,"_189":211,"_27":212},{"_44":202,"_32":33,"_30":31,"_149":165,"_42":43,"_41":14,"_151":60,"_39":203,"_13":150,"_34":35,"_36":38,"_24":25,"_155":-5,"_189":204,"_27":205},{"_44":195,"_32":196,"_30":197,"_149":165,"_42":43,"_41":150,"_151":60,"_39":198,"_13":64,"_34":20,"_36":199,"_24":25,"_155":-5,"_189":200,"_27":201},{"_44":157,"_32":158,"_30":159,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":192,"_13":64,"_34":20,"_36":161,"_24":25,"_155":-5,"_189":193,"_27":194},{"_44":147,"_32":148,"_30":58,"_149":-5,"_42":43,"_41":150,"_151":60,"_39":188,"_13":64,"_34":153,"_36":154,"_24":25,"_155":-5,"_189":190,"_27":191},["D",1767979413027],"children",[],[148],["D",1767979413027],[],[158],"ec64390c-ed7f-11f0-8e7c-42dde27851f2","style.css","019ba3c8-ee68-7669-b6d2-496a5c53b16b",["D",1767979413027],"body {\n font-family: -apple-system, Arial, sans-serif;\n color: #333;\n padding: 20px;\n}\n\nbutton {\n background-color: #4a90e2;\n color: white;\n border: none;\n padding: 8px 16px;\n border-radius: 4px;\n cursor: pointer;\n}\n\nbutton:hover {\n background-color: #357ae8;\n}",[],[164,196],"f9fe780c-ed7f-11f0-be8e-42dde27851f2",["D",1767979435922],[],[164,33],"ec642f0c-ed7f-11f0-8e7c-42dde27851f2","index.html","019ba3c8-ee68-7669-b6d2-43ceb8dfccb3",["D",1767979413027],"\n\n \n \n \n React Hono Val Town Starter\n \n \n \n \n

\n \n \n \n",[],[164,207],"ec642b10-ed7f-11f0-8e7c-42dde27851f2","favicon.svg","019ba3c8-ee68-7669-b6d2-3f13f52952e2",["D",1767979413027],"\n",[],[164,214],"ec6406d0-ed7f-11f0-8e7c-42dde27851f2","App.tsx","019ba3c8-ee68-7669-b6d2-34d2bd669f98","019ba3c8-ee68-7669-b6d2-3a3c68b97b2e",["D",1767979413027],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function App() {\n const [clicked, setClicked] = useState(0);\n return (\n

Val Town React + Hono Starter

\n I've been clicked times\n

\n );\n}",[],[164,228,221],"components","ec642926-ed7f-11f0-8e7c-42dde27851f2",["D",1767979413027],[181],[164,228],["D",1767979413027],[180,182,183,184,185],[164],["D",1767979413027],{"_101":100,"_108":104},{"_101":100,"_102":-5,"_103":104,"_18":56,"_105":106,"_107":25},{"_13":14,"_32":87,"_44":43,"_88":45,"_89":90,"_91":92,"_93":51,"_94":95,"_96":97,"_98":46,"_99":100},"ctx",{"_80":-5,"_130":273,"_274":275,"_276":277,"_278":25,"_279":25,"_280":25,"_281":60,"_282":-5,"_283":-7,"_284":-7,"_285":64,"_286":25,"_287":25,"_288":-5,"_289":25,"_290":25,"_291":25,"_292":-5},"ENV",{"_244":245,"_246":247,"_248":87,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272},"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 · v2