Refine builder partner prompt flow

Author: tannerlinsley

src/components/ApplicationStarter.tsx

@@ -2,13 +2,13 @@ import * as React from 'react'
 import { useHeldKeys, useHotkey } from '@tanstack/react-hotkeys'
 
 interface ApplicationStarterHotkeysProps {
-  onAnalyze: () => void
+  onSubmit: () => void
   onModKeyChange: (isHeld: boolean) => void
   promptFocused: boolean
 }
 
 export function ApplicationStarterHotkeys({
-  onAnalyze,
+  onSubmit,
   onModKeyChange,
   promptFocused,
 }: ApplicationStarterHotkeysProps) {
@@ -20,7 +20,7 @@ export function ApplicationStarterHotkeys({
       return
     }
 
-    onAnalyze()
+    onSubmit()
   })
 
   React.useEffect(() => {

src/components/ApplicationStarterHotkeys.client.tsx

@@ -240,20 +240,24 @@ const StarterPartnerButton = React.forwardRef<
   const tierOneTone = isTierOne
     ? selected
       ? 'translate-y-[-1px] border-transparent'
-      : 'border-gray-200 bg-white hover:border-[var(--starter-partner-hover-border-color)] dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[var(--starter-partner-hover-border-color)]'
+      : 'border-gray-200 bg-white hover:border-[var(--starter-partner-hover-border-color)] active:border-[var(--starter-partner-active-border-color)] dark:border-gray-800 dark:bg-gray-950 dark:hover:border-[var(--starter-partner-hover-border-color)] dark:active:border-[var(--starter-partner-active-border-color)]'
     : null
   const tierThreeTone = isTierThree
     ? selected
       ? 'translate-y-[-1px] border-current bg-white shadow-[0_4px_12px_rgba(15,23,42,0.08)] dark:bg-gray-950'
-      : 'border-gray-200 bg-white text-gray-700 hover:border-[var(--starter-partner-hover-border-color)] hover:text-current dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200 dark:hover:border-[var(--starter-partner-hover-border-color)]'
+      : 'border-gray-200 bg-white text-gray-700 hover:border-[var(--starter-partner-hover-border-color)] hover:text-current active:border-[var(--starter-partner-active-border-color)] dark:border-gray-800 dark:bg-gray-950 dark:text-gray-200 dark:hover:border-[var(--starter-partner-hover-border-color)] dark:active:border-[var(--starter-partner-active-border-color)]'
     : null
+  const hoverBorderColor = colorWithAlpha(accent, 0.5) ?? accent
   const style: StarterPartnerButtonStyle = {
-    '--starter-partner-border-hover': usesPaletteSurface ? accent : undefined,
-    '--starter-partner-hover-border-color': accent,
+    '--starter-partner-active-border-color': accent,
+    '--starter-partner-border-hover': usesPaletteSurface
+      ? hoverBorderColor
+      : undefined,
+    '--starter-partner-hover-border-color': hoverBorderColor,
     backgroundColor: undefined,
     borderColor:
       isTierOne && selected
-        ? colorWithAlpha(accent, 0.92)
+        ? accent
         : selected && usesPaletteSurface
           ? accent
           : undefined,
@@ -283,7 +287,7 @@ const StarterPartnerButton = React.forwardRef<
         tierOneTone,
         usesPaletteSurface && palette.chip,
         usesPaletteSurface &&
-          'hover:border-[var(--starter-partner-border-hover)]',
+          'hover:border-[var(--starter-partner-border-hover)] active:border-[var(--starter-partner-active-border-color)]',
         tierThreeTone,
         buttonProps.className,
       )}

src/components/application-builder/parts.tsx

@@ -10,6 +10,7 @@ import {
 
 export type StarterTone = 'cyan' | 'emerald' | 'violet'
 export type StarterDeployProvider = 'cloudflare' | 'netlify' | 'railway'
+export type StarterPromptDeployProvider = 'lovable' | 'netlify'
 export type StarterPackageManager = 'bun' | 'npm' | 'pnpm' | 'yarn'
 export type StarterToolchain = 'biome' | 'eslint'
 
@@ -21,7 +22,10 @@ export interface StarterPalette {
 }
 
 export interface ApplicationStarterBuilderIntegration {
-  applyResult: (result: ApplicationStarterResult) => Promise<boolean>
+  applyResult: (
+    result: ApplicationStarterResult,
+    options?: { silent?: boolean },
+  ) => Promise<boolean>
 }
 
 export interface ApplicationStarterAnonymousQuota {
@@ -45,6 +49,7 @@ export interface StarterTryLibrary {
 }
 
 export type StarterPartnerButtonStyle = CSSProperties & {
+  '--starter-partner-active-border-color'?: string
   '--starter-partner-border-hover'?: string
   '--starter-partner-hover-border-color'?: string
 }
@@ -138,6 +143,31 @@ export const starterLoadingPhrases = [
   'Finding calmer waters...',
 ]
 
+export function buildStarterPromptDeployUrl(
+  provider: StarterPromptDeployProvider,
+  prompt: string,
+) {
+  switch (provider) {
+    case 'lovable': {
+      const url = new URL('https://lovable.dev/')
+
+      url.searchParams.set('autosubmit', 'true')
+      url.searchParams.set('utm_source', 'tanstack')
+      url.searchParams.set('prompt', prompt)
+
+      return url.toString()
+    }
+    case 'netlify': {
+      const url = new URL('https://app.netlify.com/start')
+
+      url.searchParams.set('prompt', prompt)
+      url.searchParams.set('utm_source', 'tanstack')
+
+      return url.toString()
+    }
+  }
+}
+
 export function isPinnedStarterLibrary(libraryId: LibraryId) {
   return starterPinnedLibraryIds.some(
     (pinnedLibraryId) => pinnedLibraryId === libraryId,